logo

Živé vs. statické seznamy uzlů při dotazu na DOM.

Aktualizace DOM je v postupech vývoje webu v roce 2020 velmi běžná. Vědět, jak používat své selektory, je ještě důležitější.

TLDR;

  • Stručný přehled na .querySelectorAll a .getElementsByClassName .
  • querySelectorAll a jeho „živé“ (statické) vlastnosti.
  • .getElementsByClassName a jeho "živé" vlastnosti. (a cokoliv to znamená...).

Rozdíl mezi .querySelectorAll a .getElementsByClassName

querySelectorAll

To vrátí seznam NodeList neživých uzlů pomocí platného selektoru css. Více o selektorech.

getElementsByClassName

Vrátí živý seznam NodeList s použitím názvů tříd css jako vašeho selektoru.

Co jsou to „živé“ sbírky?

Teď...prošli jsme papíry, můžeme se pobavit.

Seznamy aktivních uzlů se aktualizují jako aktualizace modelu DOM, seznamy neaktivních nebo statických uzlů se neaktualizují. Pokud se například dotazuji na DOM pro stejnou kolekci, pomocí .querySelectorAll a druhý pomocí .getElementsByClassName . Poté, co provedu aktualizaci DOM, bude změny odrážet pouze jeden seznam uzlů a druhý bude mít zastaralá data.

DING DING DING! Ve skutečnosti je to .getElementsByClassName!!!!! 

<ul>
  <li class="list-item">One</li>
  <li class="list-item">Two</li>
  <li id="three">Three</li>
</ul>

const liveElements = document.getElementsByClassName('list-item');

const notLiveElements = document.querySelectorAll('.list-item');

console.log(liveElements.length); // length of 2
console.log(notLiveElements.length); // length of 2 

document.getElementById('three').className = 'list-item';

console.log(liveElements.length); // length of 3
console.log(notLiveElements.length); // length of 2

UPOZORNĚNÍ , když jsme do uzlu přidali className s ID tři, změny se projevily v seznamu uzlů, který jsme získali pomocí .getElementsByClassName , ale NEBYLY reflektovány pomocí .querySelectorAll

Zde je kodex, se kterým si můžete hrát a sami se přesvědčit!

Poznámky k rozchodu

Při použití selektorů DOM, jako je ten výše, mějte na paměti, zda je seznam uzlů aktivní nebo statický. V zájmu tohoto článku nedoporučuji používat jeden přes druhý. Zasazuji se o to, abyste znali důsledky nástrojů, které používáte.

Pokud ve skutečnosti používáte querySelector nebo querySelectorAll , nezlobte se, jednoduše znovu zadejte dotaz na DOM, abyste získali nejnovější změny!

Děkujeme za přečtení!

Scott

Zdroje

  • https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors
  • https://codepen.io/sstern6/pen/QWjqVEQ?editors=1111