SELF-Wiki: Was ist das DOM?

[ThomasM]

Hallo zusammen,

Ja, mit querySelector()/querySelectorAll() hat man ein einheitliches Interface für alle Fälle.

getElementById() ist so weit verbreitet, dass es Erwähnung verdient, wobei gesagt werden muss, dass getElementById('a') dasselbe tut wie querySelector('#a').

Das trifft auf die anderen Methoden nicht zu; die könnte man unter Sonstiges verbuchen. Einfach sagen, dass es weitere Methoden gibt (getElementsByTagName() könnte man dabei namentlich erwähnen, muss man aber nicht), die man aber nicht mehr braucht, da man ja jetzt querySelector()/querySelectorAll() hat.

Kann man für Neueinsteigende so machen, wobei die Erwähnung von getElementById(), getElementsByName(), getElementsByClassName(), getElementsByTagName() und (in speziellen Kontexten) getElementsByTagNameNS() durchaus nützlich sein kann, wenn man es etwa mit älterem Code zutun hat und Anpassungen durchführen möchte.

Erwähnenswert ist aber, dass querySelector() / querySelectorAll() wie andere Elements-Methoden nicht nur auf dem Document- sondern auch auf dem Element-Interface wirken können:

<ul id="spezielle_liste">
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
</ul>
<script>
  const ul = document.querySelector("#spezielle_liste");
  const ul_li = ul.querySelectorAll("li");
  console.log(ul_li.length); // 3
</script>

Interessanterweise klappt das mittlerweile sogar bei AJAXifizierten Inhalten, also eingelesenen XML-Strukturen. Dort war bisher xmlroot.getElementsByTagName("xmlelement") zielführend(er).

Grüße,
Thomas