參考這個： https://juejin.cn/post/6844903849614901261
DOM樹的根節點是document物件

DOM節點型別：HTML元素節點(element nodes)外，還有文位元組點(text nodes)、註釋節點(comment nodes)

常見的DOM節點的選取方式：

// 根據傳入的值，找到 DOM 中 id 為 'xxx' 的元素。
document.getElementById('xxx');

// 針對給定的 tag 名稱，返回所有符合條件的 NodeList 物件(節點的集合)
document.getElementsByTagName('xxx');

// 針對給定的 class 名稱，返回所有符合條件的節點集合
document.getElementsByClassName('xxx');

// 針對給定的 Selector 條件，返回第一個 或 所有符合條件的節點集合
document.querySelector('xxx'); 
document.querySelectorAll('xxx');
 

DOM 節點間的查詢遍歷(Traversing)
由於DOM 節點有分層的概念，於是節點與節點之間的關係，我們大致上可以分成以下兩種：

父子關係：除了document之外，每一個節點都會有個上層的節點，我們通常稱之為「父節點」 (Parent node)，而相對地，從屬於自己下層的節點，就會稱為「子節點」 (Child node)。

Node.childNodes
所有的DOM節點物件都有childNodes屬性，且此種屬性無法修改。
我們可以通過Node.hasChildNodes()來檢查某個DOM節點是否有子節點。

var node = document.querySelector('#hello');

// 如果 node 內有子元素
if( node.hasChildNodes() ) {
    
    // 可以通過 node.childNodes[n] (n 為數字索引) 取得對應的節點
    // 注意，NodeList 物件內容為即時更新的集合
    for (var i = 0; i < node.childNodes[i].length; i++) {
       // ...     
    }; 
}
 

Node.childNodes返回的可能會有這幾種：

HTML 元素節點(element nodes)
文位元組點(text nodes)，包含空格
註釋節點(comment nodes)

兄弟關係：有同一個「父節點」的節點，那麼他們彼此之間就是「兄弟節點」(Siblings node)。

檢視這個節點有沒有包含node.contains(givenNode)
https://developer.mozilla.org/zh-CN/docs/Web/API/Node/contains