hi,欢迎访问本站!
当前位置: 首页Web前端正文

js如何通过class获取div元素

墨初 Web前端 170阅读

在JavaScript脚本代码中,可以通过 document.querySelector 与 document.querySelectorAll 方法通过类名获取到div元素。这两个方法都使用CSS选择器作为参数,并返回匹配的元素。

document.querySelector:返回第一个匹配的元素。

document.querySelectorAll:返回所有匹配的元素的一个静态 NodeList。

使用示例:

<!-- 这是一个DIV -->
<div class="my-class"></div>
<script>
// 获取第一个类名为 "my-class" 的 div 元素
const divElement = document.querySelector('div.my-class');
console.log(divElement);
// 上一条语句与下面的效果相同,只是调用的方式不同
const divElement2 = document.querySelector('.my-class');
console.log(divElement2);
// 获取所有类名为 "my-class" 的 div 元素
const divElements = document.querySelectorAll('div.my-class');
console.log(divElement);
// 如果你想获取任何元素上的类名为 "my-class" 的元素,可以省略标签名
const anyElementsWithClass = document.querySelectorAll('.my-class');
console.log(anyElementsWithClass);
</script>

注意,querySelectorAll 返回的是一个静态的 NodeList,这意味着它不会自动更新。如果你在文档中动态添加或移除元素,你需要再次调用 querySelectorAll 来获取最新的元素列表。

声明:无特别说明,转载请标明本文来源!
相关推荐