document.getElementById

如果一个元素有 id 特性(attribute),那我们就可以使用 document.getElementById(id) 方法获取该元素,无论它在哪里。

例如:

<div id="elem">
  <div id="elem-content">Element</div>
</div>

<script>
  // 获取该元素
  var elem = document.getElementById('elem');

  // 将该元素背景改为红色
  elem.style.background = 'red';
</script>

document.getElementsBy*

还有其他通过标签等查找节点的方法。

  • document.getElementsByTagName(tag) 在文档范围内查找具有给定标签的元素,并返回它们的集合。tag 参数也可以是对于“任何标签”的星号 "*"
  • document.getElementsByClassName(className) 在文档范围内返回具有给定CSS类的元素。

例如:

// 获取文档中的所有 div
var divs = document.getElementsByTagName('div');

新手开发者有时会忘记字符 "s"。也就是说,他们会调用 getElementByTagName 而不是 getElementsByTagName

getElementById 中没有字母 "s",是因为它只返回单个元素。但是 getElementsByTagName 返回的是元素的集合,所以里面有 "s"

// 行不通
document.getElementsByTagName('div').innerText = 'hello';

我们应该遍历集合或通过对应的索引来获取DOM元素,进行操作,如下所示:

document.getElementsByTagName('div')[0].innerText = 'hello';

querySelectorAll

到目前为止,最通用的方法是 document.querySelectorAll(css),它返回 文档中与给定 CSS 选择器匹配的所有元素。

<ul>
  <li>The</li>
  <li>test</li>
</ul>
<ul>
  <li>has</li>
  <li>passed</li>
</ul>
<script>

      var elements = document.querySelectorAll('ul li');
    // 获取所有匹配以上css选择器的元素集合
    // 这个方法确实功能强大,因为可以使用任何 CSS 选择器。

</script>

querySelector

document.querySelector(css) 调用会返回给定 CSS 选择器的第一个元素。

换句话说,结果与 document.querySelectorAll(css)[0] 相同。

All会查找 所有 元素,而 document.querySelector 只会查找一个。因此它在速度上更快,并且写起来更短。

总结

有 6 种主要的方法,可以在 DOM 中搜素节点:

Method Searches by...
querySelector CSS-selector
querySelectorAll CSS-selector
getElementById id
getElementsByTagName tag or '*'
getElementsByClassName class

目前为止,最常用的是 querySelectorquerySelectorAll,但是 getElementBy* 可能会偶尔有用。

文档更新时间: 2021-08-04 07:48   作者:张老师