关于HTMLCollection和NodeList

最新推荐文章于 2023-01-31 16:07:39 发布

还让不让人起名字了

最新推荐文章于 2023-01-31 16:07:39 发布

阅读量1.2k

点赞数

分类专栏：前端文章标签： HTML javascript dom

本文链接：https://blog.csdn.net/zqc200789789/article/details/50276687

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在javascript中对DOM的操作是很频繁的是事情。
事实上，在用原生javascript选择器获取dom元素的时候。能直接返回
元素的也仅仅只有以下两条

var dom1=document.getElementById("dom");
var dom2=document.querySelector("#dom");

这两种选择器返回的是dom元素。

而在使用其他的选择器，大部分返回的结果是HTMLCollection，或者NodeList；

先来看下HTMLCollection。
他本身是一个对象，一个类数组对象（这里先不考虑什么是类数组对象）。而并非是一个数组。例如如下代码；

<body>
<div class="dom">
    <ul>
        <li class="list1"></li>
        <li class="list1"></li>
        <li class="list1"></li>
        <li class="list1"></li>
        <li class="list1"></li>
        <li class="list1"></li>
    </ul>
</div>

</body>
<script>
    var htmlCL=document.getElementsByClassName("list1");
    console.log(htmlCL);  //返回的是HTMLCollection

</script>

以上代码最后console.log(htmlCL)，在控制台返回的结果如下

这里写图片描述

可以看到在proto下面一栏显示的是HTMLCollection对象，而并非是数组，对象的是从0开始的有序整数序列，存储每个class=”list”的dom元素。

直接对HTMLCollection是不能采用对dom元素的操作方式来操作的。比如htmlCL.style.color=”red”;是无效的。原因很简单，htmlCL并不是dom对象，她不具备dom所拥有的属性；

当然我们可以使用数组式选择方式来选择其中的一个元素。比如
htmCl[0];返回的则是对象里面的第一个元素，则可以对他进行操作
如：htmCl[0].style.color=”red”;
我们先看下HTMLColllection有哪些常用的属性和方法

length:返回dom集合的个数；
item: 返回当前选择的dom元素
namedItem 返回name为(“name”)的dom；

length很好理解，就是里面有几个dom元素，方便我们用for循环遍历。

item是选择那个dom元素。比如：htmlCL.item(0); 返回的是HTML
Collection的第一个元素。和htmCl[0]返回的结果是一样的；

namedItem的用法也很简单，比如：htmlCL.namedItem(“names”);
返回的是返回的是HTMLCollection所以元素里第一个具有name=“names”属性的dom元素。

至此，我们可以遍历对每个dom元素进行操作

 for (var i = 0, len = htmlCL.length; i < len; i++) {
        htmlCL.item(i).style.color="red";
  }

关于NodeList
当使用queryselectorAll，或者childNode等方法时候，会返回NodeList对象；
例如：

nodeList=document.querySelectorAll(".list1");
console.log(nodeList);  //这里返回NodeList对象

他的使用方法和对象结构和HTMLCollection几乎一致，除了NodeList没有namedItem方法。

还让不让人起名字了

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
关于HTMLCollection和NodeList

在javascript中对DOM的操作是很频繁的是事情。事实上，在用原生javascript选择器获取dom元素的时候。能直接返回元素的也仅仅只有以下两条var dom1=document.getElementsByClassName("dom");var dom2=document.querySelector(".dom");这两种选择器返回的是dom元素。而在使用其他的选择器，大部分返
复制链接

扫一扫