1. JavaScript 基础

  2. 深入数据和类型

  3. 函数进阶

  4. 运算符

  5. 浏览器存储

  6. Document

  7. Web API

  8. 事件

  9. 工具与规范

  10. 实例

  11. 练习

搜索元素

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

直接通过 id

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

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

$$tip

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

$$

通过 CSS 选择器

querySelectorAll

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

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

11

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

直接通过 id

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

$$jsdemo$$
$$edit$$
<div id="box">三眼鸭的编程教室</div>
<script>
    // 等价于 document.getElementById('box').style.backgroundColor = "teal"
    box.style.backgroundColor = "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.getElementsByClassName("p")
    for (let title of titleList) {
        title.style.color = "teal"
    }
</script>

通过 CSS 选择器

querySelectorAll

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

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

querySelector

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