本节目录
一、选择符
1.1 querySelector() 方法
querySelector()
方法接收一个CSS
选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回 null
。
- 获取文档中第一个
<p>
元素:
document.querySelector("p");
- 获取文档中
class="example"
的第一个元素:
document.querySelector(".example");
- 获取文档中
class="example"
的第一个<p>
元素:
document.querySelector("p.example");
- 获取文档中有
"target"
属性的第一个<a>
元素:
document.querySelector("a[target]");
- 获取文档中
ID
为"myDiv"
的元素
document.querySelector("#myDiv");
- 获取
ID
为myDIV
元素中的第一个有target
属性的<a>
元素:
var x = document.getElementById("myDIV");
x.querySelector("a[target]");
1.2 querySelectorAll() 方法
querySelectorAll()
方法接收的参数与querySelector()
方法一样,都是一个CSS
选择符,但返回的是所有匹配的元素而不仅仅是一个元素。这个方法返回的是一个 NodeList
的实例。具体来说,返回的值实际上是带有所有属性和方法的 NodeList
。
- 获取文档中所有的
<p>
元素, 并为匹配的第一个<p>
元素 (索引为 0) 设置背景颜色:
// 获取文档中所有的 <p> 元素
var x = document.querySelectorAll("p");
// 设置第一个 <p> 元素的背景颜色
x[0].style.backgroundColor = "red";
- 获取文档中所有
class="example"
的<p>
元素, 并为匹配的第一个<p>
元素 (索引为 0) 设置背景颜色:
// 获取文档中所有 class="example" 的 <p> 元素
var x = document.querySelectorAll("p.example");
// 设置 class="example" 的第一个 <p> 元素的背景颜色
x[0].style.backgroundColor = "red";
- 计算文档中
class="example"
的<p>
元素的数量(使用NodeList
对象的length
属性):
var x = document.querySelectorAll(".example").length;
- 设置文档中所有
class="example"
元素的背景颜色:
var x = document.querySelectorAll(".example");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}
- 设置文档中所有
<p>
元素的背景颜色:
var x = document.querySelectorAll("p");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}
- 查找文档中共包含
"target"
属性的<a>
标签,并为其设置边框:
var x = document.querySelectorAll("a[target]");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.border = "10px solid red";
}
- 查找每个父元素为
<div>
的<p>
元素,并为其设置背景颜色:
var x = document.querySelectorAll("div > p");
var i;
for (i = 0