JavaScript 遍历DOM

简介: JavaScript 遍历DOM

通过document.getElementsByClassName等方式获取的是 HTMLCollection (一个包含了顺序为文档流中顺序的元素的通用集合), 不是一个数组 ,不能直接使用 forEach 等进行遍历。


解决方案:将HTMLCollection转换成数组

 

方法很多,其中最简单的一种是使用解构运算符 ... (注意:每一层都需要解构


// 遍历整个文档的div标签
[...document.getElementsByTagName("div")].forEach(item => {
    // 遍历div内的元素
    [...item.children].forEach(item2 => {
        console.log(item2.tagName)    // 元素的标签名
        console.log(item2.innerText)  // 元素内的文本内容
        console.log(item2.offsetTop)  // 元素距离整个文档顶部的距离
    })
}),
目录
相关文章
|
3月前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
|
2月前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具,通过它们可以动态地改变页面的内容、样式和行为,为用户提供丰富的交互体验。
|
2月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
70 5
|
2月前
|
JavaScript 前端开发 开发者
.js的dom元素操作
【10月更文挑战第29天】通过灵活运用这些 DOM 元素操作方法,JavaScript 可以实现丰富的网页交互效果,如动态更新页面内容、响应用户操作、创建和删除页面元素等。在实际开发中,开发者可以根据具体的需求和场景,选择合适的 DOM 元素操作方法来实现所需的功能,为用户提供更加流畅和动态的网页体验。
|
3月前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
3月前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
103 4
|
3月前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
3月前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
3月前
|
JavaScript
js之遍历方法
js之遍历方法
18 0
|
3月前
|
JavaScript 前端开发 容器
js之dom学习
js之dom学习
68 0