JS - NodeIterator

Wspominam o nim z kronikarskiego obowiązku, nie chcemy go używać mając TreeWalkera. Gdybyśmy jednak chcieli, pokazuję jak to zrobić.

Ok, oto markup:

<ul id="root">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>
      5
      <ul id="sub-list">
        <li>6</li>
        <li>7</li>
      </ul>
    </li>
  </ul>

Wiemy, że tree walkery chodzą po drzewach, zaś nodeiteratory po tablicach. W ogóle odpalenie tego iteratora proste nie jest, nawet z dokumentacją, która zresztą nigdzie tego nie pokazuje.

Trochę się trzeba nagłowić, aby wpaść, że trzeba użyć walrusa (przypisanie jako warunek pętli, jeden znak „=”, to przed czym w C chroni Yoda Notation):

<script defer>
  const nodeIterator = document.createNodeIterator(document.getElementById("root"), NodeFilter.SHOW_ELEMENT);

  while(curr = nodeIterator.nextNode()){
    console.log(curr.textContent.trim());
    
}

</script>

Wydawało mi się, że po prostu dostaniemy jedną, spłaszczoną listę elementów. Nic bardziej mylnego, najpierw elementy od 1 do 7 jako całość, potem…

W sumie to wynika z tego, jak działa textContent…

Ok, nawet ja po kilku godzinach zmęczony dałem się złapać. Otóż textContent to jest property klasy Node (węzeł).

I textContent pomija wszystkie dzieci-elementy ALE nie pomija ich zawartości tekstowej.

Ok, zobaczmy najpierw nodeiterator:

  const nodeIterator = document.createNodeIterator(document.getElementById("root"), NodeFilter.SHOW_ELEMENT);

  while(curr = nodeIterator.nextNode()){
    console.log(curr);
    
}

//<ul id="root">
//<li>
//<li>
//<li>
//<li>
//<li>
//<ul id="sub-list">
//<li>
//<li>

A teraz zobaczmy textContent elementu root:

  console.log(document.querySelector("#root").textContent);
/*   
  1
  2
  3
  4
  
    5
    
      6
      7
    
   */

Jak widać tagi (elementy) wewnątrz są pomijane, ale nie ich zawartość tekstowa. Takie osobliwe działanie textContent.

Jeżeli komuś się NodeIteratory podobają, może je stosować. Moim zdaniem TreeWalkery są dużo lepsze, ale zapewne mniej wydajne (warto jednak zobaczyć na swoją ilość okien przeglądarki czy zakładkę performance w devtoolsach, żeby zobaczyć, jakie rzeczy w dzisiejszych czasach ogarnia przeglądarka bez problemu).

JS – NodeIterator