JavaScript中的DOM Traversal-DEV365 开发者社区

介绍

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

我们在Accreditly's website：A guide to DOM traversal in JavaScript上完成了本文的更全面版本。

记住，如果您有兴趣展示您的JavaScript技能，请务必查看我们的JavaScript Fundamentals certification。

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（）：返回一个静态节点，代表与指定的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;

孩子：返回元素子元素的htmlcollection（不包括文本和评论节点）。

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

FirstElementChild和LastElementChild：类似于firstChild和lastChild，但严格返回元素节点。

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

2.3。兄弟节点

sextsibling＆preadsibling：分别返回元素的下一个和上一个兄弟姐妹。

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

NextElementsibling＆preationsElementsibling：类似于nextSibling和previousSibling，但严格用于元素节点。

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

3.遍历方法

3.1。节点迭代

儿童节点：返回一个儿童节点的结节。

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的复杂关系。