英文 |?https://levelup.gitconnected.com/useful-dom-traversal-methods-d2b55cf8e25c翻譯 | web前端開發(ID：web_qdkf)客戶端JavaScript的主要用途是動態地處理網頁。我們可以使用DOM節點對象可用的DOM遍歷方法和屬性來做到這一點。對于任何給定的節點，添加或更改子元素和同級元素都很容易，因為DOM節點對象中內置了執行這些操作的屬性。以下是DOM Node對象用于獲取父節點，子節點和同級節點或元素的方法。

appendChild

這些appendChild方法使我們可以將子節點附加到給定的HTML元素上，作為當前節點的最后一個子節點。如果參數引用了DOM樹上的現有節點，則該節點將從其當前位置脫離并附加到其新位置。它使用一個參數，這是一個DOM Node對象。例如，在以下HTML中給定2個現有節點：<div id ='foo'> foo div> <div id ='bar'> bar div>我們可以將ID為bar的元素作為子元素附加到ID為bar的元素，如下所示：const foo = document.querySelector('＃foo'); const bar = document.querySelector('＃bar');foo.appendChild(bar);一旦運行它，我們將獲得以下結構：<div id =“ foo”> foo <div id =“ bar”> ????bar div> div>我們還可以使用它來創建動態創建的元素。例如，如果我們具有以下HTML：<div id ='foo'> foo div>然后，我們可以編寫以下代碼，將一個新p元素附加到ID為foo的div上：const foo = document.querySelector('＃foo'); const bar = document.createElement('p'); bar.textContent ='bar';foo.appendChild(bar);在上面的代碼中，我們用來createElement創建一個新p元素。然后，我們設置textContent屬性以在p元素內添加文本。最后，我們可以appendChild在foo與bar作為參數，以連接bar為一體的兒童foo。

cloneNode

該cloneNode方法將克隆Node對象，并克隆其所有內容。默認情況下，它不會克隆Node的所有內容。它帶有一個參數，這是一個可選參數，指示它是否為深度克隆，這意味著將克隆所有內容。true意味著做一個深克隆，false否則。例如，給定以下HTML： foo div>我們可以編寫以下JavaScript代碼來克隆div，然后將其body作為最后一個子元素附加到元素：const fooDiv = document.querySelector('div'); const fooClone = fooDiv.cloneNode(true); document.body.appendChild(fooClone);我們傳遞true給該cloneNode方法以克隆所有內容。然后我們調用appendChild上document.body與作為參數，將其添加為孩子通過克隆的對象body。

compareDocumentPosition

該compareDocumentPosition方法將給定節點的位置與任何文檔中的另一個節點進行比較。它以DOM Node對象為參數。它返回具有以下可能值的位掩碼

DOCUMENT_POSITION_DISCONNECTED?— 1

DOCUMENT_POSITION_PRECEDING?— 2

DOCUMENT_POSITION_FOLLOWING?— 4

DOCUMENT_POSITION_CONTAINS?— 8

DOCUMENT_POSITION_CONTAINED_BY?— 16

DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC?— 32

例如，給定以下HTML：<div id ='foo'> foo div> <div id ='bar'> bar div>我們可以編寫以下JavaScript來比較ID為foo的div和ID為bar的div的位置：const foo = document.querySelector('＃foo'); const bar = document.querySelector('＃bar');const relativePos = foo.compareDocumentPosition(bar); console.log(relativePos);上面的代碼應該為4 relativePos，這意味著ID為bar的元素緊隨ID為foo的元素。

包含

該contains方法檢查DOM節點是否在給定節點內。它帶有一個參數，這是一個Node對象，我們要檢查它是否在調用此方法的對象內。它返回true參數中的節點是否在被調用的節點之內，false否則返回。例如，給定以下HTML：<div id ='foo'> foo div><div id ='bar'> bar div>然后，我們可以編寫以下JavaScript來檢查ID為bar的div是否在ID為foo的div內：const foo = document.querySelector('＃foo');const bar = document.querySelector('＃bar');const fooContainsBar = foo.contains(bar);console.log(fooContainsBar);當然，fooContainsBar應該是false，因為ID為foo的div不在ID為bar的div內。另一方面，如果我們使用以下HTML代替：<div id ='foo'> foo <div id ='bar'> bar div> div>然后使用與第一個示例相同的JavaScript代碼，因為ID為foo的div fooContainsBar應該為true位于ID為bar的div內。

getRootNode

該getRootNode方法返回Node對象的根，如果有的話，可以選擇包括影子根。它使用帶有以下屬性的對象的可選參數：

composed—一個布爾值，指示應該包括影子根。默認為false

它返回Node，該Node返回一個元素，該元素是給定Node的根，否則將為shadow DOM中的元素返回shadow root。例如，如果我們具有以下HTML：<div id ='foo'> foo div>然后我們可以getRootNode如下調用該方法：const foo = document.querySelector('＃foo');const root = foo.getRootNode();console.log(root);我們應該將HTML文檔作為根節點，因為它不在影子DOM中。該根將是Web組件的影子根。例如，如果我們具有以下Web組件：customElements.define('custom-p', class extends HTMLElement { constructor() { super(); const pElem = document.createElement('p'); pElem.id = 'p-element'; pElem.textContent = 'shadow p' const shadowRoot = this.attachShadow({ mode: 'open' }); shadowRoot.appendChild(pElem); } });并且我們在HTML代碼中添加了Web組件： custom-p>然后，我們可以p-element通過編寫以下內容獲取具有ID的元素的根節點：const pElement = document.querySelector('custom-p')。shadowRoot.querySelector('＃p-element');const rootNode = pElement.getRootNode();console.log(rootNode);首先，我們獲得custom元素，然后獲得該shadowRoot屬性，該屬性使我們能夠訪問custom-pWeb組件的影子DOM 。然后我們可以獲得pID p-element為影子根的元素。在那之后，我們通過調用得到它的根節點getRootNode上pElement表示p與ID元素p-element。本console.log應該得到我們的Web組件的影子根。

結論

使用這些DOM遍歷方法，我們可以設置節點，但我們希望將其用于簡單情況。另外，還有一些方法可以檢查一個元素是否是另一個元素的子元素，并可以獲取給定元素的根節點。

總結

以上是生活随笔為你收集整理的javascript同级遍历_有用的DOM遍历方法，你需要了解一下的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。