JS基础入门篇（三）— 使用JS获取页面中某个元素的4种方法以及之间的差别（二）

BothEyes1993 发布于2019-08-22 17:09 / 1582人阅读

摘要：获取元素的几种方式通过名获取元素名通过名获取元素名通过元素标签去获取元素标签名通过选择器去获取元素选择器选择器和两者不同其中不同的是名标签名返回值是为的集合。选择器返回值是为的集合。集合不能动态获取集合值。从打印的的长度可以看出。

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的集合。

2.HTMLCollection集合和Nodelist集合的区别

其中：HTMLCollection集合能动态获取集合值。
Nodelist集合不能动态获取集合值。

3.举例说明

下面代码的作用是用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集合能动态获取集合值。

混合云专线服务 js中td之间的距离 js缓存的几种方法 js中获取元素位置 js获取页面的数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94903.html

JS基础入门篇（三）— 使用JS获取页面中某个元素的4种方法以及之间的差别（二）

摘要：获取元素的几种方式通过名获取元素名通过名获取元素名通过元素标签去获取元素标签名通过选择器去获取元素选择器选择器和两者不同其中不同的是名标签名返回值是为的集合。选择器返回值是为的集合。集合不能动态获取集合值。从打印的的长度可以看出。 1.获取元素的几种方式 1.通过id名获取元素 document.getElementById(id名); 2.通过class名获取元素 document....

levy9527 2019-08-29 15:21 评论0 收藏0
JS基础入门篇（三）— 使用JS获取页面中某个元素的4种方法以及之间的差别（二）

摘要：获取元素的几种方式通过名获取元素名通过名获取元素名通过元素标签去获取元素标签名通过选择器去获取元素选择器选择器和两者不同其中不同的是名标签名返回值是为的集合。选择器返回值是为的集合。集合不能动态获取集合值。从打印的的长度可以看出。 1.获取元素的几种方式 1.通过id名获取元素 document.getElementById(id名); 2.通过class名获取元素 document....

CKJOKER 2019-08-02 10:24 评论0 收藏0
JS基础入门篇（三）—使用JS获取页面中某个元素的4种方法以及之间的差别（一）

摘要：方式二使用通过名获取元素错误代码结果错误原因页面上的取名不是唯一的，是可以重复的。就算页面上面只有一个，它的返回值依旧是集合。需求二获取页面中为的的第一层子级。返回值也是一个类似数组的集合。 1.使用JS获取页面中某个元素的4种方法 1.通过id名获取元素 document.getElementById(id名); 2.通过class名获取元素 document.getElements...

Jackwoo 2019-08-22 17:09 评论0 收藏0
JS基础入门篇（三）—使用JS获取页面中某个元素的4种方法以及之间的差别（一）

摘要：方式二使用通过名获取元素错误代码结果错误原因页面上的取名不是唯一的，是可以重复的。就算页面上面只有一个，它的返回值依旧是集合。需求二获取页面中为的的第一层子级。返回值也是一个类似数组的集合。 1.使用JS获取页面中某个元素的4种方法 1.通过id名获取元素 document.getElementById(id名); 2.通过class名获取元素 document.getElements...

changfeng1050 2019-08-29 15:22 评论0 收藏0
JS基础入门篇（三）—使用JS获取页面中某个元素的4种方法以及之间的差别（一）

摘要：方式二使用通过名获取元素错误代码结果错误原因页面上的取名不是唯一的，是可以重复的。就算页面上面只有一个，它的返回值依旧是集合。需求二获取页面中为的的第一层子级。返回值也是一个类似数组的集合。 1.使用JS获取页面中某个元素的4种方法 1.通过id名获取元素 document.getElementById(id名); 2.通过class名获取元素 document.getElements...

idisfkj 2019-08-02 10:24 评论0 收藏0