DOM获取元素的方法

忧郁火龙果

于 2022-06-01 22:47:08 发布

阅读量195

点赞数

CC 4.0 BY-SA版权

分类专栏： JS基础文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/LQlove1/article/details/125091278

JS基础专栏收录该内容

48 篇文章

订阅专栏

本文介绍了JavaScript中DOM操作的五个关键方法：getElementById用于根据ID选取元素，getElementsByTagName抓取标签名匹配的元素，getElementsByClassName选取类名，querySelector和querySelectorAll则提供更灵活的选择器。通过实例演示了如何在HTML中应用这些方法并展示了其返回结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、document.getElenmentById()

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        我是通过id名获取元素
    </div>
    <script>
        var id = document.getElementById('app');
        // 返回的一个获取到的元素
        console.log(id);
    </script>
</body>
</html>

展示结果：
请添加图片描述

二、document.getElenmentByTagName()

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>我是通过标签名被获取到的元素</li>
        <li>我是通过标签名被获取到的元素</li>
        <li>我是通过标签名被获取到的元素</li>
        <li>我是通过标签名被获取到的元素</li>
    </ul>
    <script>
        var tag = document.getElementsByTagName('li');
        // 返回的一个伪数组
        console.log(tag);
    </script>
</body>
</html>

演示结果：
请添加图片描述

三、document.getElenmentClassName()

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="app">
        我是通过类名被获取到的元素
    </div>
    <script>
        var app = document.getElementsByClassName('app');
        // 返回的一个对象
        console.log(app);
        console.log(typeof app);
    </script>
</body>
</html>

演示结果：

请添加图片描述

四、document.querySelector()

里面的参数是选择器，可以是标签，id，或者是类名

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        我是通过id选择器被选中的
    </div>
    <div class="app">
        我是通过类选择器被选中的
    </div>

    <p>
        我是通过标签选择器被选中的
    </p>
    <script>
        var id = document.querySelector('#app');
        var cl = document.querySelector('.app');
        var tag = document.querySelector('p');
        console.log(id);
        console.log(cl);
        console.log(tag);
    </script>
</body>
</html>

演示结果：

请添加图片描述

五、document.querySelectorAll()

获取所有元素的集合

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
 <ul>
     <li>我是被获取的第一个元素</li>
     <li>我是被获取的第二个元素</li>
     <li>我是被获取的第三个元素</li>
     <li>我是被获取的第四个元素</li>
     <li>我是被获取的第五个元素</li>
 </ul>


    <script>
        var list = document.querySelectorAll('li');
        console.log(list);
    </script>
</body>
</html>