JS获取DOM元素的八种方法(含代码,简单易懂)

远近高低各不同

已于 2023-10-17 22:51:23 修改

阅读量3.3k

点赞数 5

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

于 2023-09-16 21:46:01 首次发布

本文链接：https://blog.csdn.net/m0_74577714/article/details/132924119

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

让我为大家介绍一下获取DOM元素的方法吧！

1.document.getElementsByClassName(“元素类名”)[下标]

通过class类名获取元素，返回一个伪数组，不能使用数组操作方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div class="box">
        我是第一个box
    </div>
    <div class="box">
        我是第二个box
    </div>
</body>
<script>
    // 因为我们可能有多个类名叫做box的div,使用此方法获取时添加需要获取的元素下标,0开始
    // 返回一个伪数组,不能使用数组的操作方法
    // 记得在后面加下标,或者变量名[下标]都是可以的
    var box = document.getElementsByClassName("box")[0]//返回第一个class类名叫做box的元素
</script>
</html>

2.document.getElementById(“元素id名”)

通过元素id获取元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="box">
        id名不能重复哦
    </div>
</body>
<script>
    // 因为id就像人们的身份证一样,id名不能重复,所以不会像有的方法返回一个伪数组
    var box = document.getElementById("box")//返回一个id名叫box的元素
</script>
</html>

3.document.getElementsByTagName(“元素标签名”)[下标]

通过元素标签名获取元素，返回一个伪数组，不能使用数组操作方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div>我是第一个div标签</div>
    <div>我是第二个div标签</div>
</body>
<script>
    // 返回一个伪数组,不能使用数组的操作方法
    // 记得在后面加下标,或者变量名[下标]都是可以的
    var div = document.getElementsByTagName("div")[0]//返回第一个标签名为div的元素
</script>
</html>

4.document.getElementsByName(“元素name属性名”)[下标]

通过元素name属性名获取元素，返回一个伪数组，不能使用数组操作方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="text" name="inp" value="我是name1">
    <input type="text" name="inp" value="我是name2">
</body>
<script>
    // 返回一个伪数组,不能使用数组操作方法
    // 记得在后面加下标,或者变量名[下标]都是可以的
    var inp = document.getElementsByName("inp")[0]//返回第一个name属性叫inp的元素
</script>
</html>

5.document.querySelector(“css选择器”)

通过css选择器获取元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div class="box">
        我是第一个叫box的孩子
    </div>
    <div class="box">
        我是第二个box的孩子
    </div>
    <div id="boss">
        我是id选择器
    </div>
</body>
<script>
    // 注意是第一个
    // class获取
    var box = document.querySelector(".box")//获取第一个class类叫box的元素
    // id获取
    var boss = document.querySelector("#boss")//获取id叫做boss的元素
    // 标签获取
    var div = document.querySelector("div")//获取第一个div标签
    // 还有许多选择器方法都可以获取,但要注意是获取的第一个元素
</script>
</html>

6.document.querySelectorAll(“css选择器”)[下标]

通过css选择器获取元素，返回一个伪数组，不能使用数组操作方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div class="box">
        我是第一个叫box的孩子
    </div>
    <div class="box">
        我是第二个box的孩子
    </div>
</body>
<script>
    // 放回一个伪数组，不能使用数组操作方法
    // 记得在后面加下标,或者变量名[下标]都是可以的
    // class获取
    var box = document.querySelectorAll(".box")[0]//获取第一个class类叫box的元素
    // 标签获取
    var div = document.querySelectorAll("div")[0]//获取第一个div标签
</script>
</html>

七、document.body

获取body标签

    // 获取body标签
    var body = document.body
    console.log(body);

在这里插入图片描述

八、document.documentElement

获取整个html标签

 	// 获取html
    var html = document.documentElement
    console.log(html)

在这里插入图片描述

感谢各位阅读，如有什么错误的地方，可以向我指出，谢谢大家！