JS基础之 - HTMLCollection，NamedNodeMap，NodeList

一、HTMLCollection

1、常见返回HTMLCollection对象的方法

• document.getElementsByTagName()
  
• document.getElementsByClassName()// 一些旧版本浏览器中此方法返回的是NodeList集合
  
• document.scripts
  
• document.links
  
• document.images
  
• document.forms
  
• tr.cells // 返回所有td标签
  
• select.options // 返回所以select全部选项
  2、特性
  

注意：类似数组确非数组，Array.isArray(HTMLCollection) // 返回false，也无法使用splice()方法

表示html集合，类似数组拥有length属性但，可以通过[index], .item(index), .namedItem(string) 方法获取具体元素

3、如何转换成数组

<div>
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

const htmlCollection = document.getElementsByTagName('p')
let pArray = []
try {
  pArray = Array.prototype.slice.call(htmlCollection)
} catch (e) {
  for (let i = 0; i < htmlCollection.length; i++) {
    pArray.push(htmlCollection[i])
  }
}
console.log(htmlCollection)
console.log(pArray)
// 运行结果看下图

二、NamedNodeMap

1、常见返回NamedNodeMap对象的方法

• dom.attributes

三、NodeList

1、常见返回NodeList对象的方法

• dome.childNodes
• dome.querySelectorAll // 大部分浏览器返回NodeList