JS ：获取元素的几个常用方法
本帖最后由 马黑黑 于 2024-1-10 19:16 编辑 <br /><br /><style>.ma p { margin: 10px 0; }
.ma pre { padding: 10px; background: #eee; tab-size: 4; white-space: pre-wrap; word-wrap: break-word; }
.txtRed { color: red; }
.txtBlue { color: blue; }
.txtGreen { color: green; }
#testBox { margin: 20px auto; padding: 10px; width: fit-content; border: 1px solid gray; font-size: 2em; color: purple; }
</style>
<div class="ma">
<div id="testBox">测试用 div : id="testBox"</div>
<p>通常，如果一个HTML元素带有id标识符，该标识符就是JS操控它的凭据，比如上方的div元素，JS可以这样操作它：</p>
<pre>console.log(testBox); <span class="txtGreen">/* <div id="testBox">测试用 div : id="testBox"</div> */</span></pre>
<p>console.log(元素id名) 将在浏览器的控制台打印出该标签HTML结构的完整内容，就像上述代码中的注释部分内容那样。这表明，通过元素的 id 标识名称可以直接操作该元素，比如给它换个文本颜色：</p>
<pre>testBox.style.color = 'red';</pre>
<p><button class="setColor" type="button" value="red">改变div的文本颜色为<span class="txtRed">红色</span></button></p>
<p>上面的代码，testBox 就是本文开头那个 div 的 id，直接指代那个 div。div元素的前景色即文本颜色是通过 CSS 设置的，所以 testBox.style 是指 div 对象的 style 属性，style属性下又有很多子属性，前景色就是CSS中的 color 属性，所以JS将之表达为 testBox.style.color。这种用<span style="background:orange"> . </span>来连缀表达对象的属性的方法在编程语言中很常见，初学者可以把它当成“<span class="txtRed">的</span>”字来理解：testBox <span class="txtRed">的</span> style 属性<span class="txtRed">的</span> color 属性。</p>
<p>虽然使用元素的id标识符可以直接操作该元素，不过更多的人还是使用JS内置的方法 getElementById() 方法获取元素：</p>
<pre>
var mybox = document.getElementById('testBox');
mybox.style.color = 'navy';
</pre>
<p><button class="setColor" type="button" value="navy">改变div的文本颜色为<span style="color:navy">海军蓝</span></button></p>
<p>getElementById() 方法前面要有 document，因为这个方法基于document对象。这是一个可以顾名思义的方法，通过（By）Id 获取（get）元素（Element）。还可以通过 get 标签的 ClassName、TagName、Name 等拿到元素，这类，Element 要用复数，分别写成：get<span class="txtRed">Elements</span><span class="txtBlue">ByClassName</span>()、get<span class="txtRed">Elements</span><span class="txtBlue">ByTagName</span>()、get<span class="txtRed">Elements</span><span class="txtBlue">ByName</span>()；与 getElementById() 方法不同，这些方法拿到的元素是对象集合，要通过数组下标去操作具体的元素个体。比如以本文为例，我们使用了好几个 pre 标签，现在我们来改变第二个 pre，给它加上红色边框：</p>
<pre>
let pres = document.getElementsByTagName('pre');
pres.style.border = '1px solid red';
</pre>
<p><button id="setBorder" type="button" value="red">给本文第二个pre元素添加<span class="txtRed">红色</span>边框</button></p>
<p>上面的代码，通过 document.getElementsByTagName() 方法，我们拿到了所有的 pre 标签，并记入数组变量 pres 中，然后，我们通过数组下标 1 拿到文档中的第二个 pre 标签 pres，通过它设置其边框为我们预设的样子。</p>
<p>JS还有两个万能的获取元素的方法，querySelector 和 querySelectorAll，这是ES6引入的方法，前者获得指定标识的第一个元素，后者获得指定标识的所有元素集合。指定标识可以是 id（写成 #id名称）、可以是class类名（写成 .class名称）、可以是标签名（例如div写成 div），还可以设定范围，例如 id="textBox" 元素下的第一代 p 标签，写成 #textBox > p，试看：</p>
<pre>
var mydiv = document.querySelector('#testBox');<span class="txtGreen">/* 拿到 id="testBox" 的第一个元素（理论上也是唯一的元素） */</span>
var redBox = document.querySelector('.txtRed'); <span class="txtGreen">/* 拿到 class="txtRed" 的第一个元素 */</span>
var firstP = document.querySelector('p'); <span class="txtGreen">/* 拿到文档的第一个 p 标签 */</span>
var ps = document.querySelectorAll('p'); <span class="txtGreen">/* 拿到文档中全部的 p 标签 */</span>
var mypres = document.querySelectorAll('#ma > pre'); <span class="txtGreen">/* 拿到 id="ma" 元素下的所有的第一代 pre 标签 */</span>
var myspans = document.querySelectorAll('#pa span'); <span class="txtGreen">/* 拿到 id="pa" 元素下的所有任意辈分的 span 标签 */</span>
</pre>
<p>下面给出一个实例：将本文 class="ma" 下的所有元素内的所有 button 标签的背景色变为浅绿色：</p>
<pre>
var buttonAr = document.querySelectorAll('.ma button'); <span class="txtGreen">/* 取得 class="ma" 元素下的全部 button标签 */</span>
buttonAr.forEach(button => button.style.backgroundColor = 'lightgreen'); <span class="txtGreen">/* 设置每一个pre的背景色 */</span>
</pre>
<p><button id="setBgGreen" type="button" value="lightgreen">将本文所有按钮背景色设置为浅绿色</button></p>
<p>上面第一行代码，获取所有 class="ma" 的元素下的全部 button 标签，赋值给数组变量 buttonAr，第二行用一个数组遍历方法将按钮的背景颜色（backgroundColor 或 background）变为浅绿色（lightgreen）。到目前止，本文只有一个 class="ma" 的元素，如果稍后还有且它们旗下也有 button 按钮标签，则一样会受到上面代码的影响。</p>
<p>拿到想要的HTML元素，还有其他方法，以后如果需要再介绍。</p>
</div>
<script>
setBorder.onclick = () => {
var pres = document.getElementsByTagName('pre');
pres.style.border = '1px solid red';
};
setBgGreen.onclick = () => {
var buttonAr = document.querySelectorAll('.ma button');
buttonAr.forEach(button => button.style.backgroundColor = 'lightgreen');
};
var btns = document.querySelectorAll('.setColor');
btns.forEach(btn => {
btn.onclick = () => testBox.style.color = btn.value;
});
</script>
<div class="ma"><button>后续测试用按钮：我放在另一个 class="ma" 的 div 盒子里。点我没用</button></div>
不懂这个，以后学习{:4_204:} 这个深入浅出的讲解，看了很是受益。黑黑辛苦了{:4_199:} 这种用 . 来连缀表达对象的属性的方法，初学者可以把它当成“的”字来理解
这个说法很有趣，也很形象{:4_187:} 第一代标签的说法挺难理解的。 红影 发表于 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 23:28 编辑
红影 发表于 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，探讨它和其 ...
用>指向第一代，以前从来不知道。嗯嗯，学习了{:4_187:} 红影 发表于 2024-1-11 10:21
用>指向第一代，以前从来不知道。嗯嗯，学习了
我一直在使用额，在音画帖里都出现过 马黑黑 发表于 2024-1-11 12:19
我一直在使用额，在音画帖里都出现过
你是用过啊，之前都不知道它的含义呢{:4_173:} 红影 发表于 2024-1-11 20:07
你是用过啊，之前都不知道它的含义呢
额，我没说吗 马黑黑 发表于 2024-1-11 20:55
额，我没说吗
要不，可能你说了我没记住{:4_173:} 红影 发表于 2024-1-11 22:39
要不，可能你说了我没记住
那就是我说过了 马黑黑 发表于 2024-1-11 23:31
那就是我说过了
那是当然，消得泼茶香,当时只道是寻常。现在觉得很有用{:4_173:} 红影 发表于 2024-1-12 19:46
那是当然，消得泼茶香,当时只道是寻常。现在觉得很有用
我都说过有用的话了，伟大 马黑黑 发表于 2024-1-12 19:46
我都说过有用的话了，伟大
那是当然，肯定是伟大不是大伟{:4_173:} 红影 发表于 2024-1-12 21:19
那是当然，肯定是伟大不是大伟
原来还有酱紫的道理 马黑黑 发表于 2024-1-12 21:32
原来还有酱紫的道理
呵呵，只是玩笑放松一下的。黑黑做了这么多教材，辛苦了{:4_190:}