javascript - 更改具有相同类的 DOM 元素的最快方法

Question

我有一个复杂的 HTML 结构，其中包含很多嵌套的 div。我希望能够在页面的不同位置更改页面中多次存在但都具有相同的 css 类和 html 的元素。我目前做的是：

var nodes = mutation.target.querySelectorAll(NODES_SELECTOR);
  for(var i=0; i<nodes.length; i++) {
    var node = nodes[i];
    var newDiv = document.createElement('div');
    newDiv.className = 'new-div';
    newDiv.innerHTML = '<div class=\'content-div\'></div>';

    /* Add various event listeners */
    newDiv.addEventListener('click', function (event) {
    // Do stuff
    });
    node.appendChild(newDiv);
 }

目前这非常慢，我认为问题来自在每次迭代中操作 dom。

我读了这个答案https://stackoverflow.com/a/18394084/8600207，但我不知道如何将这个应用于我的案例，因为在这个答案中，修改发生在 1 个元素上，而不是像我的案例那样的多个元素。有没有办法为多个元素操作一次 dom？（在 for 循环之外） PS：如果它解决了问题，我可以使用 jQuery，但我不能更改 HTML。

标签： javascriptjqueryhtmlcssdom