遍历元素

在之前只学习了 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 返回后一个兄弟元素。

$$jsdemo$$
$$edit$$
<div>三眼狗</div>
<div id="duck">三眼鸭</div>
<div>三眼猫</div>
<script>
    let duck = document.getElementById("duck")
    alert(duck.previousElementSibling.textContent) // 三眼狗
    alert(duck.nextElementSibling.textContent) // 三眼猫
</script>

练习

三眼鸭元素为 id="box" 的倒数第二个子元素，定位元素并输出其文本内容。

<div id="box">
    <div>三眼猫</div>
    <div>三眼牛</div>
    <div>三眼狗</div>
    <div>三眼鸭</div>
    <div>三眼猪</div>
</div>

$$answer

$$jsdemo$$
$$edit$$
<div id="box">
    <div>三眼猫</div>
    <div>三眼牛</div>
    <div>三眼狗</div>
    <div>三眼鸭</div>
    <div>三眼猪</div>
</div>
<script>
    let box = document.getElementById("box")

    // 倒数第二个子元素
    let sanyanya = box.children[box.children.length - 2]

    alert(sanyanya.textContent)
</script>

定位三眼鸭元素，并输出其文本内容。

<div id="box">
    <div>三眼狗</div>
    <div>三眼猪</div>
    <div>
        <div>三眼鸭</div>
        <div>三眼猫</div>
    </div>
</div>

$$answer

$$jsdemo$$
$$edit$$
<div id="box">
    <div>三眼狗</div>
    <div>三眼猪</div>
    <div>
        <div>三眼鸭</div>
        <div>三眼猫</div>
    </div>
</div>
<script>
    let box = document.getElementById("box")

    // 最后一个元素的第一个元素
    let sanyanya = box.lastElementChild.firstElementChild

    alert(sanyanya.textContent)
</script>

定位三眼鸭元素，并输出其文本内容。

<div>
    <div>三眼狗</div>
    <div id="pig">三眼猪</div>
    <div>三眼猫</div>
    <div>三眼鹅</div>
    <div>三眼鸭</div>
</div>

$$answer

$$jsdemo$$
$$edit$$
<div>
    <div>三眼狗</div>
    <div id="pig">三眼猪</div>
    <div>三眼猫</div>
    <div>三眼鹅</div>
    <div>三眼鸭</div>
</div>
<script>
    let pig = document.getElementById("pig")

    // 父元素的最后一个元素
    let sanyanya = pig.parentElement.lastElementChild

    alert(sanyanya.textContent)
</script>