首页 > 网络编程 > JavaScript > javascript技巧 > JavaScript DOM遍历

JavaScript中的DOM遍历详解

2023-09-24 15:06:49 作者：托儿所夜十三

文档对象模型 (DOM) 表示 HTML 文档的结构,导航或“遍历”此结构是 Web 开发的基本方面,使开发人员能够在网页上选择、修改、删除或添加内容,本文深入研究了使用 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 的复杂关系。

以上就是JavaScript中的DOM遍历详解的详细内容，更多关于JavaScript DOM遍历的资料请关注脚本之家其它相关文章！