JavaScript--13 DOM 选择符(id、class) 和元素替换

一、选择符

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