JavaScript DOM操作：7种获取方式详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43184101/article/details/125561774

本文介绍了JavaScript中操作DOM的7种方法，包括获取HTML标签、body和head标签、通过id、class、标签名、选择器以及name属性获取元素。详细讲解了querySelector与querySelectorAll的区别。

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

文章目录

DOM

1 获取HTML标签

  let ele = document.documentElement;
  console.log(ele);

在这里插入图片描述

2 获取 body head 标签

 let ele = document.body;
    console.log(ele);

在这里插入图片描述

3 通过id获取

 <div id="cute">你可真好看</div>
 <script>
 let ele = document.getElementById('cute');
 console.log(ele);
 </script>

在这里插入图片描述

4 通过class获取对象的集合

 <div class="cute">你可真好看</div>
 <div class="cute">你可真好看</div>
 <div class="cute">你可真好看</div>
 <script>
  let ele = document.getElementsByClassName('cute');
  ele[1].addEventListener('click',function(){
        alert('你真好看');
    })
</script>

在这里插入图片描述

5通过标签获取对象的集合

 let ele = document.getElementsByTagName('div');
 ele[1].addEventListener('click',function(){
       alert('你真好看');
    })

在这里插入图片描述

6通过选择器获取 querySelector仅返回匹配的第一个元素

 let ele = document.querySelector('div');
 ele.addEventListener('click',function(){
        alert('你真好看');
    })

在这里插入图片描述

querySelectorAll返回匹配所有的对象的集合

 let ele = document.querySelectorAll('div');
 ele[2].addEventListener('click',function(){
 alert('你真好看');
    })

7通过name属性来获取的,返回对象的集合

<input type="text" name="nice">
let ele = document.getElementsByName('nice');
ele[0].addEventListener('click',function(){
alert('你真好看');
    })

DOM获取的7种方式

文章目录

DOM