一、为什么要获取页面元素?
例如:我们想要操作页面上的某部分(显示/隐藏,动画),需要先获取到该部分对应的元素,才进行后续操作。
二、获取元素的5种方式:
1.根据id获取元素
document.getElementById(“id属性的值”)
var div = document.getElementById("main");
console.log(div);
// 获取到的数据类型 HTMLDivElement,对象都是有类型的
// HTMLDivElement <-- HTMLElement <-- Element <-- Node <-- EventTarget
注意:由于id名具有唯一性,部分浏览器支持直接使用id名访问元素,但不是标准方式。
2.根据标签名获取元素
document.getElementsByTagName(“标签名”);
var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
var div = divs[i];
console.log(div);
}
//document.getElementsByTagName("标签名");返回的是一个伪数组,
//无论获取的是一个标签,还是多个标签,最终都是在数组中存储的
## ```3.根据name获取元素
document.getElementsByName(‘name名字’)
```javascript
var inputs = document.getElementsByName('hobby');
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
console.log(input);
}
注意:该方法属于H5的方法,在IE8及以下版本都不支持该方法。
4.根据类名获取元素
document.getElementsByClassName(‘类名’)
var mains = document.getElementsByClassName('main');
for (var i = 0; i < mains.length; i++) {
var main = mains[i];
console.log(main);
}
注意:该方法属于H5的方法,在IE8及以下版本都不支持该方法。
5.根据选择器获取元素
var text = document.querySelector('#text');
console.log(text);
var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
var box = boxes[i];
console.log(box);
}
6.根据选择器的方式获取元素
querySelector(“选择器名”);----返回来的是一个元素对象
querySelectorAll(“选择器名”);----返回来的是一个伪数组,里面保存了多个的DOM对象
<input type="button" value="显示效果" id="btn"/>
<script>
var btnObj= document.querySelector("#btn");
btnObj.onclick=function () {
alert("哈哈哈");
};
</script>