JS中document獲取元素的常用方法(附案例)

更新時間：2025年05月09日 11:00:16 作者：Mxin5

這篇文章主要介紹了JS中document獲取元素的常用方法,并提供了具體的示例代碼,這些方法涵蓋了從單個元素到多個元素的獲取方式,需要的朋友可以參考下

前言

在JavaScript中，document對象提供了多種方法來獲取頁面中的元素。以下是一些常用的獲取元素的方法，以及具體的示例代碼：

1. 通過ID獲取元素

document.getElementById() 方法用于通過元素的 id 屬性獲取單個元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document Example</title>
</head>
<body>
    <div id="myDiv">Hello World</div>
    <script>
        // 通過ID獲取元素
        var element = document.getElementById("myDiv");
        console.log(element.innerHTML); // 輸出：Hello World
    </script>
</body>
</html>

2. 通過類名獲取元素

document.getElementsByClassName() 方法用于通過元素的 class 屬性獲取一個元素集合（HTMLCollection）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document Example</title>
</head>
<body>
    <div class="myClass">Item 1</div>
    <div class="myClass">Item 2</div>
    <script>
        // 通過類名獲取元素集合
        var elements = document.getElementsByClassName("myClass");
        for (var i = 0; i < elements.length; i++) {
            console.log(elements[i].innerHTML); // 輸出：Item 1 和 Item 2
        }
    </script>
</body>
</html>

3. 通過標簽名獲取元素

document.getElementsByTagName() 方法用于通過元素的標簽名獲取一個元素集合（HTMLCollection）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document Example</title>
</head>
<body>
    <div>Div 1</div>
    <div>Div 2</div>
    <script>
        // 通過標簽名獲取元素集合
        var elements = document.getElementsByTagName("div");
        for (var i = 0; i < elements.length; i++) {
            console.log(elements[i].innerHTML); // 輸出：Div 1 和 Div 2
        }
    </script>
</body>
</html>

4. 通過CSS選擇器獲取單個元素

document.querySelector() 方法用于通過CSS選擇器獲取第一個匹配的元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document Example</title>
</head>
<body>
    <div class="myClass">Item 1</div>
    <div class="myClass">Item 2</div>
    <script>
        // 通過CSS選擇器獲取第一個匹配的元素
        var element = document.querySelector(".myClass");
        console.log(element.innerHTML); // 輸出：Item 1
    </script>
</body>
</html>

5. 通過CSS選擇器獲取所有匹配的元素

document.querySelectorAll() 方法用于通過CSS選擇器獲取所有匹配的元素，返回一個 NodeList。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document Example</title>
</head>
<body>
    <div class="myClass">Item 1</div>
    <div class="myClass">Item 2</div>
    <script>
        // 通過CSS選擇器獲取所有匹配的元素
        var elements = document.querySelectorAll(".myClass");
        for (var i = 0; i < elements.length; i++) {
            console.log(elements[i].innerHTML); // 輸出：Item 1 和 Item 2
        }
    </script>
</body>
</html>

6. 通過名稱屬性獲取元素

document.getElementsByName() 方法用于通過元素的 name 屬性獲取一個元素集合（NodeList）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document Example</title>
</head>
<body>
    <input type="text" name="myInput" value="Input 1">
    <input type="text" name="myInput" value="Input 2">
    <script>
        // 通過名稱屬性獲取元素集合
        var elements = document.getElementsByName("myInput");
        for (var i = 0; i < elements.length; i++) {
            console.log(elements[i].value); // 輸出：Input 1 和 Input 2
        }
    </script>
</body>
</html>

上述這些方法可以根據(jù)不同的需求選擇使用，幫助我們在JavaScript中靈活地操作DOM元素。