摘要：获取元素的几种方式通过名获取元素名通过名获取元素名通过元素标签去获取元素标签名通过选择器去获取元素选择器选择器和两者不同其中不同的是名标签名返回值是为的集合。选择器返回值是为的集合。集合不能动态获取集合值。从打印的的长度可以看出。
1.获取元素的几种方式
1.通过id名获取元素
document.getElementById("id名");
2.通过class名获取元素
document.getElementsByClassName("class名");
3.通过元素标签去获取元素
document.getElementsByTagName("标签名");
4.通过css选择器去获取元素
document.querySelectorAll("css选择器 ");//（1）
document.querySelector("css选择器 ");//（2）
//（1）和（2）两者不同
其中不同的是：
document.getElementsByClassName("class名");
document.getElementsByTagName("标签名");
返回值是为HTMLCollection的集合。
document.querySelectorAll("css选择器 ")
返回值是为Nodelist的集合。
其中：HTMLCollection集合能动态获取集合值。
Nodelist集合不能动态获取集合值。
下面代码的作用是用js往大盒子中添加5个小盒子。
用document.querySelectorAll("css选择器 ")来获取div。不能动态获取div。从打印的divs.length的长度可以看出。
结果为：
说明：
在往大盒子添加小盒子之前：divs.length=0
在往大盒子添加小盒子之后：divs.length=0
所以： var divs = box.querySelectorAll("div");//获取的是此时此刻box中的所有的div节点。
总结：Nodelist集合不能动态获取集合值。
其中script中的代码改为：
var box = document.getElementById("box");
var divs = box.getElementsByTagName("div");////动态获取box中div集合
console.log("往大盒子添加小盒子之前："+ divs.length );
var str = "";
for(var i = 0;i<5;i++){
str += ""+i+"";
}
box.innerHTML = str;
console.log("往大盒子添加小盒子之后：" +divs.length );
结果为：
说明：
在往大盒子添加小盒子之前：divs.length=0
在往大盒子添加小盒子之后：divs.length=5
所以： var divs = box.getElementsByTagName("div");//动态获取box中div集合.
总结：HTMLCollection集合能动态获取集合值。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/52332.html
摘要：获取元素的几种方式通过名获取元素名通过名获取元素名通过元素标签去获取元素标签名通过选择器去获取元素选择器选择器和两者不同其中不同的是名标签名返回值是为的集合。选择器返回值是为的集合。集合不能动态获取集合值。从打印的的长度可以看出。 1.获取元素的几种方式 1.通过id名获取元素 document.getElementById(id名); 2.通过class名获取元素 document....
摘要：获取元素的几种方式通过名获取元素名通过名获取元素名通过元素标签去获取元素标签名通过选择器去获取元素选择器选择器和两者不同其中不同的是名标签名返回值是为的集合。选择器返回值是为的集合。集合不能动态获取集合值。从打印的的长度可以看出。 1.获取元素的几种方式 1.通过id名获取元素 document.getElementById(id名); 2.通过class名获取元素 document....
摘要：方式二使用通过名获取元素错误代码结果错误原因页面上的取名不是唯一的，是可以重复的。就算页面上面只有一个，它的返回值依旧是集合。需求二获取页面中为的的第一层子级。返回值也是一个类似数组的集合。 1.使用JS获取页面中某个元素的4种方法 1.通过id名获取元素 document.getElementById(id名); 2.通过class名获取元素 document.getElements...
摘要：方式二使用通过名获取元素错误代码结果错误原因页面上的取名不是唯一的，是可以重复的。就算页面上面只有一个，它的返回值依旧是集合。需求二获取页面中为的的第一层子级。返回值也是一个类似数组的集合。 1.使用JS获取页面中某个元素的4种方法 1.通过id名获取元素 document.getElementById(id名); 2.通过class名获取元素 document.getElements...
摘要：方式二使用通过名获取元素错误代码结果错误原因页面上的取名不是唯一的，是可以重复的。就算页面上面只有一个，它的返回值依旧是集合。需求二获取页面中为的的第一层子级。返回值也是一个类似数组的集合。 1.使用JS获取页面中某个元素的4种方法 1.通过id名获取元素 document.getElementById(id名); 2.通过class名获取元素 document.getElements...
阅读 963·2021-11-22 13:52
阅读 901·2019-08-30 15:44
阅读 554·2019-08-30 15:43
阅读 2403·2019-08-30 12:52
阅读 3453·2019-08-29 16:16
阅读 613·2019-08-29 13:05
阅读 2925·2019-08-26 18:36
阅读 1913·2019-08-26 13:46
