元素节点的属性和方法
元素节点也是节点,继承了节点的属性和方法。但是元素节点也有自己的一套独立属性/方法,比如获取一个节点中的元素节点:
属性 |
作用 |
element.children |
获取元素节点中所有的子元素节点 |
element.childElementCount |
获取元素节点中所有的子元素节点的个数 |
element.firstElementChild |
获取元素节点中第一个子元素节点 |
element.lastElementChild |
获取元素节点中最后一个子元素节点 |
element.previousElementSibling |
获取元素节点的上一个兄弟元素节点 |
element.nextElementSibling |
获取元素节点的下一个兄弟元素节点 |
除了这些,还有:
属性 |
作用 |
element.getElementsByClassName |
在后代元素中根据类名查找元素,返回所有符合条件的元素 |
element.getElementsByTagName |
在后代元素中根据标签名查找元素,返回 所有符合条件的元素 |
element.querySelector(cssSelector) |
在后代元素中通过 css 选择器查找元素,返回 第一个符合条件的元素 |
element.querySelectorAll(cssSelector) |
在后代元素中通过 css 选择器查找元素,返回 所有符合条件的元素 |
注意:这里没有getElementById(id)
方法!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<section>first section element</section>
<div>
<h1>hello world</h1>
<h1>hello world</h1>
<a href="http://baidu.com" target="_blank" name="link" class="link-a"
>jump to baidu website</a
>
<p>welcome to china</p>
</div>
<section>second section element</section>
<script>
var div = document.querySelector("div");
console.log("div中所有节点:", div.childNodes);
console.log("div中所有元素节点:", div.children);
console.log("div中所有元素节点的个数:", div.childElementCount);
console.log("div中第一个子元素节点:", div.firstElementChild);
console.log("div中最后一个子元素节点:", div.lastElementChild);
console.log("div的上一个元素节点:", div.previousElementSibling);
console.log("div的下一个元素节点:", div.nextElementSibling);
console.log(
"div中查找所有类名为'link-a'的元素节点:",
div.getElementsByClassName("link-a"),
);
console.log(
"div中查找所有标签为'a'的元素节点:",
div.getElementsByTagName("a"),
);
console.log(
"div中通过css选择器'h1'查找第一个元素:",
div.querySelector("h1"),
);
console.log(
"div中通过css选择器'h1'查找全部元素:",
div.querySelectorAll("h1"),
);
</script>
|
案例源码

注意:
- 所有返回一个集合的方法,如果没有找到符合条件的元素,会返回一个空集合;只返回一个元素的方法,如果没有找到符合条件的元素,会返回
null
- 以上这些查找元素节点的放大都只适用于查找标准的元素,不能用来查找伪元素