DOM遍历

DOM 遍历是指在 HTML 文档中导航和定位元素的过程。通过 DOM 遍历,您可以在文档中移动并查找特定的元素,以便对其进行操作或者检索信息。

寻找子元素

javascript 复制代码
//DOM遍历
const h1 = document.querySelector('h1');

//寻找子元素
console.log(h1.querySelectorAll('.highlight'));


上面的代码说明可以通过DOM遍历快速的定位到子元素

● 我们也可以找到元素的所有子节点(包括元素节点、文本节点和注释节点)的 NodeList 对象

javascript 复制代码
console.log(h1.childNodes);

● 我们也可以找到元素的所有子元素节点,不包括文本节点和注释节点。这将返回一个 HTMLCollection 对象,其中包含所有子元素。

javascript 复制代码
console.log(h1.children);

● 当然,我们可以通过这种寻找某个元素的子元素的方式来定义style

javascript 复制代码
h1.firstElementChild.style.color = 'white';
h1.lastElementChild.style.color = 'orangered';

寻找父元素

● 找到元素的父节点,无论父节点是什么类型的节点(元素节点、文本节点等)。这将返回一个 Node 对象,表示 h1 元素的父节点。

javascript 复制代码
console.log(h1.parentNode);

● 找到元素的最近的父元素节点。如果 h1 的父节点是一个元素节点,则返回这个元素节点;如果 h1 没有父元素节点,则返回 null。

javascript 复制代码
console.log(h1.parentElement);

● 使用 closest 方法来查找最接近的具有指定选择器的祖先元素,并为找到的元素设置背景颜色。

javascript 复制代码
h1.closest('.header').style.background = 'var(--gradient-secondary)';
h1.closest('h1').style.background = 'var(--gradient-primary)';

寻找兄弟元素

● 打印出该前一个兄弟元素节点

javascript 复制代码
console.log(h1.previousElementSibling);

说明向上没有兄弟元素,我们也可以往下找

javascript 复制代码
console.log(h1.nextElementSibling);

● h1 元素的前一个兄弟节点和后一个兄弟节点,或者如果它们不存在则显示 null。需要注意的是,这两个属性获取的节点可能是元素节点也可能是文本节点(或者其他类型的节点)。

javascript 复制代码
console.log(h1.previousSibling);
console.log(h1.nextSibling);

● 那我们怎么知道元素的所有兄弟元素呢,我们可以找父元素的所有子元素

javascript 复制代码
console.log(h1.parentElement.children);

● 最后,我们来玩一下,将除h1元素的所有兄弟元素缩小一半

javascript 复制代码
[...h1.parentElement.children].forEach(function (el) {
  if (el !== h1) el.style.transform = 'scale(0.5)';
});
相关推荐
北海-cherish23 分钟前
vue中的 watchEffect、watchAsyncEffect、watchPostEffect的区别
前端·javascript·vue.js
C嘎嘎嵌入式开发26 分钟前
(2)100天python从入门到拿捏
开发语言·python
AALoveTouch1 小时前
网球馆自动预约系统的反调试
javascript·网络
Stanford_11061 小时前
如何利用Python进行数据分析与可视化的具体操作指南
开发语言·c++·python·微信小程序·微信公众平台·twitter·微信开放平台
2501_915909061 小时前
HTML5 与 HTTPS,页面能力、必要性、常见问题与实战排查
前端·ios·小程序·https·uni-app·iphone·html5
Vallelonga2 小时前
Rust 中的数组和数组切片引用
开发语言·rust
Kiri霧2 小时前
Rust模式匹配详解
开发语言·windows·rust
white-persist2 小时前
Python实例方法与Python类的构造方法全解析
开发语言·前端·python·原型模式
千里马-horse2 小时前
Async++ 源码分析8--partitioner.h
开发语言·c++·async++·partitioner
新中地GIS开发老师3 小时前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学