在前端开发中，我们经常需要通过选择器来获取 DOM 元素并进行操作。但是，在操作元素之前，我们需要确认所选定的元素是否存在。本文将介绍一些正确的方法来判断选择器是否匹配到了现有的 DOM 元素。
1. 使用 document.querySelector() 方法
document.querySelector() 方法接收一个 CSS 选择器作为参数，并返回第一个符合条件的 DOM 元素。如果没有找到匹配的元素，则返回 null。因此，我们可以使用以下代码来检查选择器是否匹配到了元素：
----- ------- - ---------------------------------------- -- -------- --- ----- - -- -- --------- ---- --- ------- - ---- - --------------- -------- -------- --------- -
这个方法相对简单，而且能够满足大部分场景的需求。
2. 使用 document.querySelectorAll() 方法
与 document.querySelector() 不同，document.querySelectorAll() 方法返回所有符合条件的 DOM 元素的 NodeList 对象。如果没有找到匹配的元素，则返回空的 NodeList 对象。因此，我们可以使用以下代码来检查选择器是否匹配到了元素：
----- -------- - ------------------------------------------- -- ---------------- - -- - -- -- --------- ---- --- -------- - ---- - --------------- -------- -------- --------- -
需要注意的是，document.querySelectorAll() 方法返回的是一个 NodeList 对象，而不是一个数组。如果需要使用数组的方法，我们可以将 NodeList 转换成数组：
----- ------------- - ---------------------
3. 使用 Element.matches() 方法
Element.matches() 方法用于检查一个元素是否与指定的选择器匹配。我们可以使用以下代码来检查某个元素是否与选择器匹配：
----- ------- - ---------------------------------------- -- -------- --- ---- -- --------------------------------- - -- -- --------- ---- --- ------- - ---- - --------------- -------- -------- --------- -
需要注意的是，Element.matches() 方法不会自动查找子元素。如果想要检查子元素是否匹配，需要在选择器中添加后代选择器。
结论
使用上述方法之一，我们可以正确地判断我们的选择器是否匹配到了现有的 DOM 元素。对于不同的场景，我们可以选择合适的方法来使用。同时，也可以结合多种方法来实现更复杂的需求。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/27337