Begriff gesucht: getElementById und querySelector

[Matthias Scharwies]

Servus!

• getElementById():
• getElementsByName():
• getElementsByClassName():
• getElementsByTagName():
• querySelector():
• querySelectorAll():

Diese DOM-Methoden (?) erlauben einem ja auf Elementknoten direkt zuzugreifen und somit Ankerpunkte im HTML / DOM zu finden.

Gibt es da einen Spezialbegriff für, bzw. eine gute Definition?

Herzliche Grüße

Matthias Scharwies

[bobby]

Moin,

Diese DOM-Methoden (?) erlauben einem ja auf Elementknoten direkt zuzugreifen und somit Ankerpunkte im HTML / DOM zu finden.

Laut W3C sind dies "methods in the HTML DOM".

Also spezielle HTML-DOM-Methoden

Gruß Bobby

[Rolf b]

Knifflig :)

getElementsByTagNameNS() gehört übrigens auch noch dazu.

Natürlich operieren all diese Methoden auf dem DOM, sie sind aber auf unterschiedlichen Interfaces definiert (Document, Element). Und es ist so, dass das DOM mehr erfasst als HTML Dokumente, aber manche dieser Methoden (getElementsByName) nur für (X)HTML Dokumente definiert sind. Das W3C legte 2003 dafür ein eigenes Interface HTMLDocument fest, das von Document erbt, aber WhatWG HTML Living Standard klatscht alles aufs Document-Interface.

Als Ergebnis liefern die Methoden ein Element, eine NodeList (mal live und mal nicht) oder eine HTMLCollection.

Ein Oberbegriff? Habe beim Lesen bisher keinen gefunden. DOM Methoden zum Selektieren von Elementen? Brrrr.

Rolf

[Matthias Scharwies]

Servus!

Knifflig :)

Bobby:

Laut W3C sind dies "methods in the HTML DOM".

Also spezielle HTML-DOM-Methoden

Rolf:

Ein Oberbegriff? Habe beim Lesen bisher keinen gefunden. DOM Methoden zum Selektieren von Elementen? Brrrr.

Vielen Dank Euch beiden, dass ihr's trotzdem versucht habt.

Hab heute nur gemerkt, dass selbst das geht:

      var tabs = document.querySelector('[aria-selected="true"]');
      tabs.setAttribute('aria-selected', false);

Wahnsinn! (Und wieder ein paar Wiki-Seiten, die aktualisiert, erweitert, verbessert werden müssen.)

getElementsByTagNameNS() gehört übrigens auch noch dazu.

Ja, für SVG und XML

Rolf

Herzliche Grüße

Matthias Scharwies

[Matthias Apsel]

Hallo Matthias Scharwies,

Hab heute nur gemerkt, dass selbst das geht:

      var tabs = document.querySelector('[aria-selected="true"]');
      tabs.setAttribute('aria-selected', false);

Und wenn man das Element nur an einer Stelle benötigt, reicht sogar

document.querySelector('[aria-selected="true"]').setAttribute('aria-selected', false);

Bis demnächst
Matthias

[Rolf b]

Hab heute nur gemerkt, dass selbst das geht:

      var tabs = document.querySelector('[aria-selected="true"]');
      tabs.setAttribute('aria-selected', false);

Wahnsinn! (Und wieder ein paar Wiki-Seiten, die aktualisiert, erweitert, verbessert werden müssen.)

Hm? querySelector liefert das erste Element, das ein aria-selected="true" Attribut hat. Und setAttribute manipuliert Attributwerte. Die Kombination steht nicht im Wiki, aber die drei Komponenten schon.

Nur deine Namensgebung finde ich irreführend, du schreibst "var tabs = ..." - querySelector liefert aber immer nur ein Element, die Variable sollte also eher selectedTab heißen. Wenn Du davon ausgehst, dass mehrere Elemente ein aria-selected="true" haben und alle de-selektieren willst, brauchst Du querySelectorAll und eine Schleife, weil NodeList keine jQuery-artige setAttribute Methode hat.

Im konkreten Fall sollte es aber wohl nie mehr als einen Treffer geben, ich würde annehmen, dass Tabs nicht multiselectable sind (grundsätzlich wäre ein Fall mit mehreren aria-selected="true" Widgets aber wohl denkbar, wenn ich die Spec richtig lese).

Oder habe ich die besondere Besonderheit deines Snippets übersehen?

Rolf

[Matthias Scharwies]

Servus!

Nur deine Namensgebung finde ich irreführend, du schreibst "var tabs = ..." - querySelector liefert aber immer nur ein Element, die Variable sollte also eher selectedTab heißen.

Stimmt, das werd' ich ändern!

Wenn Du davon ausgehst, dass mehrere Elemente ein aria-selected="true" haben und alle de-selektieren willst, brauchst Du querySelectorAll und eine Schleife, weil NodeList keine jQuery-artige setAttribute Methode hat.

Es geht um die zugänglichen Registerkarten.

Dort hatte ich (zu) viele DOM-Methoden, die hier zum Beispiel alle Tabs gefunden haben, um ihnen dann in einer Schleife ein mögliches aria-selected zu entfernen, bevor dann das geklickte eines erhält.

Im konkreten Fall sollte es aber wohl nie mehr als einen Treffer geben.

Genau aus diesem Grund habe ich dann gesucht und document.querySelector('[aria-selected="true"]'); gefunden - genial und viel kürzerer Code.

Oder habe ich die besondere Besonderheit deines Snippets übersehen?

Nein, ich bin oft froh, dass es überhaupt funktioniert und sehe später, dass der Code, die Auszeichnung von Variablen, etc stark verbesserungswürdig ist.

Am wochenende mach ich mich dann mal an die Verknüpfung von :focus (mit document.activeElement) und Enter-Eingabe über Tastatur.

Herzliche Grüße

Matthias Scharwies

[ThomasM]

Hallo Matthias,

Diese DOM-Methoden (?) erlauben einem ja auf Elementknoten direkt zuzugreifen und somit Ankerpunkte im HTML / DOM zu finden.

Gibt es da einen Spezialbegriff für, bzw. eine gute Definition?

Ich finde DOM-Methoden und -Eigenschaften nach wie vor plausibel. Wird auch im MDN-Artikel dazu weitgehend so bezeichnet:

»use the W3C DOM properties and methods«

»In addition to these access methods, the W3C DOM specifications provide methods for creating new elements and inserting them in a document, for creating attributes, new content, for traversing the content tree and for handling events dispatched as the user interacts with the document itself.«

Grüße,
Thomas