Js: document.getElement系列 与 node.querySelectAll对比总结

DOM中有两种常用查找元素的方式:

• document.getElementsTagName() //参数可以为*
• document.getElementById()
• document.getElementsByClassName() -可以指定多个类名 空格隔开-
• getElementsByName
• node.querySelector()
• node.querySelectorAll()

两者对比

	getElement…	querySelector…
效率	快	较慢
返回值类型	HTMLCollection (动态集合, 索引)	Nodelist(静态列表, 拷贝)
作用对象	只可通过document调用	可以在节点上调用
参数	单独检索类, 对象标签名, 或id	对象标签, 类目, id组合使用(但区别于css语法)

1. 效率
   两种方法都是深度优先搜索遍历文档, 区别在于当文档中的元素逐渐增多的时候, 由于query系列方法 采用的是拷贝节点生成列表, 所以效率缓慢
   同样情况下从文档document开始搜索节点时, 两者时间消耗的差距倍增
   不同的是, query方法可以作用在节点上, 所以正确的使用方法是 使用document.getElement获得元素索引, 再使用query方法获取该元素中的某些特定元素

   同时querySelector 可以一次检索多种标签, 方便操作, 当然同时伴随性能的损失, 需要取舍

2. 返回值类型的不同
   query返回的NodeList的特点是：其里面的内容是静态不变的，不会随着dom元素的变化而改变
   get返回的HTMLCollection的特点是,其内容是动态的，会随着dom的元素的更改而改变。