Philip

Philip's blog

0%

How to get DOM element on page

Posted on Edited on In
Symbols count in article: 684 Reading time ≈ 2 mins.

How to get DOM elements on page

获取Dom元素总体来说有两类方法：

  • getElementByXXX
  • queryXXX

这两种方法都是从document对象开始查找，所以可以直接使用，不需要先获取document对象。

get方法

getElementById

这是最常用的方法，如果你的元素有id属性，那么可以使用这个方法获取元素，返回的是一个Element对象。如果没有找到，则返回null。
html代码：

1
<div id="root"></div>

js代码：

1
2
3
4
const element = document.getElementById('root');
if (element) {
  // do something
}

getElementsByClassName

这个方法可以获取到所有class属性中包含指定类名的元素，返回的是一个array-like对象HTMLCollection，可以使用Array.from()方法将其转换为数组。
html代码：

1
2
3
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>

js代码：

1
2
const elements = document.getElementsByClassName('container');
const elementsArray = Array.from(elements);

需要注意的是，这个方法返回的是一个动态的集合，也就是说，如果你在获取到元素之后，再向页面中添加或者删除元素，那么这个集合也会跟着改变。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<body>
  <button class="button">A</button>
  <button class="button">B</button>
  <button class="button">C</button>
  <script>
    // 初始时，页面上有三个按钮。
    const buttons = document.getElementsByClassName("button");
    console.log(buttons); // HTMLCollection(3) [button, button, button]

    // 添加一个按钮, 此时再打印buttons，则输出四个按钮。
    const buttonD = document.createElement("button");
    buttonD.innerHTML = "D";
    buttonD.className = "button";
    document.body.appendChild(buttonD);
    console.log(buttons); // HTMLCollection(4) [button, button, button, button]
  </script>
</body>

query方法

query类的方法参数是CSS选择器，比如

  • “#root” - 查找id为root的结点，
  • “.container” - 查找class为container的结点，
  • “div” - 查找所有div结点。

querySelector

这个方法可以获取到第一个匹配的元素，它的返回值类型是Element。如果没有匹配的元素，返回null。

1
<div class="container"></div>

js代码：

1
const element = document.querySelector('.container');

querySelectorAll

这个方法可以获取到所有匹配的元素，返回的是一个类数组对象NodeList，可以使用Array.from()方法将其转换为数组。

1
2
3
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>

js代码：

1
2
const elements = document.querySelectorAll('.container');
const elementsArray = Array.from(elements);

querySelectorAll方法返回的是一个静态的集合，也就是说，如果你在获取到元素之后，再向页面中添加或者删除元素，那么这个集合不会跟着改变。

需要注意的是，尽管querySelectorAll方法返回的NodeList是静态的，但是NodeList在有些情况下却是动态的，比如 Node.childNodes 返回的就是一个动态的NodeList。

总结成如下表格

方法 返回值类型 返回值个数 查不到时返回值 返回值状态：动态/静态
getElementById Element 1 null -
getElementsByClassName HTMLCollection(Array-like object) 0~n 空的HTMLCollection 动态
querySelector Element 1 null -
querySelectorAll NodeList(Array-like object) 0~n 空的NodeList 静态

References

getElementById
getElementsByClassName
querySelector
querySelectorAll