果您在 JavaScript 中使用過 DOM，您可能已經(jīng)注意到有多種方法可以訪問同一個元素（nextSibling、nextElementSibling）這真的很令人困惑，它們之間的區(qū)別并不明顯，很難決定該用哪個。 在本文中，我將解釋一下節(jié)點和元素之間的區(qū)別。

元素vs結(jié)點(Elements vs Nodes)

在這兩者中，元素(Element)是最容易理解的，因為它們只是 HTML 元素，例如 div、span 或 body 標簽。通常，當您使用 DOM 時，您將使用元素，因為您通常希望與 HTML 元素進行交互。

結(jié)點(Nodes)是元素的更通用版本。節(jié)點可以是 HTML 元素，但也可以是 HTML 文檔中的任何其他內(nèi)容，例如文本或注釋。這使得節(jié)點更難使用，因為在使用 DOM 時，您通常不關(guān)心文本節(jié)點或注釋節(jié)點之類的東西，而只關(guān)心元素節(jié)點。由于這個原因，我通常避免使用結(jié)點。下面是所有重要結(jié)點類型的列表。

• 元素結(jié)點 (Element Node)
• 文本結(jié)點 (Text Node)
• CData 結(jié)點 (CData Section Node)
• 處理指令結(jié)點 (Processing Instruction Node)
• 注釋結(jié)點 (Comment Node)
• 文檔結(jié)點 (Document Node)
• 文檔類型結(jié)點 (Document Type Node)
• 文檔段結(jié)點 (Document Fragment Node)

當你在 DOM 中導航時，總是更喜歡選擇元素而不是結(jié)點的方法。通常這些方法中包含單詞元素，或者選擇結(jié)點的版本中會包含單詞結(jié)點，以便您區(qū)分它們。

HTMLCollection vs NodeList

在遍歷 DOM 時，有時會返回一組元素/結(jié)點（querySelector、children）。這將是 HTML Collection 或 NodeList。

HTMLCollection 很容易理解，因為它只能包含元素。 getElementsByClassName 和 children 等方法返回一個 HTMLCollection。這些集合與數(shù)組非常相似，因此您甚至可能沒有意識到您正在使用 HTMLCollection，但 HTMLCollections 缺少數(shù)組所具有的所有高階函數(shù)。諸如 forEach、map 和 reduce 之類的東西在 HTMLCollection 上不可用。此外，HTMLCollections 正在實時更新。這意味著如果你有一個包含所有元素的 HTMLCollection，并且你將一個新元素添加到具有該類的 DOM 中，它將自動添加到剛才已經(jīng)存在的HTMLCollection。老實說，處理起來有點痛苦，因為它可能會導致意想不到的錯誤。

另一方面，NodeList 可以包含任何類型的結(jié)點，包括元素。 NodeList 也類似于數(shù)組，但它們同樣缺少大多數(shù)高階函數(shù)。 NodeList 上唯一的高階函數(shù)是 forEach 函數(shù)。返回 NodeLists 的一些方法示例是 querySelectorAll 和 childNodes。 NodeLists 也類似于 HTMLCollections 實時更新，但僅在某些情況下。例如，querySelectorAll 不是實時更新列表，但 childNodes 是實時更新。一般來說，我會盡量避免使用 NodeList，因為它們可以包含非 HTML 元素。

下面是實時更新的示例：

開始的HTML結(jié)構(gòu)如下：

JavaScript如下：

我們可以看到，getElementsByClassName返回的是HTMLCollection, 第一次children有兩個元素，然后我們又新增了一個節(jié)點，發(fā)現(xiàn)第二次顯示之前children的HTMLCollection也自動更新了，它現(xiàn)在包含三個元素。

下面我們就改一行上面的代碼，用querySelectorAll替換getElementsByClassName，然后你會發(fā)現(xiàn)，兩次顯示的children(NodeList)在更新前后沒有任何變化。

言

在Web開發(fā)領(lǐng)域，JavaScript（簡稱JS）作為一門強大的客戶端腳本語言，其重要性不言而喻。JS賦予了網(wǎng)頁生命，使其能夠響應用戶的操作，實現(xiàn)動態(tài)內(nèi)容的加載和展示。而這一切的核心，離不開文檔對象模型（DOM）的節(jié)點操作。本文旨在探索JS與DOM節(jié)點操作的奧秘，通過實踐示例和理論解析，幫助你掌握這一前端開發(fā)的必備技能。

技術(shù)概述

DOM簡介

DOM是一種標準，用于表示和修改HTML或XML文檔的結(jié)構(gòu)。它將文檔解析成樹狀結(jié)構(gòu)，每個節(jié)點代表一個元素或?qū)傩裕试SJS通過編程方式訪問和修改這些節(jié)點。

核心特性與優(yōu)勢

• 動態(tài)性：JS可以實時修改DOM，響應用戶事件，如點擊、輸入等。
• 選擇器：提供靈活的節(jié)點選擇方式，如getElementById, getElementsByClassName, querySelector等。
• 節(jié)點操作：添加、刪除、移動和修改節(jié)點及其屬性，使得頁面內(nèi)容的動態(tài)更新變得簡單。

示例代碼

// 創(chuàng)建一個新的列表項
const li = document.createElement('li');
li.textContent = 'New Item';
document.querySelector('ul').appendChild(li);

技術(shù)細節(jié)

工作原理

當JS執(zhí)行DOM操作時，它會查找、創(chuàng)建、修改或刪除DOM樹中的節(jié)點。這種操作會觸發(fā)瀏覽器重新計算頁面的布局和樣式，即重排（reflow）和重繪（repaint）。

難點分析

• 性能問題：頻繁的DOM操作可能導致頁面性能下降，特別是在大型應用中。
• 選擇器效率：某些選擇器比其他的選擇器更耗時，如getElementsByTagName。

實戰(zhàn)應用

場景描述

假設我們需要一個簡單的計數(shù)器組件，每當用戶點擊按鈕時，頁面上顯示的計數(shù)就會增加。

代碼示例

let count = 0;
const counter = document.getElementById('counter');
const incrementBtn = document.getElementById('increment');

incrementBtn.addEventListener('click', () => {
  count++;
  counter.textContent = count;
});

優(yōu)化與改進

性能瓶頸

• 減少DOM操作：盡量減少直接的DOM操作次數(shù)，比如使用字符串拼接后一次性更新。
• 虛擬DOM：借鑒React等框架的虛擬DOM技術(shù)，先在內(nèi)存中操作，最后批量更新真實DOM。

代碼示例

let fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  const div = document.createElement('div');
  div.textContent = 'Item ' + i;
  fragment.appendChild(div);
}
document.body.appendChild(fragment);

常見問題

• Q: 如何高效地遍歷DOM節(jié)點？
• A: 使用NodeList.forEach或轉(zhuǎn)換為數(shù)組后再使用Array.prototype.forEach。

總結(jié)與展望

DOM節(jié)點操作是前端開發(fā)中不可或缺的一部分，它讓JS能夠直接與網(wǎng)頁內(nèi)容進行交互，實現(xiàn)復雜的動態(tài)功能。然而，為了保證良好的用戶體驗，開發(fā)者需要關(guān)注DOM操作的性能和效率，采取適當?shù)膬?yōu)化策略。隨著Web技術(shù)的發(fā)展，未來的DOM操作將更加高效、智能，為Web應用帶來無限可能。

希望本文能夠為你在前端開發(fā)旅程中提供堅實的理論基礎和實用的操作技巧，讓我們一起期待JS與DOM在未來的表現(xiàn)，繼續(xù)探索和創(chuàng)新，推動Web開發(fā)向前發(fā)展。

一個HTML文檔都會被瀏覽器解析轉(zhuǎn)化出一個Dom樹,Dom樹中的每一項根據(jù)DOM模型解析為樹形結(jié)構(gòu)中一個個的節(jié)點,程序員就可以通過JavaScript語言動態(tài)操作每一個節(jié)點,此節(jié)主要了解掌握一些有關(guān)節(jié)點的知識和使用方法

之前說過使用document的方法可以快速獲取元素節(jié)點如下:

1 快速獲取HTML中的節(jié)點(主要是元素節(jié)點)

1.1 document.getElementById()根據(jù)元素的Id獲得指定對象

1.2 document.getElementsByName()根據(jù)元素的name屬性獲得對象

1.3 document.getElementsByTagName()根據(jù)指定的標簽名稱獲得其元素數(shù)組

1.4 document.getElementsByClassName()獲取所有指定類名的元素數(shù)組

具體的使用方式在240章節(jié)的快速獲取頁面元素里面已經(jīng)說過不再贅述

在一個HTML網(wǎng)頁的Dom樹中會有很多的節(jié)點,當操作具體的節(jié)點時,可以通過節(jié)點屬性的方式快速便捷獲取指定節(jié)點進行增刪改查等操作

2 通過節(jié)點的屬性獲取相關(guān)的節(jié)點

通過此方法獲取的節(jié)點不一定是元素節(jié)點,還有其他類型的節(jié)點,比如空文本節(jié)點

2.1 獲取當前節(jié)點的父節(jié)點 parentNode

每一個節(jié)點都有一個parentNode屬性用于獲取當前節(jié)點(多為獲取當前元素節(jié)點)的父節(jié)點,如果不存在，則返回null

獲取當前節(jié)點的父節(jié)點方式為:當前節(jié)點.parentNode;如果想獲取其"爺爺"輩的節(jié)點只能在其后面再加個點parentNode,再往上再加以此類推

通過document.getElementById("UList").parentNode 的方法獲取到列表的父節(jié)點為body元素節(jié)點

2.2 獲取當前節(jié)點的子級節(jié)點 childNodes

獲取當前節(jié)點的子級節(jié)點,childNodes只獲取當前節(jié)點的第一層子節(jié)點,是一個只讀的數(shù)組NodeList對象即節(jié)點對象的數(shù)組,可以通過循環(huán)遍歷其子節(jié)點

獲取方式 當前節(jié)點.childNodes 注意:獲取的節(jié)點中會有空文本節(jié)點

以下幾種方式獲取的節(jié)點有可能是空文本節(jié)點

2.3firstChild與lastChild

獲取當前節(jié)點子級節(jié)點的第一個(childNodes[0])或最后一個的節(jié)點(childNodes[length-1])

2.4 nextSibling

· 獲取當前節(jié)點的下一個兄弟節(jié)點

2.5 previousSibling

獲取當前節(jié)點的上一個兄弟節(jié)點