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