获取DOM元素的方法

最新推荐文章于 2025-07-02 18:07:29 发布

笑魇轻轻

最新推荐文章于 2025-07-02 18:07:29 发布

阅读量2.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： dom

本文链接：https://blog.youkuaiyun.com/weixin_45259626/article/details/105662424

vue 专栏收录该内容

36 篇文章

订阅专栏

本文介绍了JavaScript获取DOM元素的8种方法，包括getElementById、getElementsByClassName、getElementsByName、getElementsByTagName、document.documentElement、document.body、querySelector及querySelectorAll。强调了querySelector和querySelectorAll的区别，并提及在Vue中如何使用ref获取DOM节点。

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

JS获取dom方法：
1.通过ID获取（getElementById）

<div id="box"></div>
<script>
    let box= document.getElementById("box");
</script>

getElementById()括号中的不需要在前面加“#”，因为方法就决定了括号中的值是一个元素的id值。该方法返回一个DOM对象。

2.通过类名（getElementsByClassName）

<div class="box"></div>
<div class="box"></div>
<script>
    let boxCollection= document.getElementsByClassName("box");
    let box1 = boxList[0];
    let box2 = boxList[1];
</script>

getElementsByClassName()括号中的不需要在前面加 “.” ，因为方法就决定了括号中的值是一个元素的class值。该方法返回一个集合。不能直接给集合绑定事件，需要获取到集合中的某一个元素，然后再为元素绑定事件。

3.通过name属性（getElementsByName）

<div id="box">
    <input type="text" name="user" />
</div>
<script>
    let userInput= document.getElementsByName("user");
</script>

只有含有name属性的元素(表单元素)才能通过name属性获取。

4.通过标签名（getElementsByTagName）

<div id="box">
    <p>段落1</p>
    <p>段落2</p>
    <p>段落3</p>
    <p>段落4</p>
    <p>段落5</p>
    <p>段落6</p>
</div>
<script>
    let pCollection= document.getElementsByTagName("p");
</script>

该方法返回的也是一个集合。

5.获取html的方法（document.documentElement）
document.documentElement是专门获取html这个标签的

6.获取body的方法（document.body）
document.body是专门获取body这个标签的。

7.通过css选择器获取一个元素（querySelector）

<div id="box"></div>
<script>
    let box= document.querySelector("#box");
</script>

querySelector()方法括号中的值是元素的选择器，所以前面加了”#”符号，使用的是id选择器。此方法直接返回DOM对象本身。

8.通过选择器获取一组元素（querySelectorAll）

<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
<div class="box">box4</div>
<div class="box">box5</div>
<script>
    let box1= document.querySelector(".box");
    let boxes= document.querySelectorAll(".box");
</script>

querySelector()和querySelectorAll()方法括号中的取值都是选择器，但两个方法是有区别的。当有多个class相同的元素时，使用querySelector()方法只能获取到第一个class为box的元素，而querySelectorAll()获取到了所有class为box的元素集合。
总结：
所有获取DOM对象的方法中，只有getElementById()和querySelector()这两个方法直接返回的DOM对象本身，可直接为其绑定事件。

getElementXXX类型的方法，除了通过Id获取元素，其他都返回一个集合，如果需要取到具体的DOM元素，需要加索引，如：document.getElementsByClassName(“box”)[0] =>获取class为box的所有元素中的第一个DOM元素。

querySelector()与querySelectorAll()两者的联系与区别：

联系：两者括号中的取值都是选择器
区别：当有多个class相同的元素时，使用querySelector()方法只能获取到第一个class为box的元素，而querySelectorAll()获取到了所有class为box的元素集合。

vue获取dom：
我们常用ref获取

<template>
    <div>
        <canvas ref='xxx' >
    </div>
</template>
<script>
    export default{
        mounted(){
            let canvas=this.$refs.xxx;
        }
    }
</script>

<button ref="btn">获取ref</button>
 
this.$refs.btn.style.backgroundColor="#ff0000"

要在mounted中使用，因为只有在执行mounted的时候，vue已经渲染了dom节点，这个时候是可以获取dom节点的，vue中尽量不去操作dom元素，选用ref操作属性获取。