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)';
});
相关推荐
presenttttt26 分钟前
用Python和OpenCV从零搭建一个完整的双目视觉系统(四)
开发语言·python·opencv·计算机视觉
每日出拳老爷子32 分钟前
[C#] 使用TextBox换行失败的原因与解决方案:换用RichTextBox的实战经验
开发语言·c#
半桔36 分钟前
【Linux手册】从接口到管理:Linux文件系统的核心操作指南
android·java·linux·开发语言·面试·系统架构
nightunderblackcat44 分钟前
新手向:实现ATM模拟系统
java·开发语言·spring boot·spring cloud·tomcat·maven·intellij-idea
开开心心就好1 小时前
电脑息屏工具,一键黑屏超方便
开发语言·javascript·电脑·scala·erlang·perl
江号软件分享1 小时前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
笑衬人心。1 小时前
Java 17 新特性笔记
java·开发语言·笔记
web守墓人2 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
序属秋秋秋2 小时前
《C++初阶之内存管理》【内存分布 + operator new/delete + 定位new】
开发语言·c++·笔记·学习
Savior`L2 小时前
CSS知识复习5
前端·css