JavaScript中的DOM遍历详解

更新时间：2023年09月24日 15:06:48 作者：托儿所夜十三

文档对象模型 (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遍历的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

原生js开发的日历插件
本文主要分享了原生js开发的日历插件的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧
2017-02-02
Js注册协议倒计时的小例子
Js注册协议倒计时的小例子，需要的朋友可以参考一下
2013-06-06
JavaScript中播放音频文件的几种常用方法
JS可以用来播放多种声音文件,包括常见的mp3、wav等格式,这篇文章主要给大家介绍了关于JavaScript中播放音频文件的几种常用方法,需要的朋友可以参考下
2023-10-10
javascript针对cookie的基本操作实例详解
这篇文章主要介绍了javascript针对cookie的基本操作,结合实例形式较为详细的分析了JavaScript操作cookie的基本技巧,并给出了一个JavaScript操作cookie的完整类,具有一定参考借鉴价值,需要的朋友可以参考下
2015-11-11
微信小程序如何利用getCurrentPages进行页面传值
这篇文章主要介绍了微信小程序如何利用getCurrentPages进行页面传值,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-07-07
IE关闭时判断及AJAX注销案例学习
当关闭系统时会提示:你确定要退出系统吗？退出请按'离开此页'接下来将讲解下IE关闭判断及AJAX注销，感兴趣的你可不要错过了哈，希望本例对你学习ajax有所帮助
2013-02-02
关于document.cookie的使用javascript
构造通用的cookie处理函数 cookie的处理过程比较复杂，并具有一定的相似性。因此可以定义几个函数来完成cookie的通用操作，从而实现代码的复用。
2010-10-10
详解Js模板引擎（TrimPath）
本文详细介绍了在页面中引用template.js文件之后，具体的使用方法及实例，有需要的朋友可以参考下
2016-11-11
JavaScript各类型的关系图解
这篇文章主要通过一张图让你看懂JavaScript各类型的关系，需要的朋友可以参考下
2015-10-10
微信小程序集成前端日志库的详细记录
这篇文章主要给大家介绍了关于微信小程序集成前端日志库的详细记录,文中通过代码介绍的非常详细,对大家学习或者使用微信小程序具有一定的参考借鉴价值,需要的朋友可以参考下
2024-07-07