当且仅当找到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>