小小千想和您聊一聊

当前位置: 首页> 技术分享> HTMLCollection对象和NodeList对象

HTMLCollection对象和NodeList对象

  前言

  首先我们先来看下面的demo,假如我们需要给所有的li字体变一个颜色。

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title></head><body>
    <ul id="list">
        <li>aaaaaaa</li>
        <li>aaaaaaa</li>
        <li>aaaaaaa</li>
        <li>aaaaaaa</li>
    </ul></body></html>
  下面我们将通过两种方式来实现需求。

  childNodes

  首先我们先来通过childNodes来获取li。

var list = document.getElementById('list');var lis = list.childNodes;console.log(lis);

  此时需要注意的是,通过childNodes获取的list里面的子节点,数量远远超过了li的数量,原因是在js当中,节点的分类当中不仅仅包括了标签,连同文本、注释等等都会被包括在内。所以当我们获取内容时,连同li之外的节点也找到了。

  下面是js当中节点的常见分类:

  那么此时如果我们直接给li设置color属性就会直接报错:

 for(var i=0;i<lis.length;i++) {
        lis[i].style.color = 'red'
    }
  错误如下:

HTMLCollection 和 NodeList.html:21 Uncaught TypeError: Cannot set property 'color' of undefined
  如果想要设置样式,需要在代码中判断一下节点的类型:

for(var i=0;i<lis.length;i++) {
        if(lis[i].nodeType === 1) {
            lis[i].style.color = 'red'
        }
    }
  通过nodeType判断节点类型是否是一个元素,如果是再来设置样式。

  children

  其实我们还可以采用更简单的形式来进行需求的实现:

var list = document.getElementById('list');var lis = list.children;for(var i=0;i<lis.length;i++){
  lis[i].style.color = 'red'
}
  在上面的代码中,我们将childNodes换成了children,这样我们直接获取了list当中所有的li,并且仅仅获取了li。

  这样我们直接在循环中完成了样式的设置。

  相对于上面的写法,我们会发现简单了不少。

  HTMLCollection 和 NodeList

  细心的同学应该会发现一个小问题,就是当我们使用nodeList和children获取所有的li后,打印出来的对象并不一样。

  这是通过nodeList打印出来的结果:

  下面这是通过children打印出来的结果:

  你会发现二者一个是nodeList对象,一个是HTMLCollection对象。

  下面我们来聊聊这两个对象。

  首先,当我们获取元素时,如果通过下面的api获取元素就可以获得一个HTMLCollection对象:

1:getElementsByTagName() 

2:document.forms.item()

3: document.forms.namedItem()
  而如果通过下面的方式将会获得一个NodeList对象:

childNodesquerySelectorAll()getElementsByClassName()[一些旧版本的浏览器也返回NodeList对象]
  如果仅仅从表面看,这两个对象其实非常相似,都是类数组对象,但是二者却有着一个最大的区别:一个是元素集合(HTMLCollection)一个是节点集合(NodeList)。

  在元素集合当中仅仅包括元素标签,而节点集合还可能包括其他类型的节点。

  二者之间在使用上还有一点区别,在HTMLCollection中除了可以使用索引获取元素以外,还可以使用name、id来获取元素。而NodeList仅仅可以通过索引来获取元素。

  当然,这两个对象也存在一些相同的地方:

  二者都是类数组对象,具有length属性,但是却不能够使用数组的方法

  二者都可以通过类似数组的方式,使用索引获取元素。

  Tip: HTMLCollection可以理解为是NodeList的子对象,后者包括前者,前者是继承自后者。

  动态集合

  HTMLCollection和NodeList都是动态集合,例如下面的例子:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title></head><body>
    <ul id="list"></ul></body><script type="text/javascript">
    var list = document.getElementById('list');
    console.log(list)
    var li = document.createElement('li');

    list.appendChild(li);
    console.log(list)</script></html>
  虽然在插入节点之前console了结果,但是依然是最新的插入节点之后的结果:

  querySelectorAll

  需要注意的是,虽然querySelectAll也会产生一个NodeList对象,但是却是NodeStaticList,是一个静态集合,这一点较为特殊,并不是一个实时的对象,需要额外的注意。

上一篇:JavaScript中的闭包

下一篇:Dubbo架构介绍

QQ技术交流群

HTML5/Web前端锋迷群
712051083

加入群聊

用户登录

手机号:

密码:

图形验证码:

点击切换

用户注册

手机号:

登录密码:

图形验证码:

点击切换

短信验证码:

获取验证码

忘记密码

1安全验证

2重置密码

手机号:

图形验证码:

短信验证码:

获取验证码

忘记密码

1安全验证

2重置密码

新密码:

确认新密码:

获取课程

添加小千老师微信,获取课程信息

如何获取课程?

一、需拥有此本教材

如没有,可点击下方入口购买当当购买入口京东购买入口

二、添加小千老师,发送拥有凭证,解锁课程资源

1.购买该教材的订单信息
2.拥有的实体书信息等

更换手机号

新手机号:

图形验证码:

短信验证码:

获取验证码
0.4693s