JavaScript 基础
深入数据和类型
函数进阶
运算符
浏览器存储
Document
Web API
事件
工具与规范
实例
练习
遍历元素
在之前只学习了 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
返回后一个兄弟元素,