访问页面中的所有图片

5大大大大雄
417 阅读2分钟

想要快速访问一个给定文档中所有的img元素，为了性能问题，不能通过遍历HTML集合对象(一般地，要尽量减少访问NodeList、HTMLCollection、NamedNodeMap的次数。因为每次访问它们，都会运行一次基于文档的查询。所以，可以考虑将它们的值缓存起来)，这样操作比较慢。所有的img元素可以通过querySelectorAll和getElementsByTagName

1、querySelectorAll

  • 定义：返回匹配选择器条件的所有元素的集合(Nodelist)，是一个伪数组，可以通过索引来访问。
  • 特点：
    • 1、可以通过选择器去获取，节点中的顺序是基于这些元素在文档中的顺序
    • 2、这个返回的NodeList是静态集合，意味着在获取了NodeList之后对文档做出的任何修改不会反映到这个集合上(注意的是一般只有querySelectorAll 返回的是 静态的Nodelist,其他大部份都是动态的)

2、getElementsByTagName

  • 定义：返回给定元素类型的节点的一个集合(NodeList),是一个伪数组，可以通过索引来访问。
  • 特点：
    • 1、通过标签名获取，节点中的顺序是基于这些元素在文档中的顺序
    • 2、这个返回的NodeList是动态集合，意味着在获取了NodeList之后对文档做出的任何修改会反映到这个集合上

3、区别

querySelectorAll 返回的数据集合是静态特性，getElementsByTagName 返回的数据集合动态特性。 最好牢记这种不同，尤其是在当你选择 NodeList 中所有项遍历的方式，或缓存它的长度的时候。

getElementsByTagName() 速度比 querySelectorAll() 快的根本原因在于动态NodeList和静态NodeList对象的不同。在获取NodeList时不需要执行很多前期处理操作的动态列表,总比获取静态的集合(返回之前完成各种处理)要快很多， 哪个方法更好用主要还是取决于需求

4、应用

如果只是要根据 tag name 来查找元素, 也不需要获取此一个快照结果, 那就应该使用 getElementsByTagName()方法; 如果需要快照结果(静态),或者需要使用复杂的CSS查询, 则可以考虑 querySelectorAll()。

5、实例

<body >
    <div>
        <img src="https://res.minigame.vip/gc-assets/crazy-road/crazy-road_icon.png" alt="img">
    </div>
    <div>
        <img src="https://res.minigame.vip/gc-assets/popstone2/popstone2_icon.png" alt="img">
    </div>
    <div>
        <img src="https://res.minigame.vip/gc-assets/mutant-dino/mutant-dino_icon.png" alt="img">
    </div>
</body>
<script>
    var img1s=document.getElementsByTagName("div");
    console.log("getElementsByTagName 更新前长度：", img1s.length);
    var img2s = document.querySelectorAll("div");
    console.log("querySelectorAll 更新前长度：", img2s.length);
    var div= document.createElement("div");
    var img=document.createElement("img");
    img.src="https://res.minigame.vip/gc-assets/crazy-ball/crazy-ball_icon.png";
    div.appendChild(img);
    document.getElementsByTagName("body")[0].appendChild(div);
    console.log("getElementsByTagName 更新后长度：", img1s.length);
    console.log("querySelectorAll 更新后长度：", img2s.length);
</script>

结果： getElementsByTagName 更新前长度： 3

querySelectorAll 更新前长度： 3

getElementsByTagName 更新后长度： 4

querySelectorAll 更新后长度： 3

6、注意

动态集合，每当文档结构发生变化时，他们都会得到更新，因此始终保持最新、最准确的信息。本质上NodeList对象都是在访问DOM文档时实时运行查询。一般时尽量减少访问NodeList的次数，可以考虑将从NodeList取到的值缓存系下来(比如长度)

avatar
文章
阅读
粉丝