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

您可能感兴趣的文章:

关于Promise基本方法的简单实现
Promise大家一定都不陌生了,JavaScript异步流程从最初的Callback,到Promise,到Generator,再到目前使用最多的Async/Await,下面这篇文章主要给大家介绍了关于Promise基本方法的简单实现,需要的朋友可以参考下
2022-02-02
JS解决回调地狱为什么需要Promise来优化异步编程
这篇文章主要为大家介绍了JS解决回调地狱为什么需要Promise来优化异步编程原理解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-10-10
原生JavaScript编写俄罗斯方块
本文给大家分享的是使用原生javascript实现的俄罗斯方块的代码，还没有很完善，这里放出来，算是抛砖引玉吧，希望小伙伴们能够喜欢。
2015-03-03
js判断浏览器类型,版本的代码(附多个实例代码)
当前世界上有很多种浏览器，除了我们熟知的IE, Firefox, Opera, Safari四大浏览器之外，世界上还有近百种浏览器，有时候我们需要判断浏览器与版本方便后续的操作，一句话浏览器的兼容性太差了，缺少标准
2014-05-05
javascript之对系统的toFixed()方法的修正
javascript之对系统的toFixed()方法的修正...
2007-05-05
JavaScript 拖拉缩放效果
拖拉缩放效果，实现通过鼠标拖动来调整层的面积（宽高）大小。例如选框效果。
2008-12-12
js分页显示div的内容
对于div内容过高的情况，我们可以用js控制div分页
2008-07-07
Async Validator 异步验证使用说明
async-validator 是一个异步验证的库，需要传入要验证的数据和验证规则 ,下面通过本文给大家介绍Async Validator 异步验证使用说明，需要的的朋友参考下吧
2017-07-07
借用Google的Javascript API Loader来加速你的网站
加速页面加载速度有一个方法就是把CSS和JS文件放到另外一个单独的服务器上，这样在访问量比较大的情况下可以分担主服务器的压力
2009-01-01
微信小程序支付功能完整流程记录(前端)
微信小程序的商户系统一般是以接口的形式开发的,小程序通过调用与后端约定好的接口进行参数的传递以及数据的接收,下面这篇文章主要给大家介绍了关于微信小程序支付功能(前端)的相关资料,需要的朋友可以参考下
2023-02-02