正确的方法：如何确定我的选择器是否匹配到现有元素

在前端开发中，我们经常需要通过选择器来获取 DOM 元素并进行操作。但是，在操作元素之前，我们需要确认所选定的元素是否存在。本文将介绍一些正确的方法来判断选择器是否匹配到了现有的 DOM 元素。

1. 使用 document.querySelector() 方法

document.querySelector() 方法接收一个 CSS 选择器作为参数，并返回第一个符合条件的 DOM 元素。如果没有找到匹配的元素，则返回 null。因此，我们可以使用以下代码来检查选择器是否匹配到了元素：

const element = document.querySelector('your-selector');
if (element !== null) {
  // do something with the element
} else {
  console.log('No matching elements found.');
}

这个方法相对简单，而且能够满足大部分场景的需求。

2. 使用 document.querySelectorAll() 方法

与 document.querySelector() 不同，document.querySelectorAll() 方法返回所有符合条件的 DOM 元素的 NodeList 对象。如果没有找到匹配的元素，则返回空的 NodeList 对象。因此，我们可以使用以下代码来检查选择器是否匹配到了元素：

const elements = document.querySelectorAll('your-selector');
if (elements.length > 0) {
  // do something with the elements
} else {
  console.log('No matching elements found.');
}

需要注意的是，document.querySelectorAll() 方法返回的是一个 NodeList 对象，而不是一个数组。如果需要使用数组的方法，我们可以将 NodeList 转换成数组：

const elementsArray = Array.from(elements);

3. 使用 Element.matches() 方法

Element.matches() 方法用于检查一个元素是否与指定的选择器匹配。我们可以使用以下代码来检查某个元素是否与选择器匹配：

const element = document.querySelector('your-selector');
if (element !== null && element.matches('your-selector')) {
  // do something with the element
} else {
  console.log('No matching elements found.');
}

需要注意的是，Element.matches() 方法不会自动查找子元素。如果想要检查子元素是否匹配，需要在选择器中添加后代选择器。

结论

使用上述方法之一，我们可以正确地判断我们的选择器是否匹配到了现有的 DOM 元素。对于不同的场景，我们可以选择合适的方法来使用。同时，也可以结合多种方法来实现更复杂的需求。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27337