当且仅当找到DOM元素并对其执行操作的简洁方法？

Question

我正在使用纯 JavaScript（无 jQuery）执行 DOM 操作，我需要在其中搜索一个项目，如果找到，则对其执行操作，例如单击它。

我不应该这样做：

document.querySelector('.target-class').click();

...因为如果找不到该元素，那么我会得到一个错误，即，Uncaught TypeError: Cannot read property 'click' of null

另一方面，我可以这样做：

var el = document.querySelector('.target-class');

if (el) {

    el.click();    

}

...但这是为单一目的创建一个变量，并且似乎很浪费。

另一方面，这避免了创建单一用途的变量，但似乎有点矫枉过正：

Array.prototype.forEach.call(document.querySelectorAll('.target-class'), function (element) {

    element.click();

});

这确实具有确保.click()仅在匹配的 DOM 元素上执行而不是在 NULL 上执行的好处。（这也是我能想到的对一系列匹配元素执行一系列点击（或类似操作）的唯一方法，而不仅仅是一个元素。）

但是肯定有一种更简洁的方法可以按属性搜索单个 DOM 元素，并且当且仅当找到它时才单击（）它（或类似操作）。

有任何想法吗？

Answer 1

document.querySelectorAll()返回一个NodeList，它可以是空的，并且有一个forEach方法：因此，如果您希望对多个元素应用相同的回调，这就是您所需要的（以及旧浏览器的 polyfill）。onclick = (evt) => console.log( evt.target );document.querySelectorAll('.target-class').forEach( (el) => el.click() );document.querySelectorAll('.another-class').forEach( (el) => el.click() );<div class="target-class">1</div><div class="target-class">2</div>