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

您可能感兴趣的文章:

JavaScript仿支付宝密码输入框
那么今天我就用JavaScript代码来实现这个效果吧，那么首先介绍一下整个的思路，首先我们先将确定输入密码的位数，我的需求是5位，那么就用一个div标签包住5个input标签
2015-12-12
JavaScript控制台的更多功能
这篇文章主要介绍了JavaScript控制台的更多功能，想了解控制台更多功能的同学，一定要看一下
2021-04-04
JavaScript实现图片本地预览功能【不用上传至服务器】
这篇文章主要介绍了JavaScript实现图片本地预览功能,针对非IE浏览器的HTML5滤镜功能及IE浏览器的相关组件功能实现不上传至服务器预览本地图片的效果,需要的朋友可以参考下
2017-09-09
js模拟C#中List的简单实例
本篇文章主要是对js模拟C#中List的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-03-03
JavaScript程序员应该知道的45个实用技巧
在这篇文章中，我将分享一组JavaScript的技巧、窍门和最佳实践，这些都是JavaScript程序员应该知晓的，不管他们是使用在浏览器/引擎上，还是服务器端（SSJS——Service Side JavaScript）JavaScript解释器上
2014-03-03
FF下zoom的替代方案单位em
css 属性zoom是ie私有属性在FF中（或者说仅实现CSS标准的其他浏览器中）无法使用，一直在网上搜索它的替代方案，但没有收获，后来听群里有朋友说em或可解决此问题，经过研究和测试，发现果然可以解决。
2008-08-08
JS实现仿苹果底部任务栏菜单效果代码
这篇文章主要介绍了JS实现仿苹果底部任务栏菜单效果代码,可实现鼠标滑过显示大图标功能,涉及javascript鼠标事件及页面元素遍历并修改属性的技巧,需要的朋友可以参考下
2015-08-08
非常漂亮的js烟花效果
这篇文章主要为大家详细介绍了js实现非常漂亮的烟花效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-03-03
JavaScript的Object.defineProperty详解
本篇文章给大家详细讲述了JavaScript的Object.defineProperty的相关知识点内容，有兴趣的朋友参考学习下。
2018-07-07
详解JavaScript实现JS弹窗的三种方式
这篇文章主要为大家介绍了JavaScript实现JS弹窗的三种方式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助<BR>
2022-01-01