javascript 中 document.getElementsByClassName 和 document.querySelector区别

javascript 中 document.getElementsByClassName 和 document.querySelector区别

document.getElementsByClassName 和 document.querySelector 都是 JavaScript 中常用于获取元素的方法，但它们之间有一些区别。

1. document.getElementsByClassName 是一个通过 class 名称获取元素的方法。它接收一个参数，即 class 名称，返回一个包含所有具有该 class 的元素的 NodeList（类似数组）。例如：

var elements = document.getElementsByClassName("myClass");

2. document.querySelector 是一个通过 CSS 选择器获取元素的方法。它接收一个参数，即 CSS 选择器，返回匹配该选择器的第一个元素。例如：

var element = document.querySelector(".myClass");

值得注意的是，document.querySelector 只返回匹配的第一个元素，而不是返回一个列表。

以下是两者的区别总结：

• document.getElementsByClassName 通过 class 名称获取元素，返回 NodeList。
• document.querySelector 通过 CSS 选择器获取元素，返回匹配的第一个元素。

另外，需要注意的是，无论是 document.getElementsByClassName 还是 document.querySelector，返回的都是动态的集合，当匹配的元素发生变化时，它们都会自动更新。