JS ：获取元素的几个常用方法

马黑黑

测试用 div : id="testBox"

通常，如果一个HTML元素带有id标识符，该标识符就是JS操控它的凭据，比如上方的div元素，JS可以这样操作它：

console.log(testBox); /* <div id="testBox">测试用 div : id="testBox"</div> */

console.log(元素id名) 将在浏览器的控制台打印出该标签HTML结构的完整内容，就像上述代码中的注释部分内容那样。这表明，通过元素的 id 标识名称可以直接操作该元素，比如给它换个文本颜色：

testBox.style.color = 'red';

改变div的文本颜色为红色

上面的代码，testBox 就是本文开头那个 div 的 id，直接指代那个 div。div元素的前景色即文本颜色是通过 CSS 设置的，所以 testBox.style 是指 div 对象的 style 属性，style属性下又有很多子属性，前景色就是CSS中的 color 属性，所以JS将之表达为 testBox.style.color。这种用 . 来连缀表达对象的属性的方法在编程语言中很常见，初学者可以把它当成“的”字来理解：testBox 的 style 属性的 color 属性。

虽然使用元素的id标识符可以直接操作该元素，不过更多的人还是使用JS内置的方法 getElementById() 方法获取元素：

var mybox = document.getElementById('testBox');
mybox.style.color = 'navy';

改变div的文本颜色为海军蓝

getElementById() 方法前面要有 document，因为这个方法基于document对象。这是一个可以顾名思义的方法，通过（By）Id 获取（get）元素（Element）。还可以通过 get 标签的 ClassName、TagName、Name 等拿到元素，这类，Element 要用复数，分别写成：getElementsByClassName()、getElementsByTagName()、getElementsByName()；与 getElementById() 方法不同，这些方法拿到的元素是对象集合，要通过数组下标去操作具体的元素个体。比如以本文为例，我们使用了好几个 pre 标签，现在我们来改变第二个 pre，给它加上红色边框：

let pres = document.getElementsByTagName('pre');
pres[1].style.border = '1px solid red';

给本文第二个pre元素添加红色边框

上面的代码，通过 document.getElementsByTagName() 方法，我们拿到了所有的 pre 标签，并记入数组变量 pres 中，然后，我们通过数组下标 1 拿到文档中的第二个 pre 标签 pres[1]，通过它设置其边框为我们预设的样子。

JS还有两个万能的获取元素的方法，querySelector 和 querySelectorAll，这是ES6引入的方法，前者获得指定标识的第一个元素，后者获得指定标识的所有元素集合。指定标识可以是 id（写成 #id名称）、可以是class类名（写成 .class名称）、可以是标签名（例如div写成 div），还可以设定范围，例如 id="textBox" 元素下的第一代 p 标签，写成 #textBox > p，试看：

var mydiv = document.querySelector('#testBox');  /* 拿到 id="testBox" 的第一个元素（理论上也是唯一的元素） */
var redBox = document.querySelector('.txtRed'); /* 拿到 class="txtRed" 的第一个元素 */
var firstP = document.querySelector('p'); /* 拿到文档的第一个 p 标签 */
var ps = document.querySelectorAll('p'); /* 拿到文档中全部的 p 标签 */
var mypres = document.querySelectorAll('#ma > pre'); /* 拿到 id="ma" 元素下的所有的第一代 pre 标签 */
var myspans = document.querySelectorAll('#pa span'); /* 拿到 id="pa" 元素下的所有任意辈分的 span 标签 */

下面给出一个实例：将本文 class="ma" 下的所有元素内的所有 button 标签的背景色变为浅绿色：

var buttonAr = document.querySelectorAll('.ma button'); /* 取得 class="ma" 元素下的全部 button标签 */
buttonAr.forEach(button => button.style.backgroundColor = 'lightgreen'); /* 设置每一个pre的背景色 */

将本文所有按钮背景色设置为浅绿色

上面第一行代码，获取所有 class="ma" 的元素下的全部 button 标签，赋值给数组变量 buttonAr，第二行用一个数组遍历方法将按钮的背景颜色（backgroundColor 或 background）变为浅绿色（lightgreen）。到目前止，本文只有一个 class="ma" 的元素，如果稍后还有且它们旗下也有 button 按钮标签，则一样会受到上面代码的影响。

拿到想要的HTML元素，还有其他方法，以后如果需要再介绍。

马黑黑

后续测试用按钮：我放在另一个 class="ma" 的 div 盒子里。点我没用

侃大山

不懂这个，以后学习

红影

这个深入浅出的讲解，看了很是受益。黑黑辛苦了

红影

这种用 . 来连缀表达对象的属性的方法，初学者可以把它当成“的”字来理解
这个说法很有趣，也很形象

红影

第一代标签的说法挺难理解的。

马黑黑

红影 发表于 2024-1-10 21:14
第一代标签的说法挺难理解的。

举个栗子

<div>
    <div>第一代子元素</div>
    <div>
        <div>第二代子元素</div>
        <div>
            <p>第三代子元素</p>
        </div>
    </div>
    <p>第一代子元素></p>
</div>

红影

马黑黑 发表于 2024-1-10 21:25
举个栗子

原来是套在里面的层级一点点下降。

马黑黑

红影 发表于 2024-1-10 22:52
原来是套在里面的层级一点点下降。

其实早说过的，元素的关系是父子孙关系。针对一个web页，最外层的一般是 body；针对一个div，探讨它和其子孙的关系，儿子是第一层子元素，儿子的儿子是第二层子元素，儿子的儿子的儿子是第三层子元素。
如果我们查找一个div的所有层级的div元素，设父 div 的 id="papa"，用querySelectorAll 的话，这么构建查询字符：

var divs = document.querySelectorAll('#papa div');

如果我们只需要拿到 papa 下的第一层也就是第一代子div元素：

var divs = document.querySelectorAll('#papa > div');

这完全遵循 CSS 的规范：

#papa div { color: red; } /* papa下的所有div文本颜色为红色 */

#papa > div { color: red; } /* papa下的第一代子div文本颜色为红色 */

也就是说，querySelector/All 的查询方法，与CSS的结合更为紧密。

红影

马黑黑 发表于 2024-1-10 23:21
其实早说过的，元素的关系是父子孙关系。针对一个web页，最外层的一般是 body；针对一个div，探讨它和其 ...

用>指向第一代，以前从来不知道。嗯嗯，学习了

马黑黑

红影 发表于 2024-1-11 10:21
用>指向第一代，以前从来不知道。嗯嗯，学习了

我一直在使用额，在音画帖里都出现过

红影

马黑黑 发表于 2024-1-11 12:19
我一直在使用额，在音画帖里都出现过

你是用过啊，之前都不知道它的含义呢

马黑黑

红影 发表于 2024-1-11 20:07
你是用过啊，之前都不知道它的含义呢

额，我没说吗

红影

马黑黑 发表于 2024-1-11 20:55
额，我没说吗

要不，可能你说了我没记住

马黑黑

红影 发表于 2024-1-11 22:39
要不，可能你说了我没记住

那就是我说过了

红影

马黑黑 发表于 2024-1-11 23:31
那就是我说过了

那是当然，消得泼茶香,当时只道是寻常。现在觉得很有用

马黑黑

红影 发表于 2024-1-12 19:46
那是当然，消得泼茶香,当时只道是寻常。现在觉得很有用

我都说过有用的话了，伟大

红影

马黑黑 发表于 2024-1-12 19:46
我都说过有用的话了，伟大

那是当然，肯定是伟大不是大伟

马黑黑

红影 发表于 2024-1-12 21:19
那是当然，肯定是伟大不是大伟

原来还有酱紫的道理

红影

马黑黑 发表于 2024-1-12 21:32
原来还有酱紫的道理

呵呵，只是玩笑放松一下的。黑黑做了这么多教材，辛苦了