Разница между итерационным узлом. Children и Node.queryselectorall? ⇐ Javascript

[Anonymous]

Возможно, я неправильно понимаю этот пример, но у меня было то, что кажется ошибочным представлением о том, что запрос DOM может быть относительно довольно медленным и искал «хороший» способ удалить все выборы из списка размером с переменного размера. QuerySelectorall для итерации DOM, чтобы найти выбранных детей, а затем итерацию этой коллекции, чтобы удалить класс выбора (Method_1).
Однако, кажется, неверно. Почему это так? Или я ошибся? PrettyPrint-Override ">let
p = document.querySelector('.parent'),
f = document.createDocumentFragment(),
c = p.children
;
function populate(n,mod) {
for (let d, i =0; i < n; i++) {
d = document.createElement("DIV");
if ( i % mod === 0 ) d.className = "sel";
f.append(d);
}
p.append(f);
console.log(`populated total of ${n} having ${p.querySelectorAll('.sel').length} selected.`);
}
function method_1() {
let n = Date.now();
p.querySelectorAll('.sel').forEach( v => v.classList.remove('sel'));
console.log(`method_1 elapsed: ${Date.now() - n}`);
}
function method_2() {
let
n = Date.now(),
i,
l = c.length
;
for (i =0; i < l; i++) {
c.classList.remove('sel');
}
console.log(`method_2 elapsed: ${Date.now() - n}`);

}

populate(100000,250);
method_1()
console.log(`Remaining selected after method_1: ${p.querySelectorAll('.sel').length} selected.`);
populate(100000,250);
method_2();
console.log(`Remaining selected after method_2: ${p.querySelectorAll('.sel').length} selected.`);< /code>
< /code>
< /div>
< /div>
< /p>
Мои результаты аналогичны: < /p>
populated total of 100000 having 400 selected.
method_1 elapsed: 1
Remaining selected after method_1: 0 selected.
populated total of 100000 having 400 selected.
method_2 elapsed: 84
Remaining selected after method_2: 0 selected.


Подробнее здесь: https://stackoverflow.com/questions/797 ... electorall