快捷導(dǎo)航

JavaScript中的DOM遍歷詳解

更新時間：2023年09月24日 15:06:48 作者：托兒所夜十三

文檔對象模型 (DOM) 表示 HTML 文檔的結(jié)構(gòu),導(dǎo)航或“遍歷”此結(jié)構(gòu)是 Web 開發(fā)的基本方面,使開發(fā)人員能夠在網(wǎng)頁上選擇、修改、刪除或添加內(nèi)容,本文深入研究了使用 JavaScript 進行 DOM 遍歷的藝術(shù),提供了一個強大的工具包來處理各種遍歷場景

介紹

文檔對象模型 (DOM) 表示 HTML 文檔的結(jié)構(gòu)。導(dǎo)航或“遍歷”此結(jié)構(gòu)是 Web 開發(fā)的基本方面，使開發(fā)人員能夠在網(wǎng)頁上選擇、修改、刪除或添加內(nèi)容。這本綜合指南深入研究了使用 JavaScript 進行 DOM 遍歷的藝術(shù)，提供了一個強大的工具包來處理各種遍歷場景。

1. DOM基礎(chǔ)選擇器

讓我們回顧一下一些基本的 DOM 選擇器。

getElementById()：返回對具有指定 ID 的第一個元素的引用。

const header = document.getElementById('header');

getElementsByClassName()：返回具有給定類名的元素的實時 HTMLCollection。

const buttons = document.getElementsByClassName('btn');

getElementsByTagName()：返回具有給定標(biāo)簽名稱的元素的實時 HTMLCollection。

const paragraphs = document.getElementsByTagName('p');

querySelector()：返回與指定 CSS 選擇器匹配的第一個元素。

const mainImage = document.querySelector('.main-image');

querySelectorAll()：返回一個靜態(tài) NodeList，表示與指定 CSS 選擇器匹配的元素。

const listItems = document.querySelectorAll('ul li');

2. 父母、子女和兄弟姐妹的關(guān)系

DOM 遍歷的核心是節(jié)點之間的關(guān)系。

2.1. 父節(jié)點

ParentNode：返回指定元素的父節(jié)點。

const parentOfButton = document.querySelector('.btn').parentNode;

2.2. 子節(jié)點

firstChild & lastChild：分別返回節(jié)點的第一個和最后一個子節(jié)點。

const firstChildOfDiv = document.querySelector('div').firstChild;
const lastChildOfDiv = document.querySelector('div').lastChild;

Children：返回元素子元素的 HTMLCollection（不包括文本和注釋節(jié)點）。

const divChildren = document.querySelector('div').children;

firstElementChild和lastElementChild是類似于firstChild和lastChild的DOM屬性，但嚴(yán)格返回元素節(jié)點。

const firstElementChildOfDiv = document.querySelector('div').firstElementChild;

2.3. 兄弟節(jié)點

nextSibling & previousSibling：分別返回元素的下一個和上一個同級元素。

const nextToButton = document.querySelector('.btn').nextSibling;
const prevToButton = document.querySelector('.btn').previousSibling;

nextElementSibling和previousElementSibling是與nextSibling和previousSibling類似的DOM屬性，但嚴(yán)格用于元素節(jié)點。

const nextElementToButton = document.querySelector('.btn').nextElementSibling;

3. 遍歷方法

3.1. 節(jié)點迭代

childNodes：返回子節(jié)點的 NodeList。

const listNodes = document.querySelector('ul').childNodes;

3.2. 過濾元素

用于Array.prototype.filter根據(jù)條件過濾節(jié)點。

const listItems = document.querySelector('ul').children;
const redItems = [...listItems].filter(item => item.style.color === 'red');

4. DOM 遍歷事件

將事件偵聽器與遍歷方法相結(jié)合來創(chuàng)建交互式元素。

document.querySelector('.btn').addEventListener('click', function(e) {
  const nextElement = e.target.nextElementSibling;
  if (nextElement) {
    nextElement.style.display = 'none';
  }
});

5. 高級遍歷技術(shù)

5.1. 遞歸遍歷

遞歸遍歷整個 DOM 樹。當(dāng)深度未知時，此方法很有用：

function traverseDOM(node) {
  console.log(node);
  const children = node.children;
  for (let child of children) {
    traverseDOM(child);
  }
}
traverseDOM(document.body);

5.2. 向上遍歷DOM樹

在某些情況下，可能需要查找具有特定選擇器的父元素：

function findAncestor(el, selector) {
  while ((el = el.parentElement) && !el.matches(selector));
  return el;
}
const listItem = document.querySelector('li');
const containingDiv = findAncestor(listItem, 'div');

掌握 DOM 遍歷對于任何全棧或前端開發(fā)人員來說都是至關(guān)重要的。JavaScript 提供了大量的方法和屬性來導(dǎo)航 DOM 的復(fù)雜關(guān)系。

以上就是JavaScript中的DOM遍歷詳解的詳細(xì)內(nèi)容，更多關(guān)于JavaScript DOM遍歷的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

原生js開發(fā)的日歷插件
本文主要分享了原生js開發(fā)的日歷插件的示例代碼。具有很好的參考價值，下面跟著小編一起來看下吧
2017-02-02
Js注冊協(xié)議倒計時的小例子
Js注冊協(xié)議倒計時的小例子，需要的朋友可以參考一下
2013-06-06
JavaScript中播放音頻文件的幾種常用方法
JS可以用來播放多種聲音文件,包括常見的mp3、wav等格式,這篇文章主要給大家介紹了關(guān)于JavaScript中播放音頻文件的幾種常用方法,需要的朋友可以參考下
2023-10-10
javascript針對cookie的基本操作實例詳解
這篇文章主要介紹了javascript針對cookie的基本操作,結(jié)合實例形式較為詳細(xì)的分析了JavaScript操作cookie的基本技巧,并給出了一個JavaScript操作cookie的完整類,具有一定參考借鑒價值,需要的朋友可以參考下
2015-11-11
這篇文章主要介紹了微信小程序如何利用getCurrentPages進行頁面?zhèn)髦?文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2019-07-07