JS DOM选择器 – JavaScript教程 JSDOM选择器|JavaScript

上一章JavaScript教程请查看：JS DOM节点和DOM树解释
在本教程中，你将学习如何在JavaScript中选择DOM元素。
在JavaScript中选择DOM元素JavaScript最常用来获取或修改页面上HTML元素的内容或值，以及应用一些效果，如显示、隐藏、动画等。但是，在执行任何操作之前，你需要找到或选择目标HTML元素。
在下面的部分中，你将看到一些选择页面上元素的常见方法，并使用JavaScript对它们进行操作。
选择最上面的元素HTML文档中最顶层的元素可以直接作为文档document属性使用。例如，可以通过document.documentElement访问< html>元素，而< head>元素可以通过document.head属性访问，可以通过document.body属性访问< body>元素。这里有一个例子:

< !DOCTYPE html> < html lang="en"> < head> < meta charset="utf-8"> < title>JS选择最上面的元素< /title> < /head> < body> < script> // 显示html元素的lang属性值 alert(document.documentElement.getAttribute("lang")); // : en// 设置主体元素的背景颜色 document.body.style.background = "yellow"; // 显示head元素的第一个子元素的标签名 alert(document.head.firstElementChild.nodeName); // : meta < /script> < /body> < /html>

但是要小心，如果document.body在< body>标签之前使用(例如在< head>内部)，它将返回null而不是body元素。因为在执行脚本时，浏览器没有解析< body>标记，所以document.body此时为空。
让我们看一下下面的例子来更好地理解这一点:

< !DOCTYPE html> < html lang="en"> < head> < meta charset="utf-8"> < title>JS Document.body< /title> < script> alert("From HEAD: " + document.body); // : null (因为< body>还没有被解析) < /script> < /head> < body> < script> alert("From BODY: " + document.body); // : HTMLBodyElement < /script> < /body> < /html>

根据ID选择元素可以使用getElementById()方法根据元素的惟一ID选择元素，这是在DOM树中查找HTML元素的最简单方法。
下面的示例选择并突出显示ID属性ID =” mark” 的元素。

< !DOCTYPE html> < html lang="en"> < head> < meta charset="utf-8"> < title>JS通过ID选择元素< /title> < /head> < body> < p id="mark">这是一段文字< /p> < p>这是另一段文字< /p>< script> // 选择带有id mark的元素 var match = document.getElementById("mark"); // 突出元素的背景 match.style.background = "yellow"; < /script> < /body> < /html>

getElementById()方法将返回元素作为一个对象如果匹配的元素被发现，或null如果文档中没有发现匹配的元素。
注意: 任何HTML元素id属性。这个属性的值必须是唯一的在一个页面即同一页面中没有两个元素可以有相同的ID。
选择元素的类名【JS DOM选择器 – JavaScript教程】类似地，你可以使用getElementsByClassName()方法来选择所有元素在特定的类名，这个方法返回一个数组类对象的所有子元素都给定的类名。让我们看看下面的例子:

< !DOCTYPE html> < html lang="en"> < head> < meta charset="utf-8"> < title>JS根据类名选择元素< /title> < /head> < body> < p class="test">一段文字.< /p> < div class="block test">另一段文字.< /div> < p>文本段落.< /p>< script> // 用类test选择元素 var matches = document.getElementsByClassName("test"); // 显示选中的元素总数 document.write("Number of selected elements: " + matches.length); // 对选择的第一个元素应用粗体样式 matches[0].style.fontWeight = "bold"; // 对选择的最后一个元素应用斜体样式 matches[matches.length - 1].style.fontStyle = "italic"; // 通过循环突出显示每个元素的背景 for(var elem in matches) { matches[elem].style.background = "yellow"; } < /script> < /body> < /html>

根据标签名称选择元素还可以使用getElementsByTagName()方法通过标签名选择HTML元素，此方法还返回具有给定标签名的所有子元素的类似数组的对象。

< !DOCTYPE html> < html lang="en"> < head> < meta charset="utf-8"> < title>JS根据标签名选择元素< /title> < /head> < body> < p>文本段落1.< /p> < div class="test">文本段落2.< /div> < p>文本段落3.< /p> < script> // 选择所有段落元素 var matches = document.getElementsByTagName("p"); // 打印选定段落的数量 document.write("Number of selected elements: " + matches.length); // 通过循环突出显示每个段落的背景 for(var elem in matches) { matches[elem].style.background = "yellow"; } < /script> < /body> < /html>

使用CSS选择器选择元素你可以使用querySelectorAll()方法来选择与指定的CSS选择器匹配的元素，CSS选择器提供了一种非常强大和有效的方式来选择文档中的HTML元素，请查看CSS教程部分以了解更多关于它们的信息。
此方法返回与指定选择器匹配的所有元素的列表，你可以检查它就像任何数组，如下面的例子所示:

< !DOCTYPE html> < html lang="en"> < head> < meta charset="utf-8"> < title>JS使用CSS选择器选择元素< /title> < /head> < body> < ul> < li>Bread< /li> < li class="tick">Coffee< /li> < li>Pineapple Cake< /li> < /ul>< script> // 选择所有的li元素 var matches = document.querySelectorAll("ul li"); // 打印所选li元素的数量 document.write("Number of selected elements: " + matches.length + "< hr>")// 打印所选li元素的内容 for(var elem of matches) { document.write(elem.innerHTML + "< br>"); }// 通过样式将行应用到第一个带有类标记的li元素 matches = document.querySelectorAll("ul li.tick"); matches[0].style.textDecoration = "line-through"; < /script> < /body> < /html>

注意: querySelectorAll()方法也支持CSS伪类，比如:first-child、:last-child、:hover等等。但是，对于CSS伪元素，如::before，::after，::first-line等，这个方法总是返回一个空列表。