遍历元素

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