介紹

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2.1. 父節(jié)點(diǎn)

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

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

2.2. 子節(jié)點(diǎn)

• firstChild & lastChild：分別返回節(jié)點(diǎn)的第一個(gè)和最后一個(gè)子節(jié)點(diǎn)。

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

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

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

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

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

2.3. 兄弟節(jié)點(diǎn)

• nextSibling & previousSibling：分別返回元素的下一個(gè)和上一個(gè)同級元素。

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

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

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

3. 遍歷方法

3.1. 節(jié)點(diǎn)迭代

• childNodes：返回子節(jié)點(diǎn)的 NodeList。

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

3.2. 過濾元素

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

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. 遞歸遍歷

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

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)文章！

最新評論