JS的DOM操作二：选择DOM元素-CFANZ编程社区

学习网址：https://zxuqian.cn/javascript/additional-content/dom/select-dom-elements/

选择 DOM 元素

要想修改 HTML 元素，需要先在 DOM 树中找到它。而找元素的方式，需要用到一个叫做选择器的概念。

选择器相关概念和类型

DOM 的选择器和 CSS 中的一模一样。下面是常见的选择器讲解：（html和css代码）

标签选择器

这种选择器，可以根据 HTML 的标签名来选择元素，例如使用 p 可以选择 <p> 元素，使用 div 可以选择 <div> 元素：

<div>
   <p>hello</p>
 </div>

div{
     color:red;
 }

JS的DOM操作二：选择DOM元素_JavaScript

class 选择器

这种选择器，可以通过 html 的 class 属性来选择元素，语法是 . + class 名字，例如 .text 可以选择下方的 <p> 元素：

<div>
   <p class="text">hello</p>
 </div>

.text{
     color:blue;
     font-size:10px;
 }

JS的DOM操作二：选择DOM元素_HTML_02

多个 class 则可以连续使用 class 选择器进行选择，例如 .text.bold:

<div>
   <p class="text bold">hello</p>
 </div>

.text.bold{
     color:rgb(134, 24, 244);
     font-size:30px;
     padding:0;
     margin:0 auto;
 }
 /*  两个text中间不要加空格，代表着同时选择具有text和bold类的html元素（也就是兄弟选择器）
     加了空格就代表着是要先选择text元素之后，再去匹配text内部class为bold的元素。（也就是后代选择器）
 */

JS的DOM操作二：选择DOM元素_HTML_03

ID 选择器

ID 选择器可以通过 HTML 的 id 属性值来选择元素，因为 ID 原则上必须是唯一的，所以这种选择器可以唯一的选择一个元素。ID 选择器的语法是 # + ID 值，例如 #text 可以选择下方的 <p> 元素：

<div>
   <p id="text">hello</p>
 </div>

#text{
     text-align:center; // 对齐方式
 }
 /* id选择器使用井号（#）开头，后面跟着选择器名称 */

JS的DOM操作二：选择DOM元素_属性值_04

JS的DOM操作二：选择DOM元素_JavaScript_05

多个选择器

如果要同时选择多个元素，可以使用多个选择器，它们之间使用 , 隔开，例如 .container, #text 可以同时选择下方的 div 和 p 元素：

<div class="container">
   <p id="text">hello</p>
 </div>

container , #text{
     line-height:10px; // 文本的行间距
 }
 /* ，的意思就是同时选择，也就是并列的意思（可以这样理解） */

关系选择器

关系选择器用于选择和某个元素，有对应关系的元素，例如选择某个元素下的所有子元素、直接子元素，或者选择相邻的元素等。关系选择器的两边可以是标签、id、class 选择器中的任意一种。

对于这段代码，我们分别看一下各个关系选择器的语法和作用：

<div>
   <p class="text">hello</p>
   <p class="para">world<p class="nested">你好</p></p>
 </div>

<p class="para">world<p class="nested">你好</p></p>
 // 这段代码的效果是在<p class="para">world</p>标签内嵌套了另一个<p class="nested">你好</p>标签。
 // 实际上不就是两段p标签罢了。他这里选择嵌套应该是为了给关系选择器示例的。（CSS）

JS的DOM操作二：选择DOM元素_JavaScript_06

常见选择器：

子元素选择器，是在父子元素选择器之间加个空格，例如 div p 可以选择div中所有的 p 元素。(不包括div)

div p{
     text-shadow: 2px 2px 5px red;// 文本阴影，给文本添加阴影效果，可以接受多个阴影值，各个阴影值之间用逗号进行分隔。每个阴影值由元素在X和Y方向的偏移量、模糊半径和颜色值这三个部分组成。
     // 2px 2px 5px red; ---> 水平向右移动2像素，垂直向下移动2像素，颜色为红色的阴影，阴影具有5像素的模糊效果
 }

直接子元素选择器，是在父子元素之间加上 >，例如 div > p 可以选择 div 下的第一级 p 元素，但不能选择嵌套的 p 元素，即 class 为 nested 的 p 元素。（就是说只能选择div元素下的第一层p元素，第二层之下的也就是第一层嵌套的p元素是没有用的）

div > p{
     text-decoration: overline;
     // 设置文本装饰效果为上划线。
 }

JS的DOM操作二：选择DOM元素_选择器_07

'''
 在前端开发中，常用的关系选择器有以下几种：
     包含选择器（A B）：例如ul li{}，表示选择所有ul元素的直接子元素li。
     子选择器（A>B）：表示选择A元素的直接子元素B。例如div>a，将选中所有div的直接子元素a。
     相邻选择器（A+B）：表示选取与A元素紧邻的兄弟元素B。比如A + B，这里的A和B都为元素选择器，将会选中所有与A元素紧邻的B元素。
     兄弟选择器（A~B）：这是一种通用兄弟选择器，对A后面的所有同级元素生效，也只能向下选择。例如A ~ B，这里的A和B都为元素选择器，将会选中所有A元素后面的同级元素B。
     后代选择器（A B）：表示选择A元素的所有后代元素B。例如div a，将选中div下的所有a元素。
     子代选择器（A > B）：只对儿子子元素生效，其余后代不生效。例如div > p > a，将选中div下的p元素的直接子元素a。
 '''

document选择一个元素

选择元素可以通过 document 对象的 querySelector 方法来实现，它接收选择器字符串作为参数，返回第一个匹配的元素的 DOM 实例。

例如下方示例选择了 class 为 text 的元素：

<div>
   <p class="text">hello</p>
 </div>

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

JS的DOM操作二：选择DOM元素_HTML_08

在 JavaScript 中保存的 p 元素(变量)，就是 <p> 标签在 JavaScript 中的对象表示形式，打印一下它，输出的就是原始的 HTML 代码。

document.getElementById()

通过 id 来选择 DOM 元素，可以使用 document.getElementById() 方法，这种方式比使用 querySelector() 的效率略高。它接收要选择的元素的 id 属性值作为参数，不带 #，返回元素的 DOM 实例。例如：

<p id="text">这是一个段落</p>
 
 <script>
   const p = document.getElementById("text");
 </script>

JS的DOM操作二：选择DOM元素_属性值_09

选择所有元素

如果选择器可以选择多个元素，想获取所有匹配的元素，可以使用 document.querySelectorAll() 方法，它会把所有符合条件的元素实例，作为一个集合返回。

例如，选择页面上所有的 <a> 标签，并打印一下结果：

<div>
     <p>
         <span>
             <a href="https://www.baidu.com">百度</a>
             <a href="https://www.baidu.com">百度</a>
             <a href="https://www.baidu.com">百度</a>
             <a href="https://www.baidu.com">百度</a>
         </span>
     </p>
 </div>
 <a href="https://www.baidu.com">bnaidu</a>
 
 const alla = document.querySelectorAll("a");
 console.log(alla);

JS的DOM操作二：选择DOM元素_HTML_10

JS的DOM操作二：选择DOM元素_属性值_11

在获取到所有元素的集合之后，可以通过集合的 forEach() 方法来遍历，跟数组一样：

document.querySelectorAll("a").forEach(a => {
     console.log(a);
 });

JS的DOM操作二：选择DOM元素_HTML_12

JS的DOM操作二：选择DOM元素_属性值_13

或者也可以使用下标，访问集合中特定的元素：

JS的DOM操作二：选择DOM元素_属性值_14

JS的DOM操作二：选择DOM元素_HTML_15

document.getElementsByClassName()

如果通过 class 属性值来选择元素，还可以使用 document.getElementsByClassName() 方法。因为 class 可以在多个元素中重复使用，所以这里方法中的 elements 是复数形式，获取所有包含这个 class 选择器的元素。它的参数接收 class 属性值，不带 . 号，例如：

<p class="text">这是一个段落</p>
 <p class="text">这是另一个段落</p>
 
 <script>
   const p = document.getElementsByClassName("text")
 </script>

JS的DOM操作二：选择DOM元素_DOM选择器_16

document.getElementsByTagName()

如果通过标签名来选择元素，也还可以使用 document.getElementsByTagName() 方法，传递要选择的 HTML 标签的名字，返回所有符合条件的 DOM 元素的集合：

<p>这是一个段落</p>
 <p>这是另一个段落</p>
 
 <script>
   const p = document.getElementsByTagName("p")
 </script>

JS的DOM操作二：选择DOM元素_选择器_17

小结

document.querySelector() 来选择 1 个元素
document.querySelectorAll() 来选择所有符合条件的元素
document.getElementsByClassName()来选择所有符号条件的class元素
document.getElementsByTagName()来选择符合条件的标签名

总结

DOM 的选择器和 CSS 中的一模一样。
HTML中的ID属性最好是唯一的，也就是只出现一次。（CSS类名和HTML的id属性可以为同一个）
英文单词

document：文件、文档、文献、证件、记录
get：得到、获得
element：元素、要素、基础
tag：标签、标记、符号、名字
query：查询、疑问、问号、询问
select：选择、选取、挑选（s le c t）
selector：选择器、转换器（s le t）