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)';
});
相关推荐
CodeCraft Studio19 分钟前
PDF处理控件Aspose.PDF教程:使用 Python 将 PDF 转换为 Base64
开发语言·python·pdf·base64·aspose·aspose.pdf
零点零一21 分钟前
VS+QT的编程开发工作:关于QT VS tools的使用 qt的官方帮助
开发语言·qt
2501_915918411 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂2 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技2 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip2 小时前
JavaScript二叉树相关概念
前端
lingchen19062 小时前
MATLAB的数值计算(三)曲线拟合与插值
开发语言·matlab
gb42152873 小时前
java中将租户ID包装为JSQLParser的StringValue表达式对象,JSQLParser指的是?
java·开发语言·python
一朵梨花压海棠go3 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
蒋星熠3 小时前
Flutter跨平台工程实践与原理透视:从渲染引擎到高质产物
开发语言·python·算法·flutter·设计模式·性能优化·硬件工程