JavaScript DOM 选择器

Created: October-14, 2018

在本教程中，你将学习如何在 JavaScript 中选择 DOM 元素。

JavaScript 中选择 DOM 元素

JavaScript 最常用于获取或修改页面上 HTML 元素的内容或值，以及应用某些效果，如 show，hide，animations 等。但是，在你执行任何操作之前，你需要查找或选择目标 HTML 元素。

在以下部分中，你将看到一些在页面上选择元素并使用 JavaScript 对它们执行某些操作的常用方法。

选择最顶层的元素

HTML 文档中最顶层的元素可直接作为 document 属性使用。例如，<html> 元素可以使用 document.documentElement 属性来访问该元素，而<head> 元素可以使用 document.head 属性来访问该元素， <body> 元素可以使用 document.body 属性来访问该元素。这是一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JS Select Topmost Elements</title>
</head>
<body>
    <script>
    // Display lang attribute value of html element
    alert(document.documentElement.getAttribute("lang")); // Outputs: en
    
    // Set background color of body element
    document.body.style.background = "yellow";
    
    // Display tag name of the head element's first child
    alert(document.head.firstElementChild.nodeName); // Outputs: meta
    </script>
</body>
</html>

不过要小心。如果 document.body 在 <body> 标记之前使用（例如在 <head> 标记内），它将返回 null 而不是 body 元素。因为脚本执行的时间点，浏览器不会解析 <body> 标记，所以 document.body 是 null。

让我们看一下下面的例子来更好地理解这个：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JS Document.body Demo</title>
    <script>
    alert("From HEAD: " + document.body); // Outputs: null (since <body> is not parsed yet)
    </script>
</head>
<body>
    <script>
    alert("From BODY: " + document.body); // Outputs: HTMLBodyElement
    </script>
</body>
</html>

按 ID 选择元素

你可以使用 getElementById() 方法根据其唯一 ID 选择元素。这是在 DOM 树中查找 HTML 元素的最简单方法。

以下示例选择并突出显示具有 ID 属性 id="mark" 的元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JS Select Element by ID</title>
</head>
<body>
    <p id="mark">This is a paragraph of text.</p>
    <p>This is another paragraph of text.</p>

    <script>
    // Selecting element with id mark 
    var match = document.getElementById("mark");
     
    // Highlighting element's background
    match.style.background = "yellow";
    </script>
</body>
</html>

getElementById() 如果找到匹配元素，则该方法将元素作为对象返回，或者如果在文档中找不到匹配元素，则返回 null。

注意： 任何 HTML 元素都可以具有 id 属性。该属性的值在页面中必须是唯一的，即同一页面中的两个元素不能具有相同的 ID。

按类名选择元素

同样，你可以使用 getElementsByClassName() 方法选择具有特定类名的所有元素。此方法返回具有所有给定类名的所有子元素的类数组对象。我们来看看下面的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JS Select Elements by Class Name</title>
</head>
<body>
    <p class="test">This is a paragraph of text.</p>
    This is another paragraph of text.
    <p>This is one more paragraph of text.</p>    

    <script>
    // Selecting elements with class test
    var matches = document.getElementsByClassName("test");
        
    // Displaying the selected elements count
    document.write("Number of selected elements: " + matches.length);
     
    // Applying bold style to first element in selection
    matches[0].style.fontWeight = "bold";
        
    // Applying italic style to last element in selection
    matches[matches.length - 1].style.fontStyle = "italic";
        
    // Highlighting each element's background through loop
    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 Select Elements by Tag Name</title>
</head>
<body>
    <p>This is a paragraph of text.</p>
    This is another paragraph of text.
    <p>This is one more paragraph of text.</p>   
 
    <script>
    // Selecting all paragraph elements
    var matches = document.getElementsByTagName("p");
        
    // Printing the number of selected paragraphs
    document.write("Number of selected elements: " + matches.length);
     
    // Highlighting each paragraph's background through loop
    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 Select Elements with CSS Selectors</title>
</head>
<body>
    <ul>
        <li>Bread</li>
        <li class="tick">Coffee</li>
        <li>Pineapple Cake</li>
    </ul>
        
    <script>
    // Selecting all li elements
    var matches = document.querySelectorAll("ul li");
     
    // Printing the number of selected li elements
    document.write("Number of selected elements: " + matches.length + "<hr>")
     
    // Printing the content of selected li elements
    for(var elem of matches) {  
        document.write(elem.innerHTML + "<br>");
    }
     
    // Applying line through style to first li element with class tick
    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 等此方法始终返回一个空列表。