1. JavaScript 基础

  2. 深入数据和类型

  3. 函数进阶

  4. 运算符

  5. 浏览器存储

  6. Document

  7. Web API

  8. 事件

  9. 工具与规范

  10. 实例

  11. 练习

遍历元素

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

document

document 是映射着整个页面的对象,通过 docment 的属性或方法我们可以罗列、搜索、修改页面上的元素。

$$tip

有关 document 的详细介绍看 Document - MDN

$$

获取顶层元素

docment 有几个属性可以直接获取以上几个顶层元素。

  • document.documentElement: html 元素。
  • document.head:head 元素。
  • document.body:body 元素。
$$jsdemo$$
$$edit$$
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>JavaScript</title>
    </head>
    <body>
        三眼鸭的编程教室
    </body>
    <script>
        // 元素必须被创建过后才能获取
        // 因此必须放在 body 元素之后
        console.log(document.documentElement) // html 元素
        console.log(document.head) // head 元素
        console.log(document.body) // body 元素
    </script>
</html>

子元素

所有直系子元素

children 属性以集合的形式返回元素中所有的直系子元素。

$$jsdemo$$
$$edit$$
<div id="box">
    <p>三眼鸭</p>
    <p>三眼鸡</p>
    <p>三眼鹅</p>
</div>
<script>
    let box = document.getElementById("box")
    for (let el of box.children) {
        alert(el.textContent)
    }
</script>

第一个子元素

firstElementChild 返回的则是第一个子元素。

$$jsdemo$$
$$edit$$
<div id="box">
    <p>三眼鸭</p>
    <p>三眼鸡</p>
    <p>三眼鹅</p>
</div>
<script>
    let box = document.getElementById("box")
    alert(box.firstElementChild.textContent) // 三眼鸭
</script>

最后一个子元素

lastElementChild 返回的则是最后一个子元素。

$$jsdemo$$
$$edit$$
<div id="box">
    <p>三眼鸭</p>
    <p>三眼鸡</p>
    <p>三眼鹅</p>
</div>
<script>
    let box = document.getElementById("box")
    alert(box.lastElementChild.textContent) // 三眼鹅
</script>

父元素

parentElement 返回父元素。

$$jsdemo$$
$$edit$$
<div id="box">
    <p id="3yya">三眼鸭</p>
    <p>三眼鸡</p>
    <p>三眼鹅</p>
</div>
<script>
    let title = document.getElementById("3yya")
    console.log(title.parentElement) // <div id="box">...</div>
</script>

兄弟元素

previousElementSibling 返回前一个兄弟元素。

nextElementSibling 返回后一个兄弟元素,