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

appendChild

這些appendChild方法使我們可以將子節(jié)點附加到給定的HTML元素上，作為當前節(jié)點的最后一個子節(jié)點。如果參數(shù)引用了DOM樹上的現(xiàn)有節(jié)點，則該節(jié)點將從其當前位置脫離并附加到其新位置。它使用一個參數(shù)，這是一個DOM Node對象。例如，在以下HTML中給定2個現(xiàn)有節(jié)點：<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);一旦運行它，我們將獲得以下結(jié)構(gòu)：<div id =“ foo”> foo <div id =“ bar”> ????bar div> div>我們還可以使用它來創(chuàng)建動態(tài)創(chuàng)建的元素。例如，如果我們具有以下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創(chuàng)建一個新p元素。然后，我們設(shè)置textContent屬性以在p元素內(nèi)添加文本。最后，我們可以appendChild在foo與bar作為參數(shù)，以連接bar為一體的兒童foo。

cloneNode

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

compareDocumentPosition

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

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);上面的代碼應(yīng)該為4 relativePos，這意味著ID為bar的元素緊隨ID為foo的元素。

包含

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

getRootNode

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

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

它返回Node，該Node返回一個元素，該元素是給定Node的根，否則將為shadow DOM中的元素返回shadow root。例如，如果我們具有以下HTML：<div id ='foo'> foo div>然后我們可以getRootNode如下調(diào)用該方法：const foo = document.querySelector('＃foo');const root = foo.getRootNode();console.log(root);我們應(yīng)該將HTML文檔作為根節(jié)點，因為它不在影子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通過編寫以下內(nèi)容獲取具有ID的元素的根節(jié)點：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為影子根的元素。在那之后，我們通過調(diào)用得到它的根節(jié)點getRootNode上pElement表示p與ID元素p-element。本console.log應(yīng)該得到我們的Web組件的影子根。

結(jié)論

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。