获取页面元素的5种方法

为什么要获取页面元素

例如：我们想要操作页面上的某部分（显示/隐藏，动画），需要先获取到该部分对应的元素，才进行后续操作

1. 根据id获取元素

// get 获取  Element 元素   By 通过  Id 标识
var div = document.getElementById('main');
// console.log(div)
// 打印对象，展开后，通过proto可以查看元素的属性，div返回的是HTMLDivElement
console.dir(div)

注意：如果页面上没有对应的id，此时返回null

2. 根据标签获取元素

// 获取到的是HTMLCollection  集合，也就是 伪数组
var divs = document.getElementsByTagName('div');
console.log(divs)
// 通过遍历，获取数据中的每一个元素
for (var i = 0; i < divs.length; i++) {
	console.log(divs[i]);
	// divs中每一个元素都是HTMLDivElement类型
}

注意：因为通过getElementsByTagName获取到的是一个伪数组，所以当没有对应的标签的时候，返回的是0。

3. 根据name属性获取元素

document.getElementsByName()

注意：此方法不推荐使用，因为在IE和欧朋浏览器中，通过这个方式会获取到相同的id的元素

4. 根据class属性获取元素

document.getElementsByClassName()

返回的也是一个伪数组
存在兼容性问题，IE9+

5. 根据选择器来查找元素

5.1 document.querySelector()

返回文档中匹配指定的选择器组的第一个元素

5.2 document.querySelectorAll()

返回文档中匹配指定的选择器组的所有元素

• 这两个方式都是根据选择器来获取元素
• querySelector()只能返回第一个匹配到的元素
• querySelectorAll()能返回所有匹配到的元素
• 这两个方式很强大，但是他们存在兼容性问题，支持IE8+
• 如果是移动端开发可以放心使用这两个方式，移动端浏览器均支持这两个方式