JavaScript中各种选择器的区别

JavaScript中各种选择器的区别

首先JS中有几种选择器

• getElement(s)Byxxxx
  1. document.getElementById()
  2. document.getElementsByClassName()
  3. document.getElementsByName()
  4. document.getElementsByTagName()
• document.querySelector/All()

区别

1. 返回的对象不同

• getElement(s)Byxxxx 返回的是HTMLcollection
• querySelector 返回nodeList

2. getElementsByxxxx 获取的是动态集合，querySelectorALL 获取的是静态集合

• 首先分清楚是在获取多个的时候，才有动态和静态之分
• 动态就是选出的元素集合会随文档改变而改变。
• 静态的不会取出来之后就和文档的改变无关了。

	//案例：页面改动添加或删除若干个div
	//例如：初始有5个div
	//改变之前
	//  queryDivELs.length // 5
	//  getDivELs.length // 5
	//现在又添加5个div
	//  queryDivELs.length // 5
	//  getDivELs.length // 10
	
	//具体操作
	const queryDivELs = document.querySelectorAll('div')
    const getDivELs = document.getElementsByTagName('div')
    console.log(queryDivELs.length) //5
    console.log(getDivELs.length)  //5
    for (let index = 0; index < 5; index++) {
      const div = document.createElement('div')
      document.body.append(div)
    }
    console.log(queryDivELs.length) //5
    console.log(getDivELs.length) //10

3. 接收的参数不同

• querySelectorAll 方法接收的参数是一个 CSS 选择符；
• getElementsBy 系列接收的参数只能是单一的 className、tagName 和 name；

4. 浏览器兼容不同

• querySelectorAll 已被 IE 8+、FF 3.5+、Safari 3.1+、Chrome 和 Opera 10+ 支持 ；
• getElementsBy 系列，以最迟添加规范中的 getElementsByClassName 为例，IE 9+、FF 3 +、Safari 3.1+、Chrome 和 Opera 9+ 都已经支持

5. querySelector 属于 W3C 中的 Selectors API 规范 ，而 getElementsBy 系列属于 W3C 的 DOM 规范