JavaScript 基础
Document
运算符
深入数据和类型
函数进阶
原型、继承
类
浏览器存储
Web API
事件
错误处理
异步编程
网络请求
模块
练习
实例
工具与规范
软件架构模式
设计模式
前言
在之前只学习了 document.getElementById(id)
一种通过 id 的方式来获取元素。这个章节将学习更多的方法。
直接通过 id
JavaScript 会根据元素的 id 来生成一个全局的变量指向该元素,直接操作该变量即可。
$$jsdemo$$
$$edit$$
<div id="box">三眼鸭的编程教室</div>
<script>
// 等价于 document.getElementById('box').style.color = "teal"
box.style.color = "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.getElementsByTagName("p")
for (let title of titleList) {
title.style.color = "teal"
}
</script>
通过 CSS 选择器
querySelectorAll 方法
querySelectorAll(css)
以集合的形式返回所有 CSS 选择器匹配的元素。
$$jsdemo$$
$$edit$$
<h2 class="title">三眼鸭的编程教室</h2>
<h2 class="title">三眼鸡的编程教室</h2>
<h2>三眼猪的编程教室</h2>
<h2 class="title">三眼鹅的编程教室</h2>
<script>
let titleList = document.querySelectorAll(".title")
for (let title of titleList) {
title.style.color = "teal"
}
</script>
querySelector 方法
querySelector(css)
同样是返回 CSS 选择器匹配的元素,只是仅返回第一个匹配到的元素。
练习
- 将所有的
h2
元素设置为水鸭蓝。
<h1>三眼鸭的编程教室</h1>
<h2>三眼鸭的编程教室</h2>
<h1>三眼鸭的编程教室</h1>
<h2>三眼鸭的编程教室</h2>
<h1>三眼鸭的编程教室</h1>
<h2>三眼鸭的编程教室</h2>
$$answer
$$jsdemo$$
$$edit$$
<h1>三眼鸭的编程教室</h1>
<h2>三眼鸭的编程教室</h2>
<h1>三眼鸭的编程教室</h1>
<h2>三眼鸭的编程教室</h2>
<h1>三眼鸭的编程教室</h1>
<h2>三眼鸭的编程教室</h2>
<script>
let h2List = document.getElementsByTagName("h2")
for (let h2 of h2List) {
h2.style.color = "teal"
}
</script>
$$
- 将
tag="duck"
的元素设置为水鸭蓝。
<div>三眼牛</div>
<div>三眼鸡</div>
<div tag="duck">三眼鸭</div>
<div>三眼狗</div>
$$answer
$$jsdemo$$
$$edit$$
<div>三眼牛</div>
<div>三眼鸡</div>
<div tag="duck">三眼鸭</div>
<div>三眼狗</div>
<script>
let duck = document.querySelector("[tag='duck']")
duck.style.color = "teal"
</script>
$$