Javascript中的document.queryselector与document.getelementbyid

在Javascript中，我们可以使用两种方法来获取HTML中的元素：document.querySelector与document.getElementById。这两种方法的主要区别在于他们能够获取的元素不同。

document.querySelector

document.querySelector能够通过CSS选择器来获取一组符合条件的元素，并且只会返回匹配成功的第一个元素。例如，下面的代码将会获取页面中第一个class为"example"的div元素：

const exampleDiv = document.querySelector('.example');

除了class选择器之外，你还可以使用其他CSS选择器来获取元素。

document.getElementById

document.getElementById则是通过元素的ID属性来获取一个元素。因为ID属性是唯一的，所以这个方法只会返回一个元素。

const exampleDiv = document.getElementById('example');

区别

这两种方法的主要区别在于他们能够获取的元素不同。document.querySelector可以获取一组元素，而document.getElementById只能获取一个。另外，document.querySelector可以使用各种选择器来获取元素，而document.getElementById只能使用ID属性来获取。

用法

使用document.querySelector和document.getElementById非常简单。只需要传入相应的CSS选择器或ID值，就可以获取元素了。

// 使用CSS选择器获取元素
const exampleDiv = document.querySelector('.example');

// 使用ID获取元素
const exampleDiv = document.getElementById('example');

结论

无论你使用哪种方法，获取元素的过程都是相当简单的。只要你知道选择器或ID值，就可以获取相应的元素了。但是，根据情况选择合适的方法，可以使你的代码更加优雅和高效。