querySelector()

1. 基本语法

document.querySelector("选择器")

比如：

let box = document.querySelector("#box");

意思：

去整个网页（document）里面，找 id 为 box 的元素。

---

一、先回顾 CSS 选择器

你学 CSS 的时候应该见过：

1. id选择器

CSS：

#box {

}

意思：

找到：

<div id="box"></div>

---

2. class选择器

CSS：

.box {

}

意思：

找到：

<div class="box"></div>

---

3. 标签选择器

CSS：

div {

}

意思：

找到：

<div></div>

---

而 querySelector() 就是直接使用这些 CSS 选择器。

---

二、获取 id 元素

HTML：

<h1 id="title">
    学习JavaScript
</h1>

CSS 找它：

#title

所以 JS：

let h1 = document.querySelector("#title");

解释：

拆开看：

document

表示整个网页。

.querySelector()

表示寻找元素。

"#title"

表示寻找 id=title。

所以：

document.querySelector("#title")

就是：

在网页中找到 id 为 title 的元素。

---

然后：

h1.innerHTML="你好";

页面：

之前：

学习JavaScript

变成：

你好

---

三、获取 class 元素

HTML：

<p class="text">
    我是文字
</p>

CSS：

.text

注意：

class 前面必须加：

.

所以：

let p=document.querySelector(".text");

找到：

<p class="text">

---

四、获取标签元素

HTML：

<h1>
标题
</h1>

CSS：

h1

JS：

let h1=document.querySelector("h1");

注意：

标签不用加符号。

错误：

document.querySelector("#h1")

这是找：

id="h1"

不是找标签。

---

五、最重要：querySelector只能获取第一个

例如：

HTML：

<p class="text">
第一段
</p>

<p class="text">
第二段
</p>

<p class="text">
第三段
</p>

JS：

let p=document.querySelector(".text");

结果：

只得到：

<p class="text">
第一段
</p>

为什么？

因为：

querySelector = 找第一个符合条件的。

---

如果想全部获取：

使用：

document.querySelectorAll(".text");

得到：

第一段
第二段
第三段

---

六、组合选择器（非常重要）

querySelector 最大的优势：

它支持 CSS 的复杂选择器。

比如：

HTML：

<div class="box">

    <p>
        hello
    </p>

</div>

你想找 div 里面的 p。

CSS：

.box p

意思：

找到：

class为box里面的p

JS：

let p=document.querySelector(".box p");

成功找到：

<p>
hello
</p>

---

七、举一个完整例子

HTML:

<div id="box">

    <h1>
        标题
    </h1>

    <p>
        内容
    </p>

</div>

需求：

修改标题。

---

方法：

let title=document.querySelector("#box h1");


title.innerHTML="新的标题";

分析：

"#box h1"

相当于 CSS：

#box h1

意思：

找到：

id=box里面的h1

---

八、querySelector 常用写法总结

HTML	CSS写法	JS
id="box"	#box	querySelector("#box")
class="box"	.box	querySelector(".box")
div标签	div	querySelector("div")
div里面p	div p	querySelector("div p")
第一个li	li	querySelector("li")

---

九、你可以这样记

以前：

document.getElementById("box")

现在：

document.querySelector("#box")

等价。

class：

以前：

document.getElementsByClassName("box")

现在：

document.querySelector(".box")

---

最后用一句话记忆：

querySelector("CSS选择器")

看到什么 CSS 写法，就直接放进去。

例如：

CSS：

#nav .item p

JS：

document.querySelector("#nav .item p")