DOM中有两种常用查找元素的方式:
- document.getElementsTagName() //参数可以为*
- document.getElementById()
- document.getElementsByClassName() -可以指定多个类名 空格隔开-
- getElementsByName
- node.querySelector()
- node.querySelectorAll()
两者对比
getElement… | querySelector… | |
---|---|---|
效率 | 快 | 较慢 |
返回值类型 | HTMLCollection (动态集合, 索引) | Nodelist(静态列表, 拷贝) |
作用对象 | 只可通过document调用 | 可以在节点上调用 |
参数 | 单独检索类, 对象标签名, 或id | 对象标签, 类目, id组合使用(但区别于css语法) |
-
效率
两种方法都是深度优先搜索遍历文档, 区别在于当文档中的元素逐渐增多的时候, 由于query系列方法 采用的是拷贝节点生成列表, 所以效率缓慢
同样情况下从文档document开始搜索节点时, 两者时间消耗的差距倍增
不同的是, query方法可以作用在节点上, 所以正确的使用方法是 使用document.getElement获得元素索引, 再使用query方法获取该元素中的某些特定元素同时querySelector 可以一次检索多种标签, 方便操作, 当然同时伴随性能的损失, 需要取舍
-
返回值类型的不同
query返回的NodeList的特点是:其里面的内容是静态不变的,不会随着dom元素的变化而改变
get返回的HTMLCollection的特点是,其内容是动态的,会随着dom的元素的更改而改变。