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