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获取元素内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

js实现选中复选框文字变色的方法
这篇文章主要介绍了js实现选中复选框文字变色的方法,涉及javascript鼠标事件及页面元素的相关操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-08-08
原生js实现的金山打字小游戏（实例代码详解）
这篇文章主要介绍了原生js实现的金山打字小游戏，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-03-03
详解js中Json的语法与格式
本文详细介绍了js中Json的语法与编写格式，有需要的朋友可以看下
2016-11-11
BootStrap实现响应式布局导航栏折叠隐藏效果（在小屏幕、手机屏幕浏览时自动折叠隐藏）
这篇文章主要介绍了BootStrap实现导航栏的响应式布局，当在小屏幕、手机屏幕浏览时自动折叠隐藏的效果，非常不错，具有参考借鉴价值,对bootstrap 响应式布局导航栏功能感兴趣的朋友一起学习吧
2016-11-11
纯js实现遮罩层效果原理分析
这篇文章主要介绍了纯js实现遮罩层效果，下面就它的原理做下分析，感兴趣的朋友可以参考下
2014-05-05
jQuery实现动态添加、删除按钮及input输入框的方法
这篇文章主要介绍了jQuery实现动态添加、删除按钮及input输入框的方法,涉及jQuery事件响应及页面元素动态操作相关实现技巧,需要的朋友可以参考下
2017-04-04
JS实现鼠标框选效果完整实例
这篇文章主要介绍了JS实现鼠标框选效果,可实现鼠标点击出现框选效果的功能,同时下方实时显示框选大小,涉及javascript鼠标事件的响应与页面元素的动态运算技巧,需要的朋友可以参考下
2016-06-06
表格展示利器 Bootstrap Table实例代码
在表格导出数据中，发现设置了分页参数，导出的数据仅为表格加载的分页参数数据，于是，针对这样的情况，通过设置分页参数的值，使表格可以加载更多的数据，可达到导出所有数据的功能需求。下面通过本文给大家分享表格展示利器 Bootstrap Table
2017-09-09
js取值中form.all和不加all的区别介绍
在js里取值，可以用form.xx.value，也可以用form.all.xx.value，那么js取值中form.all和不加all有什么区别呢？下面就为大家详细介绍下
2014-01-01
JavaScript原生数组Array常用方法
在入门Vue时, 列表渲染一节中提到数组的变异方法, 其中包括push(), pop(), shift(), unshift(), splice(), sort(), reverse(), 而concat()和slice()不属于变异方法. 在这里就复习一下Array所提供的这几个方法的使用
2017-04-04