整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
果您在 JavaScript 中使用過(guò) DOM，您可能已經(jīng)注意到有多種方法可以訪問(wèn)同一個(gè)元素（nextSibling、nextElementSibling）這真的很令人困惑，它們之間的區(qū)別并不明顯，很難決定該用哪個(gè)。 在本文中，我將解釋一下節(jié)點(diǎn)和元素之間的區(qū)別。
元素vs結(jié)點(diǎn)(Elements vs Nodes)
在這兩者中，元素(Element)是最容易理解的，因?yàn)樗鼈冎皇?HTML 元素，例如 div、span 或 body 標(biāo)簽。通常，當(dāng)您使用 DOM 時(shí)，您將使用元素，因?yàn)槟ǔＯＭc HTML 元素進(jìn)行交互。
結(jié)點(diǎn)(Nodes)是元素的更通用版本。節(jié)點(diǎn)可以是 HTML 元素，但也可以是 HTML 文檔中的任何其他內(nèi)容，例如文本或注釋。這使得節(jié)點(diǎn)更難使用，因?yàn)樵谑褂?DOM 時(shí)，您通常不關(guān)心文本節(jié)點(diǎn)或注釋節(jié)點(diǎn)之類(lèi)的東西，而只關(guān)心元素節(jié)點(diǎn)。由于這個(gè)原因，我通常避免使用結(jié)點(diǎn)。下面是所有重要結(jié)點(diǎn)類(lèi)型的列表。
當(dāng)你在 DOM 中導(dǎo)航時(shí)，總是更喜歡選擇元素而不是結(jié)點(diǎn)的方法。通常這些方法中包含單詞元素，或者選擇結(jié)點(diǎn)的版本中會(huì)包含單詞結(jié)點(diǎn)，以便您區(qū)分它們。
HTMLCollection vs NodeList
在遍歷 DOM 時(shí)，有時(shí)會(huì)返回一組元素/結(jié)點(diǎn)（querySelector、children）。這將是 HTML Collection 或 NodeList。
HTMLCollection 很容易理解，因?yàn)樗荒馨亍?getElementsByClassName 和 children 等方法返回一個(gè) HTMLCollection。這些集合與數(shù)組非常相似，因此您甚至可能沒(méi)有意識(shí)到您正在使用 HTMLCollection，但 HTMLCollections 缺少數(shù)組所具有的所有高階函數(shù)。諸如 forEach、map 和 reduce 之類(lèi)的東西在 HTMLCollection 上不可用。此外，HTMLCollections 正在實(shí)時(shí)更新。這意味著如果你有一個(gè)包含所有元素的 HTMLCollection，并且你將一個(gè)新元素添加到具有該類(lèi)的 DOM 中，它將自動(dòng)添加到剛才已經(jīng)存在的HTMLCollection。老實(shí)說(shuō)，處理起來(lái)有點(diǎn)痛苦，因?yàn)樗赡軙?huì)導(dǎo)致意想不到的錯(cuò)誤。
另一方面，NodeList 可以包含任何類(lèi)型的結(jié)點(diǎn)，包括元素。 NodeList 也類(lèi)似于數(shù)組，但它們同樣缺少大多數(shù)高階函數(shù)。 NodeList 上唯一的高階函數(shù)是 forEach 函數(shù)。返回 NodeLists 的一些方法示例是 querySelectorAll 和 childNodes。 NodeLists 也類(lèi)似于 HTMLCollections 實(shí)時(shí)更新，但僅在某些情況下。例如，querySelectorAll 不是實(shí)時(shí)更新列表，但 childNodes 是實(shí)時(shí)更新。一般來(lái)說(shuō)，我會(huì)盡量避免使用 NodeList，因?yàn)樗鼈兛梢园?HTML 元素。
下面是實(shí)時(shí)更新的示例：
開(kāi)始的HTML結(jié)構(gòu)如下：
JavaScript如下：
我們可以看到，getElementsByClassName返回的是HTMLCollection, 第一次children有兩個(gè)元素，然后我們又新增了一個(gè)節(jié)點(diǎn)，發(fā)現(xiàn)第二次顯示之前children的HTMLCollection也自動(dòng)更新了，它現(xiàn)在包含三個(gè)元素。
下面我們就改一行上面的代碼，用querySelectorAll替換getElementsByClassName，然后你會(huì)發(fā)現(xiàn)，兩次顯示的children(NodeList)在更新前后沒(méi)有任何變化。
在Web開(kāi)發(fā)領(lǐng)域，JavaScript（簡(jiǎn)稱(chēng)JS）作為一門(mén)強(qiáng)大的客戶端腳本語(yǔ)言，其重要性不言而喻。JS賦予了網(wǎng)頁(yè)生命，使其能夠響應(yīng)用戶的操作，實(shí)現(xiàn)動(dòng)態(tài)內(nèi)容的加載和展示。而這一切的核心，離不開(kāi)文檔對(duì)象模型（DOM）的節(jié)點(diǎn)操作。本文旨在探索JS與DOM節(jié)點(diǎn)操作的奧秘，通過(guò)實(shí)踐示例和理論解析，幫助你掌握這一前端開(kāi)發(fā)的必備技能。
DOM是一種標(biāo)準(zhǔn)，用于表示和修改HTML或XML文檔的結(jié)構(gòu)。它將文檔解析成樹(shù)狀結(jié)構(gòu)，每個(gè)節(jié)點(diǎn)代表一個(gè)元素或?qū)傩?，允許JS通過(guò)編程方式訪問(wèn)和修改這些節(jié)點(diǎn)。
// 創(chuàng)建一個(gè)新的列表項(xiàng)
const li = document.createElement('li');
li.textContent = 'New Item';
document.querySelector('ul').appendChild(li);
當(dāng)JS執(zhí)行DOM操作時(shí)，它會(huì)查找、創(chuàng)建、修改或刪除DOM樹(shù)中的節(jié)點(diǎn)。這種操作會(huì)觸發(fā)瀏覽器重新計(jì)算頁(yè)面的布局和樣式，即重排（reflow）和重繪（repaint）。
假設(shè)我們需要一個(gè)簡(jiǎn)單的計(jì)數(shù)器組件，每當(dāng)用戶點(diǎn)擊按鈕時(shí)，頁(yè)面上顯示的計(jì)數(shù)就會(huì)增加。
let count = 0;
const counter = document.getElementById('counter');
const incrementBtn = document.getElementById('increment');
incrementBtn.addEventListener('click', () => {
count++;
counter.textContent = count;
});
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);
DOM節(jié)點(diǎn)操作是前端開(kāi)發(fā)中不可或缺的一部分，它讓JS能夠直接與網(wǎng)頁(yè)內(nèi)容進(jìn)行交互，實(shí)現(xiàn)復(fù)雜的動(dòng)態(tài)功能。然而，為了保證良好的用戶體驗(yàn)，開(kāi)發(fā)者需要關(guān)注DOM操作的性能和效率，采取適當(dāng)?shù)膬?yōu)化策略。隨著Web技術(shù)的發(fā)展，未來(lái)的DOM操作將更加高效、智能，為Web應(yīng)用帶來(lái)無(wú)限可能。
希望本文能夠?yàn)槟阍谇岸碎_(kāi)發(fā)旅程中提供堅(jiān)實(shí)的理論基礎(chǔ)和實(shí)用的操作技巧，讓我們一起期待JS與DOM在未來(lái)的表現(xiàn)，繼續(xù)探索和創(chuàng)新，推動(dòng)Web開(kāi)發(fā)向前發(fā)展。
一個(gè)HTML文檔都會(huì)被瀏覽器解析轉(zhuǎn)化出一個(gè)Dom樹(shù),Dom樹(shù)中的每一項(xiàng)根據(jù)DOM模型解析為樹(shù)形結(jié)構(gòu)中一個(gè)個(gè)的節(jié)點(diǎn),程序員就可以通過(guò)JavaScript語(yǔ)言動(dòng)態(tài)操作每一個(gè)節(jié)點(diǎn),此節(jié)主要了解掌握一些有關(guān)節(jié)點(diǎn)的知識(shí)和使用方法
之前說(shuō)過(guò)使用document的方法可以快速獲取元素節(jié)點(diǎn)如下:
1 快速獲取HTML中的節(jié)點(diǎn)(主要是元素節(jié)點(diǎn))
1.1 document.getElementById()根據(jù)元素的Id獲得指定對(duì)象
1.2 document.getElementsByName()根據(jù)元素的name屬性獲得對(duì)象
1.3 document.getElementsByTagName()根據(jù)指定的標(biāo)簽名稱(chēng)獲得其元素?cái)?shù)組
1.4 document.getElementsByClassName()獲取所有指定類(lèi)名的元素?cái)?shù)組
具體的使用方式在240章節(jié)的快速獲取頁(yè)面元素里面已經(jīng)說(shuō)過(guò)不再贅述
在一個(gè)HTML網(wǎng)頁(yè)的Dom樹(shù)中會(huì)有很多的節(jié)點(diǎn),當(dāng)操作具體的節(jié)點(diǎn)時(shí),可以通過(guò)節(jié)點(diǎn)屬性的方式快速便捷獲取指定節(jié)點(diǎn)進(jìn)行增刪改查等操作
2 通過(guò)節(jié)點(diǎn)的屬性獲取相關(guān)的節(jié)點(diǎn)
通過(guò)此方法獲取的節(jié)點(diǎn)不一定是元素節(jié)點(diǎn),還有其他類(lèi)型的節(jié)點(diǎn),比如空文本節(jié)點(diǎn)
2.1 獲取當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn) parentNode
每一個(gè)節(jié)點(diǎn)都有一個(gè)parentNode屬性用于獲取當(dāng)前節(jié)點(diǎn)(多為獲取當(dāng)前元素節(jié)點(diǎn))的父節(jié)點(diǎn),如果不存在，則返回null
獲取當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)方式為:當(dāng)前節(jié)點(diǎn).parentNode;如果想獲取其"爺爺"輩的節(jié)點(diǎn)只能在其后面再加個(gè)點(diǎn)parentNode,再往上再加以此類(lèi)推
獲取父節(jié)點(diǎn)
通過(guò)document.getElementById("UList").parentNode 的方法獲取到列表的父節(jié)點(diǎn)為body元素節(jié)點(diǎn)
2.2 獲取當(dāng)前節(jié)點(diǎn)的子級(jí)節(jié)點(diǎn) childNodes
獲取當(dāng)前節(jié)點(diǎn)的子級(jí)節(jié)點(diǎn),childNodes只獲取當(dāng)前節(jié)點(diǎn)的第一層子節(jié)點(diǎn),是一個(gè)只讀的數(shù)組NodeList對(duì)象即節(jié)點(diǎn)對(duì)象的數(shù)組,可以通過(guò)循環(huán)遍歷其子節(jié)點(diǎn)
獲取方式 當(dāng)前節(jié)點(diǎn).childNodes 注意:獲取的節(jié)點(diǎn)中會(huì)有空文本節(jié)點(diǎn)
獲取子級(jí)節(jié)點(diǎn)
通過(guò)IE瀏覽器可以查看其空文本節(jié)點(diǎn)
以下幾種方式獲取的節(jié)點(diǎn)有可能是空文本節(jié)點(diǎn)
2.3firstChild與lastChild
獲取當(dāng)前節(jié)點(diǎn)子級(jí)節(jié)點(diǎn)的第一個(gè)(childNodes[0])或最后一個(gè)的節(jié)點(diǎn)(childNodes[length-1])
獲取當(dāng)前節(jié)點(diǎn)下的首尾節(jié)點(diǎn)
2.4 nextSibling
· 獲取當(dāng)前節(jié)點(diǎn)的下一個(gè)兄弟節(jié)點(diǎn)
2.5 previousSibling
獲取當(dāng)前節(jié)點(diǎn)的上一個(gè)兄弟節(jié)點(diǎn)
獲取上下兄弟節(jié)點(diǎn)
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
