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

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 );

举例说明

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
<h2></h2>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
// console.log( document.getElementsByTagName("*") );
console.log( document.all );
</script>
</body>
</html>

代码运行结果
JS基础入门篇( 三 )—使用JS获取页面中某个元素的4种方法以及之间的差别( 一 )

2.方法之间的差别

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.active{
background: palevioletred;
}
.red{
background: red;
}
</style>
</head>
<body>
<ul id="listOne" class="order">
<li class="active">0</li>
<li class="active">1</li>
<li>
<ul>
<li class="active">2-1</li>
<li>2-2</li>
</ul>
</li>
</ul>
<ul>
<li>0</li>
<li>1</li>
</ul>
</body>
</html>

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


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

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

结果:

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

说明:

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

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


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

错误代码:

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

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

错误原因:
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";

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

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


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

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

结果:

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

说明:

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";

结果:

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

说明:

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";

结果:

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

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

解释:

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


上一篇:【2017-06-29】在登录页面自动返回上次请求页面、Js获取table中的行数与列数


下一篇:锋利的jQuery-4--trigger()和triggerHandler()