码迷,mamicode.com
首页 > 其他好文 > 详细

(getElementBy**)与 querySelector(querySelectorAll) 的区别

时间:2019-02-21 00:19:09      阅读:232      评论:0      收藏:0      [点我收藏+]

标签:selector   get   png   方式   com   的区别   图片   区别   img   

1. 通过类似于 document.getElementByTagName(‘div‘) 这种方式获取到的类数组,无法通过 forEach 进行遍历(可以通过for循环);而通过document.querySelectorAll(div)可以通过forEach 进行遍历。

(1)首先看 getElementByTagName 的这种情况

技术图片
网页表现
技术图片

(2)然后看 querySelectorAll 的这种情况

技术图片
网页表现
技术图片

2. 通过 getElementBy** 获取这种方式获取到的数组是动态的;而 querySelectorAll 这种方式获取到的是静态的(但是如果是 querySelectorAll 获取到的dom内部发生的变化,依旧是会动态改变的)

(1)首先我们看 getElementBy** 这种方式

技术图片
网页表现
技术图片

(2)我们可以看到尽管没有重新获取dom,liArr还是检测到了新加入的 li 标签。接下来我们看一下通过 querySelectorAll 这种方式获取到的dom列表。

技术图片
网页表现
技术图片

(3)接下来,我们将一个新的标签放到第一个li标签的内部。

技术图片
网页表现
技术图片
可以发现,通过 querySelectorAll 获取到的dom并不是绝对静态的,添加到这些dom内部的变化,依旧可以检测到。

(getElementBy**)与 querySelector(querySelectorAll) 的区别

标签:selector   get   png   方式   com   的区别   图片   区别   img   

原文地址:https://www.cnblogs.com/usebtf/p/10409786.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!