Самый быстрый способ изменить элементы DOM, которые имеют тот же класс - PullRequest
0 голосов
/ 09 января 2020

У меня сложная структура 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 на каждой итерации.

Я прочитал этот ответ { ссылка } , но я не могу понять, как применить это для моего случая, так как в этом ответе изменение происходит с 1 элементом, а не с несколькими, как в моем случае. Есть ли способ манипулировать дом один раз для нескольких элементов? (за исключением l oop) PS: я мог бы использовать jQuery, если это решит проблему, но я не могу изменить HTML.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...