常见的获取dom元素的方法

Meta.Qing

于 2024-05-10 09:10:36 发布

阅读量299

点赞数 8

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_20173195/article/details/138647178

版权

获取 DOM 元素是前端开发中非常常见的操作。以下是几种常用的方法来获取 DOM 元素，以及它们的适用场景和示例：

1. `getElementById`

用于获取具有指定 id 属性的元素。

示例

let element = document.getElementById('myId');

2. `getElementsByClassName`

用于获取具有指定 class 名的所有元素，返回一个动态的 HTMLCollection。

示例

let elements = document.getElementsByClassName('myClass');

3. `getElementsByTagName`

用于获取具有指定标签名的所有元素，返回一个动态的 HTMLCollection。

示例

let elements = document.getElementsByTagName('div');

4. `querySelector`

用于获取匹配指定 CSS 选择器的第一个元素。

示例

let element = document.querySelector('.myClass');

5. `querySelectorAll`

用于获取匹配指定 CSS 选择器的所有元素，返回一个 NodeList。

示例

let elements = document.querySelectorAll('.myClass');

6. `getElementsByName`

用于获取具有指定 name 属性的所有元素，返回一个 NodeList。

示例

let elements = document.getElementsByName('myName');

详细示例

以下是一个包含所有上述方法的详细示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Get DOM Elements Example</title>
</head>
<body>
    <div id="myId">Element with ID</div>
    <div class="myClass">First Element with Class</div>
    <div class="myClass">Second Element with Class</div>
    <p>Paragraph</p>
    <p class="myClass">Paragraph with Class</p>
    <input type="text" name="myName" value="Input Element">

    <script>
        // 获取具有指定 ID 的元素
        let elementById = document.getElementById('myId');
        console.log(elementById); // 输出: <div id="myId">Element with ID</div>

        // 获取具有指定类名的所有元素
        let elementsByClassName = document.getElementsByClassName('myClass');
        console.log(elementsByClassName); // 输出: HTMLCollection(3) [div.myClass, div.myClass, p.myClass]

        // 获取具有指定标签名的所有元素
        let elementsByTagName = document.getElementsByTagName('p');
        console.log(elementsByTagName); // 输出: HTMLCollection(2) [p, p.myClass]

        // 获取匹配指定选择器的第一个元素
        let elementByQuerySelector = document.querySelector('.myClass');
        console.log(elementByQuerySelector); // 输出: <div class="myClass">First Element with Class</div>

        // 获取匹配指定选择器的所有元素
        let elementsByQuerySelectorAll = document.querySelectorAll('.myClass');
        console.log(elementsByQuerySelectorAll); // 输出: NodeList(3) [div.myClass, div.myClass, p.myClass]

        // 获取具有指定名称的所有元素
        let elementsByName = document.getElementsByName('myName');
        console.log(elementsByName); // 输出: NodeList [input[name="myName"]]
    </script>
</body>
</html>

使用建议

getElementById: 适用于获取单个元素时，ID 在文档中应该是唯一的。
getElementsByClassName 和 getElementsByTagName: 返回的 HTMLCollection 是实时更新的，适合需要动态响应 DOM 变化的情况。
querySelector 和 querySelectorAll: 支持复杂的 CSS 选择器，适合需要精确匹配的情况。querySelectorAll 返回的 NodeList 是静态的，不会动态更新。
getElementsByName: 常用于表单元素，name 属性在表单中具有特殊意义。