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>

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

总结

到此这篇关于JS中document获取元素的常用方法的文章就介绍到这了,更多相关JS中document获取元素内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JavaScript实现登录滑块验证
这篇文章主要为大家详细介绍了JavaScript实现登录滑块验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-04-04
threejs后期处理的基本使用方法之加特效
这篇文章主要给大家介绍了关于threejs后期处理的基本使用方法之加特效的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2022-01-01
纯JavaScript代码实现文本比较工具
之前项目需求需要写一个纯js文本比较工具，在此小编把代码分享在脚本之家平台供大家参考
2016-02-02
基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard
这篇文章主要介绍了基于Bootstrap的后台管理面板：Bootstrap Metro Dashboard，对Bootstrap的后台管理面板感兴趣的小伙伴们可以参考一下
2016-06-06
微信小程序实现页面左右滑动
这篇文章主要为大家详细介绍了微信小程序实现页面左右滑动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-11-11
prototype框架中美元符号$用法分析
这篇文章主要介绍了prototype框架中美元符号$用法,结合实例形式较为详细的分析了$符号的使用技巧与相关注意事项,需要的朋友可以参考下
2016-01-01
在Javascript中使用DTO的示例详解
在我们讨论实际实现之前,让我们先介绍一下DTO,它的含义是什么,何时使用以及 javascript/nodejs 项目中对它的真正需求,需要的朋友可以参考下
2023-12-12
使用SpreadJS快速清除Excel中工作表保护密码
这篇文章主要为大家介绍了使用SpreadJS快速清除Excel中工作表保护密码方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-11-11
JavaScript 井字棋人工智能实现代码
JavaScript fights back in this artificial Tic Tac Toe game. Great script to have to entertain yourself and your visitors.
2009-12-12
JS动态插入脚本和插入引用外部链接脚本的方法
js 动态插入脚本的是在页面加载时不存在，但将来的某一时刻通过修改该 DOM 动态添加的脚本。接下来通过本文给大家介绍JS动态插入脚本和插入引用外部链接脚本,需要的朋友可以参考下
2018-05-05