为什么要获取页面元素
例如:我们想要操作页面上的某部分(显示/隐藏,动画),需要先获取到该部分对应的元素,才进行后续操作
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+
- 如果是移动端开发可以放心使用这两个方式,移动端浏览器均支持这两个方式