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)  // 元素距离整个文档顶部的距离})
}),

JavaScript 遍历DOM相关推荐

javascript遍历DOM结构和对象结构
在实际工作中,记住浏览器中对象的属性.方法几乎是件不可能完成的任务,保持一份资料或网址是个好办法.但是查阅资料也是要花费不少时间,如果能有个脚本将对象的结构打印出来,将会加速开发进程. 下面是我编写的 ...
你可能不知道的JavaScript 遍历DOM的几种方法
最近看到一篇关于前端优化方面的文章,里面提到了几点对DOM遍历操作的优化,文章只是一笔带过,并没有深入的讲解. 其中提到了几个优化的手段,乍一看似乎没见过,然后再仔细想想,其实无论是犀牛书还是红宝书都 ...
keras 香草编码器_用香草javascript遍历dom
keras 香草编码器 If you're new to JavaScript, you're likely starting out with Vanilla JavaScript in order ...
jQuery操作Dom元素、jQuery遍历、JavaScript遍历
目录 jQuery操作Dom元素 jQuery遍历几种方式 JavaScript遍历 jQuery操作Dom元素 jQuery的主要用法为"选择某个dom元素,再对其进行某种操作" ...
JavaScript遍历标签（遍历DOM数组）
很多时候我们经常会同时操作多个DOM对象,此时,可以使用循环来遍历DOM数组. 假如我们有这样的需求: 把所有的p标签的字体变为蓝色,字体大小为25px 把列表的奇数行的颜色变为红色样例代码: &l ...
深入理解JavaScript系列（23）：JavaScript与DOM（上）——也适用于新手
文档对象模型Document Object Model DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的API. Javascript和 ...
JavaScript 之 DOM中的三大对象
下面是对JavaScript DOM中三大对象的整理,希望可以帮助到有需要的小伙伴. JavaScript 之 DOM中的三大对象一.Document对象 1.Document对象是什么 Docum ...
DOM系列：DOM树和遍历DOM
上一节,咱们整理了DOM系列中的第一篇,主要介绍浏览器与DOM相关的知识.从标题中我们可以看出来,今天所要学的东西包含两个部分,第一部分是DOM树,第二部分是遍历DOM.如果你和我一样对于DOM树和遍 ...
dhtml_DHTML乌托邦：使用JavaScript和DOM的现代Web设计
dhtml 动态HTML(简称DHTML)是一组Web开发技术的名称,这些技术主要用于具有非平凡用户输入功能的Web页面. DHTML意味着处理HTML文档的文档对象模型,在样式信息中摆弄CSS指令, ...

JavaScript 遍历DOM

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

JavaScript 遍历DOM相关推荐

最新文章

热门文章