一种简单的搜索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();
});

这的确可以确保仅对匹配的DOM元素执行.click()，而不对NULL执行document.querySelectorAll()。 （这也是我认为对一系列匹配元素（而不仅仅是一个元素）执行一系列单击（或类似操作）的唯一方法。）

但是肯定有一种更简洁的方法来按属性搜索单个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"></div>
<div class="target-class"></div>