JavaScript DOM 选择器

在本教程中,你将学习如何在 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.bodynull

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

<!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 等此方法始终返回一个空列表。