js如何通过class获取div元素
墨初 Web前端 188阅读
在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 来获取最新的元素列表。