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

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

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

前言

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

1. 通過(guò)ID獲取元素

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

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

2. 通過(guò)類名獲取元素

document.getElementsByClassName() 方法用于通過(guò)元素的 class 屬性獲取一個(gè)元素集合（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>
        // 通過(guò)類名獲取元素集合
        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. 通過(guò)標(biāo)簽名獲取元素

document.getElementsByTagName() 方法用于通過(guò)元素的標(biāo)簽名獲取一個(gè)元素集合（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>
        // 通過(guò)標(biāo)簽名獲取元素集合
        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. 通過(guò)CSS選擇器獲取單個(gè)元素

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

<!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>
        // 通過(guò)CSS選擇器獲取第一個(gè)匹配的元素
        var element = document.querySelector(".myClass");
        console.log(element.innerHTML); // 輸出：Item 1
    </script>
</body>
</html>

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

document.querySelectorAll() 方法用于通過(guò)CSS選擇器獲取所有匹配的元素，返回一個(gè) 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>
        // 通過(guò)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. 通過(guò)名稱屬性獲取元素

document.getElementsByName() 方法用于通過(guò)元素的 name 屬性獲取一個(gè)元素集合（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>
        // 通過(guò)名稱屬性獲取元素集合
        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ù)不同的需求選擇使用，幫助我們?cè)贘avaScript中靈活地操作DOM元素。