JavaScript 中的 DOM 遍历🔥

介绍

文档对象模型 (DOM) 表示 HTML 文档的结构。导航或“遍历”此结构是 Web 开发的基本方面，使开发人员能够在网页上选择、修改、删除或添加内容。这本综合指南深入研究了使用 JavaScript 进行 DOM 遍历的艺术，提供了一个强大的工具包来处理各种遍历场景。

1. DOM基础选择器

让我们回顾一下一些基本的 DOM 选择器。

• getElementById()：返回对具有指定 ID 的第一个元素的引用。

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

• getElementsByClassName()：返回具有给定类名的元素的实时 HTMLCollection。

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

• getElementsByTagName()：返回具有给定标签名称的元素的实时 HTMLCollection。

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

• querySelector()：返回与指定 CSS 选择器匹配的第一个元素。

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

• querySelectorAll()：返回一个静态 NodeList，表示与指定 CSS 选择器匹配的元素。

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

2. 父母、子女和兄弟姐妹的关系

DOM 遍历的核心是节点之间的关系。

2.1. 父节点

• ParentNode：返回指定元素的父节点。

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

2.2. 子节点

• firstChild & lastChild：分别返回节点的第一个和最后一个子节点。

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

• Children：返回元素子元素的 HTMLCollection（不包括文本和注释节点）。

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

• firstElementChild和lastElementChild是类似于firstChild和lastChild的DOM属性，但严格返回元素节点。

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

2.3. 兄弟节点

• nextSibling & previousSibling：分别返回元素的下一个和上一个同级元素。

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

• nextElementSibling和previousElementSibling是与nextSibling和previousSibling类似的DOM属性，但严格用于元素节点。

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

3. 遍历方法

3.1. 节点迭代

• childNodes：返回子节点的 NodeList。

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

3.2. 过滤元素

用于Array.prototype.filter根据条件过滤节点。

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

4. DOM 遍历事件

将事件侦听器与遍历方法相结合来创建交互式元素。

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

5. 高级遍历技术

5.1. 递归遍历

递归遍历整个 DOM 树。当深度未知时，此方法很有用：

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 遍历对于任何全栈或前端开发人员来说都是至关重要的。JavaScript 提供了大量的方法和属性来导航 DOM 的复杂关系。