前言

在之前只学习了 document.getElementById(id) 一种通过 id 的方式来获取元素。这个章节将学习更多的方法。

直接通过 id

JavaScript 会根据元素的 id 来生成一个全局的变量指向该元素,直接操作该变量即可。

$$jsdemo$$
$$edit$$
<div id="box">三眼鸭的编程教室</div>
<script>
    // 等价于 document.getElementById('box').style.color = "teal"
    box.style.color = "teal"
</script>

$$tip

指向元素的变量可以会被本地的变量覆盖,请小心使用。保险起见推荐使用 document.getElementById 方法。

$$

getElementsBy*

还有以下和 getElementById 类似的方法:

  • getElementsByTagName(tag):返回指定标签的元素集合。
  • getElementsByClassName(className):返回具有给定类名的集合。
  • getElementsByName(name):返回符合 name 属性的元素集合。

$$tip

getElementById 返回的是一个元素,而以下方法返回的都是集合,注意 getElementsBy* 中的 Elements 是复数。

$$

$$jsdemo$$
$$edit$$
<h2>三眼鸭的编程教室</h2>
<p>三眼鸡的编程教室</p>
<p>三眼鹅的编程教室</p>
<script>
    let titleList = document.getElementsByTagName("p")
    for (let title of titleList) {
        title.style.color = "teal"
    }
</script>

通过 CSS 选择器

querySelectorAll 方法

querySelectorAll(css) 以集合的形式返回所有 CSS 选择器匹配的元素。

$$jsdemo$$
$$edit$$
<h2 class="title">三眼鸭的编程教室</h2>
<h2 class="title">三眼鸡的编程教室</h2>
<h2>三眼猪的编程教室</h2>
<h2 class="title">三眼鹅的编程教室</h2>
<script>
    let titleList = document.querySelectorAll(".title")
    for (let title of titleList) {
        title.style.color = "teal"
    }
</script>

querySelector 方法

querySelector(css) 同样是返回 CSS 选择器匹配的元素,只是仅返回第一个匹配到的元素。


练习

  1. 将所有的 h2 元素设置为水鸭蓝。
<h1>三眼鸭的编程教室</h1>
<h2>三眼鸭的编程教室</h2>
<h1>三眼鸭的编程教室</h1>
<h2>三眼鸭的编程教室</h2>
<h1>三眼鸭的编程教室</h1>
<h2>三眼鸭的编程教室</h2>

$$answer

$$jsdemo$$
$$edit$$
<h1>三眼鸭的编程教室</h1>
<h2>三眼鸭的编程教室</h2>
<h1>三眼鸭的编程教室</h1>
<h2>三眼鸭的编程教室</h2>
<h1>三眼鸭的编程教室</h1>
<h2>三眼鸭的编程教室</h2>
<script>
    let h2List = document.getElementsByTagName("h2")
    for (let h2 of h2List) {
        h2.style.color = "teal"
    }
</script>

$$

  1. tag="duck" 的元素设置为水鸭蓝。
<div>三眼牛</div>
<div>三眼鸡</div>
<div tag="duck">三眼鸭</div>
<div>三眼狗</div>

$$answer

$$jsdemo$$
$$edit$$
<div>三眼牛</div>
<div>三眼鸡</div>
<div tag="duck">三眼鸭</div>
<div>三眼狗</div>
<script>
    let duck = document.querySelector("[tag='duck']")
    duck.style.color = "teal"
</script>

$$