JS中document获取元素方法【内涵案例】

Mxin5

于 2025-02-04 21:16:52 发布

阅读量798

点赞数 2

分类专栏： Frontend 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_64210833/article/details/145444871

版权

Frontend 专栏收录该内容

21 篇文章

订阅专栏

在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>

上述这些方法可以根据不同的需求选择使用，帮助我们在JavaScript中灵活地操作DOM元素。