搜索 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() returns a 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>

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

Concise way to search for DOM element and perform action on it if and only if it is found?

javascript

dom

dom-manipulation

selectors-api