当前位置:   article > 正文

JS中几种常见对象集合_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

后记

还在不断完善中。。。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/一键难忘520/article/detail/795105
推荐阅读
相关标签
  

闽ICP备14008679号