JS中几种常见对象集合_js 对象集合

---

前言

在日常代码调试过程中，常常会见到像Arguments，NodeList，HTMLCollection，DOMTokenList，NamedNodeMap这样的对象集合，在这里笔者总结了一下

---

<div class="box1 box2 box3" id="box" title="划过会显示">
    <h3>007</h3>
    <p>p标签</p>
    <a href="">996</a>
    <span>specialText</span>
</div>
<ul class="menu" id="menu">
    <li class="item">1</li>
    <li class="item">12</li>
    <li class="item">123</li>
    <li class="item">1234</li>
    <li class="item">12345</li>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13

上面html这段代码笔者放在最前面，下面代码都是基于它写的。

一、实参对象集合arguments

JS代码如下（示例）：

function add() {
    console.log(arguments);//Arguments(10) [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, callee: ƒ, Symbol(Symbol.iterator): ƒ]
    console.log(typeof arguments);//object
}
add(0, 1, 2, 3, 4, 5, 6, 7, 8, 9);
1
2
3
4
5

每一个函数都有arguments对象，它是一个伪数组，通过下标可以得到对应实参，通过.length可以得到实参的个数。

二、获取元素集合的3种方法

1.querySelectorAll

JS代码如下（示例）：

var menu1 = document.querySelectorAll("ul li");
console.log(menu1);//NodeList(5) [li.item, li.item, li.item, li.item, li.item]
console.log(typeof menu1)//object
console.log(typeof NodeList)//function
console.log(menu1.__proto__ === NodeList.prototype);//true
console.log(NodeList.__proto__ === Function.prototype);//true
1
2
3
4
5
6

打印menu1得到NodeList对象，代表节点集合

2.getElementsByClassName

JS代码如下（示例）：

var menu2 = document.getElementsByClassName("item");
console.log(menu2);//HTMLCollection(5) [li.item, li.item, li.item, li.item, li.item]
console.log(typeof menu2)//object
console.log(typeof HTMLCollection)//function
console.log(menu2.__proto__ === HTMLCollection.prototype);//true
console.log(HTMLCollection.__proto__ === Function.prototype);//true
1
2
3
4
5
6

打印menu2得到HTMLCollection对象，表示一个元素节点的集合

3.getElementsByTagName

JS代码如下（示例）：

var menu3 = document.getElementsByTagName("li");
console.log(menu3);//HTMLCollection(5) [li.item, li.item, li.item, li.item, li.item]
console.log(typeof menu3)//object
1
2
3

通过class名和标签名获取元素的对象集合都是HTMLCollection。

---

三、classlist对象获取的元素集合

JS代码如下（示例）：

var box = document.querySelector(".box1");
console.log(box.classList);//DOMTokenList(3) ['box1', 'box2', 'box3', value: 'box1 box2 box3']
console.log(typeof box.classList);//object
console.log(typeof DOMTokenList)//function
console.log(box.classList.__proto__ === DOMTokenList.prototype);//true
console.log(DOMTokenList.__proto__ === Function.prototype);//true
1
2
3
4
5
6

打印box.classList得到DOMTokenList对象，它是所有类名组成的类数组。通过增（add）删（remove）改（replace）查（contains，toggle）等对类进行操作。

---

四、获取元素属性的集合

JS代码如下（示例）：

var box = document.querySelector(".box1");
console.log(box.attributes);//NamedNodeMap {0: class, 1: id, 2: title, class: class, id: id, title: title, length: 3}
console.log(typeof box.attributes);//object
console.log(typeof NamedNodeMap);//function        
console.log(NamedNodeMap.__proto__ === Function.prototype);//true
console.log(box.attributes.__proto__ === NamedNodeMap.prototype);//true
console.log(box.getAttribute("title"));//划过会显示
box.setAttribute("abc","123");
console.log(box.getAttribute("abc"));//123
1
2
3
4
5
6
7
8
9

通过box.attributes获取box下所有的属性节点；
通过box.getAttribute(“title”)获取box下title的属性值"划过会显示"；
通过box.setAttribute(“abc”)获取box下abc的属性值"123"；

---

五、DOM的children属性获取元素子节点集合

JS代码如下（示例）：

var box = document.querySelector(".box1");
console.log(box.children);//HTMLCollection(4) [h3, p, a, span]
console.log(typeof box.children);//object
console.log(typeof HTMLCollection);//function 
console.log(box.children.__proto__ === HTMLCollection.prototype);//true
console.log(HTMLCollection.__proto__ === Function.prototype);//true
console.log(box.children.__proto__.__proto__ === Object.prototype);//true
1
2
3
4
5
6
7

---

六、DOM的childNodes属性获取子节点集合

JS代码如下（示例）：

var box = document.querySelector(".box1");
console.log(box.childNodes);//NodeList(9) [text, h3, text, p, text, a, text, span, text]
console.log(typeof box.childNodes);//object
console.log(typeof NodeList);//function
console.log(box.childNodes.__proto__ === NodeList.prototype);//true
console.log(NodeList.__proto__ === Function.prototype);//true
console.log(box.childNodes.__proto__.__proto__ === Object.prototype);//true
1
2
3
4
5
6
7

---

后记

还在不断完善中。。。