2.获取DOM元素
2022-09-26 本文已影响0人
未路过
1 获取元素节点
当层级嵌套比较深的时候，我们如果从body开始拿元素，使用导航的方式非常不方便。所以我们需要使用方法直接获取我们想要的元素。
image.png
- getElementById()
– 通过id属性获取一个元素节点对象
- getElementsByClassName()
– 通过class名获取一组元素节点对象 - getElementsByTagName()
– 通过标签名获取一组元素节点对象
- getElementsByName()
– 通过name属性获取一组元素节点对象
<html>
<head>
<script type="text/javascript">
function getElements()
{
var x=document.getElementsByName("myInput");
alert(x.length);
}
</script>
</head>
<body>
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<br />
<input type="button" onclick="getElements()"
value="How many elements named 'myInput'?" />
</body>
</html>
-
querySelector()
-
querySelectorAll()
• 这两个方法都是用document对象来调用，两个方法使用相同，都是传递一个选择器字符串作为参数，方法会自动根据选择器字符串去网页中查找元素。
• 不同的地方是querySelector()只会返回找到的第一个元素，而querySelectorAll()会返回所有符合条件的元素。
• ie8及其以上版本支持
//获取class为box1中的所有的div
//.box1 div
/*
* document.querySelector()
* - 需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象
* - 虽然IE8中没有getElementsByClassName()但是可以使用querySelector()代替
* - 使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个
*/
var div = document.querySelector(".box1 div");
var box1 = document.querySelector(".box1")
//console.log(div.innerHTML);
//console.log(box1.innerHTML);
/*
* document.querySelectorAll()
* - 该方法和querySelector()用法类似，不同的是它会将符合条件的元素封装到一个数组中返回
* - 即使符合条件的元素只有一个，它也会返回数组
*/
box1 = document.querySelectorAll(".box1");
box1 = document.querySelectorAll("#box2");
console.log(box1);
//box1 看起来是个数组，其实是一个可迭代对象，
可以使用for of来枚举。
多个元素放在一起一般是NodeList，是一个对象，不是数组。
虽然它能够通过索引值获取值，它不是数组，而是有个属性叫做0， 1， 2， 3.
2. 开发中如何选择呢？
- 目前最常用的是querySelector和querySelectAll；
- getElementById偶尔也会使用或者在适配一些低版本浏览器时；
