选择 DOM 元素
要想修改 HTML 元素,我们需要先在 DOM 树中找到它。而找元素的方式,需要用到一个叫做选择器的概念。
选择器
如果你了解 CSS,那么很简单,DOM 的选择器和 CSS 中的一模一样,不了解也关系,我们来看看几个常用的选择器。
标签选择器
这种选择器,可以根据 HTML 的标签名来选择元素,例如使用 p
可以选择 <p>
元素,使用 div
可以选择 <div>
元素:
<div>
<p>hello</p>
</div>
class 选择器
这种选择器,可以通过 html 的 class
属性来选择元素,语法是 .
+ class
名字,例如 .text
可以选择下方的 <p>
元素:
<div>
<p class="text">hello</p>
</div>
多个 class 则可以连续使用 class 选择器进行选择,例如 .text.bold
:
<div>
<p class="text bold">hello</p>
</div>
ID 选择器
ID 选择器可以通过 HTML 的 id
属性值来选择元素,因为 ID 原则上必须是唯一的,所以这种选择器可以唯一的选择一个元素。ID 选择器的语法是 #
+ ID 值
,例如 #text
可以选择下方的 <p>
元素:
<div>
<p id="text">hello</p>
</div>
多个选择器
如果要同时选择多个元素,可以使用多个选择器,它们之间使用 ,
隔开,例如 .container, #text
可以同时选择下方的 div 和 p 元素:
<div class="container">
<p id="text">hello</p>
</div>