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

changfeng1050 发布于2019-08-29 15:22 / 3584人阅读

摘要：方式二使用通过名获取元素错误代码结果错误原因页面上的取名不是唯一的，是可以重复的。就算页面上面只有一个，它的返回值依旧是集合。需求二获取页面中为的的第一层子级。返回值也是一个类似数组的集合。

1.使用JS获取页面中某个元素的4种方法

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）两者不同

5.补充说明：
如果想要在控制台打印页面上的所有dom节点，以下两张方法都可以。
方法一：

console.log( document.getElementsByTagName("*") );

方法二：

console.log( document.all );

举例说明

代码运行结果

2.方法之间的差别

需求一：获取页面中id="listOne"的ul，并给此ul添加红色的背景。

方式一: 使用通过 id名 获取元素

var list=document.getElementById("listOne");
console.log(list);
list.style.background="red";

结果：

说明：

因为页面上的id是唯一的，所以控制台打印的值就是页面上的id="listOne" 的 ul。后面一个ul没取到。

解释说明：
优点：因为页面上的id是唯一的，所以很好确定并取到对应的元素。
缺点：因为id是唯一的，但是在css样式中，给元素一般都是取 class名。如果使用id，元素样式不太好复用。

方式二: 使用通过 class名 获取元素

错误代码：

var list=document.getElementsByClassName("order");
console.log(list);
list.style.background="red";

结果：

错误原因：
1.页面上的class取名不是唯一的，是可以重复的。所以document.getElementsByClassName("order");的返回值是一个类似数组的集合，为HTMLCollection(1)。
2.就算页面上面只有一个class=“order”，它的返回值依旧是集合。
3.集合并没有style的属性，所以会报错。

正确代码：

var list=document.getElementsByClassName("order")[0];//用素组下标去取
console.log(list);
list.style.background="red";

结果：

解释说明：
优点：方便写结构样式。
缺点：class取值 ie9以下不支持。

方式三 : 使用通过 元素标签 获取元素

var list=document.getElementsByTagName("ul")[0];//用素组下标去取
console.log(list);
list.style.background="red";

结果：

说明：

1.元素标签和class名是一样的，在页面是可以重复的。所以理解起来，可以当成class名去理解。解释和class名是一样的。
2.document.getElementsByTagName("ul");的返回值是一个类似数组的集合，因为页面上有两个ul，所以返回值为HTMLCollection(2)。
3.就算页面上面只有一个标签，它的返回值依旧是集合。
3.集合并没有style的属性，所以需要用下标去取。

解释说明：
优点：方便写结构样式。
缺点：没有兼容问题。

需求二：获取页面中id为“listOne”的ul的第一层子级。其子级的class为active。并把其背景改成红色.

这时只能选用css选择器。

var li=document.querySelectorAll("#listOne > .active");
console.log(li);
li[0].className="red";
li[1].className="red";

结果:

说明:

1.document.querySelectorAll("css选择器");如何用css选中，在“ ”内就如何写。eg：document.querySelectorAll("#listOne > .active");
2.console.log(li);返回值也是一个类似数组的集合。返回值为NodeList(2)。
3.所以也需要用下标去取值。

解释:

1.比较好用，比较常用。
2.但是也存在兼容问题 ie9以下不支持。

querySelectorAll("css选择器 ")和querySelector("css选择器 ")的区别：

如果以上代码用querySelector("css选择器 ")写

var li=document.querySelector("#listOne > .active");
console.log(li);
li.className="red";

结果：

说明：
1.document.querySelector("#listOne > .active")只取到第一个取到的值。第二个值不取。
2.返回的不是集合，所以可以直接使用。

解释:

1.不太常用。
2.存在兼容问题 ie9以下不支持。

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

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

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

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...

idisfkj 2019-08-02 10:24 评论0 收藏0
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.获取元素的几种方式 1.通过id名获取元素 document.getElementById(id名); 2.通过class名获取元素 document....

BothEyes1993 2019-08-22 17:09 评论0 收藏0