Javascript Liste der DOM-Methoden

ID, Tag-Name, class und CSS-Selektoren

DOM-Methoden greifen auf Elemente der HTML-Seite zu. Sie finden und sammeln Elemente anhand

• ihrer id,
• des Tag-Namens,
• des Namens von CSS-Klassen,
• von CSS-Selektoren.

• elem.getElementById ()

  gibt ein Element mit dem angegebenen id-Attribut zurück.

• elem.getElementsByTagName()

  Gibt eine HTMLCollection aller Kind-Elemente mit dem angegebenen tag name zurück,

• elem.getElementsByClassName

  Gibt eine HTMLCollection aller Kind-Elemente mit dem angegebenen Klassen-Namen zurück,

• elem.getElementsByTagName()

  Gibt eine HTMLCollection aller Kind-Elemente mit dem Namen des HTML-Tags zurück,

Diese vier sind die Urahnen der Javascript-Selektoren, aber die letzten drei sind überholt und werden kaum noch benutzt.

Für einfache und vor allem komplexe Selektoren ziehen wir heute querySelector und querySelectorAll vor. Mit Hilfe von CSS3-Selektoren erreichen sie jedes Element und Gruppen von Elementen genauso zuverlässig wie jQuery.

• document.querySelector()

  Gibt das erste Kind-Element zurück, das dem angegebenen CSS-Selektor entspricht.

• document.querySelectorAll()

  Gibt alle Elemente, die dem angegebenen CSS-Selektor entsprechen, als NodeList zurück.

Wenn komplexe Selektoren wie :not(a#id) oder :not(div,p) oder :has(div) browserübergreifend gebraucht werden, hilft vielleicht schon Sizzle.js, die Javascript CSS Selektor-Engine (minifiziert mit nur 4 KB) oder Select[ivizr], das ebenfalls CSS3-Selektor-Unterstützung für alte Internet Explorer bereitstellt.

• elem.closest()

  gibt das nahegelegenste übergeordnete Element – einen Vorfahren oder Container – zurück.

• elem.children

  Gibt eine Sammlung der child nodes (ohne Text- und Kommentarknoten) zurück.

• elem.firstElementChild

  Gibt das erste Kind-Element eines Elements zurück.

• elem.lastElementChild

  Gibt das letzte child-Element eines Elements zurück

• elem.nextElementSibling

  Gibt das nächste Element auf derselben Ebene im DOM-Baum zurück

• elem.parentNode

  Gibt den Parent Node eines Elements zurück

• elem.parentElement

  Gibt den Parent-Elementknoten eines Elements zurück

• elem.previousElementSibling

  Gibt den vorangehenden Elementknoten auf derselben Ebene im Baum zurück

• elem.getElementsByName

  gibt Elemente mit dem entsprechenden name-Attribut zurück

Javascript Element-Selektoren

Der Verwandschaftsgrad – children, parent, nächstes oder vorangehendes Element mit demselben parent navigieren durch das DOM.

• elem.closest()

  gibt das nahegelegenste übergeordnete Element – einen Vorfahren oder Container – zurück.

• elem.contains()

  gibt true oder false zurück, je nachdem, ob ein Knoten innerhalb eines anderen Knotens liegt.

• elem.children

  Gibt eine Sammlung der child nodes (ohne Text- und Kommentarknoten) zurück.

• elem.firstElementChild

  Gibt das erste Kind-Element eines Elements zurück.

• elem.lastElementChild

  Gibt das letzte child-Element eines Elements zurück

• elem.nextElementSibling

  Gibt das nächste Element auf derselben Ebene im DOM-Baum zurück

• elem.parentNode

  Gibt den Parent Node eines Elements zurück

• elem.parentElement

  Gibt den Parent-Elementknoten eines Elements zurück

• elem.previousElementSibling

  Gibt den vorangehenden Elementknoten auf derselben Ebene im Baum zurück

Die älteren Versionen dieser Methoden (ohne »Element« im Namen) selektierten nicht nur Element-Knoten, sondern auch Text, Kommentare und Zeilenumbrüche und das Script musste »echte Elemente« filtern. Sie können heute als überholt betrachtet werden.

• elem.firstChild

  Gibt das erste Kind eines Elements zurück

• elem.lastChild

  Gibt das letzte child node eines Elements zurück

• elem.childNodes

  Gibt eine Sammlung der child nodes (mitsamt Text- und Kommentarknoten) zurück

• elem.nextSibling

  Gibt des nächsten Knoten auf derselben Ebene im DOM-Baum zurück

• elem.previousSibling

  Gibt den vorangehenden Knoten auf derselben Ebene im Baum zurück

Methoden für die Manipulation von DOM-Elementen

Zu den typischen Aufgaben für Javascript gehört der Zugriff auf Elemente des Dokuments, um neue Elemente einzufügen, Elemente zu ersetzen oder zu entfernen.

• document.createElement()

  erzeugt ein HTML-Element mit dem Namen, der als Parameter übergeben wird.

• elem.after()

  fügt Elemente nach einem Element ein

• elem.before()

  fügt Elemente vor einem Element ein

• elem.remove()

  entfernt ein Element

• elem.replaceWith()

  ersetzt ein Element mit einem oder mehreren Elementen ohne den Weg über das Parent-Element

• elem.cloneNode()

  Klont ein Element

• elem.contentEditable

  Setzt ein Element editable oder gibt zurück, ob ein Element editable ist oder nicht
  

Die Methoden after, before, remove und reolaceWith sind jüngere Methoden des DOM, die heute von allen immergrünen Browsern unterstützt werden. Sie ersetzen ihre älteren und weniger komfortablen Vorgängerversionen.

• elem.appendChild()

  Hängt ein neues child node als letzten Knoten an das Element
  

• elem.insertBefore()

  Fügt ein neues child node vor dem angegebenen child node ein
  

• elem.removeChild()

  Entfernt einen Kindknoten vom Element
  

• elem.replaceChild()

  Ersetzt einen Kindknoten in einem Element
  

• elem.normalize()

  Fügt aufeinanderfolgende Textknoten und entfernt leere Textknoten aus einem Element
  

Element height und width

Alles, was Javascript für Abstände und Abmessungen von Elementen braucht: height und width von Elementen, wie weit vom oberen oder linken Rand des Browserfensters ist das Element entfernt

• elem.getBoundingClientRect ()

  Gibt die Höhe eines Elements mitsamt padding zurück.

• elem.getComputedStyle ()

  gibt die finalen CSS-Eigenschaften eines Elements zurück.

• elem.clientHeight

  Gibt die Höhe eines Elements mitsamt padding zurück

• elem.clientLeft

  Gibt die Breite der linken border eines Elements zurück

• elem.clientTop

  Gibt die Breite oder oberen border eines Elements zurück

• elem.clientWidth

  Gibt die Breite eines Elements mitsamt padding zurück

• elem.offsetHeight

  Gibt die Höhe eines Elements mitsamt padding, border und scrollbar zurück

• elem.offsetWidth

  Gibt die Breite eines Elements mitsamt padding, border und scrollbar zurück

• elem.offsetLeft

  Gibt den horizontalen Abstand zur Position eines Elements zurück

• elem.offsetParent

  Gibt des Abstand zum Container eines Elements zurück

• elem.offsetTop

  Gibt den verticalen Abstand zurück

• elem.scrollHeight

  Gibt die Höhe eines Elements mitsamt padding (aber ohne margin) sowie von Inhalt, der im Browserfenster durch overflow nicht sichtbar ist, zurück.
  scrollHeight ist also die minimale Höhe, bei der ein Element ohne vertikale Scrollleiste in den Viewport passt.

• elem.scrollLeft

  Setzt die Anzahl der Pixel, um die ein Element horizontal gescrollt wird oder gibt die Anzahl der Pixel zurück

• elem.scrollTop

  Setzt die Anzahl der Pixel, um die ein Element vertikal gescrollt wird oder gibt die Anzahl der Pixel zurück

• elem.scrollWidth

  Gibt die vollständige Breite eines Elements mitsammt padding (aber ohne margin) sowie von Inhalt, der im Browserfenster durch overflow nicht sichtbar ist, zurück.
  scrollHeight ist also die minimale Breite, bei der ein Element ohne horizontale Scrollleiste in den Viewport passt.

Dom Element Analyse

• elem.childElementCount

  Gibt die Zahl der child-Elemente zurück

• elem.classList

  Gibt die Namen der Klassen eines Elements zurück
  classList

• elem.nodeName

  Gibt des Namen des Knotens zurück

• elem.nodeType

  Gibt des node type eines Knotens zurück

• elem.tagName

  Gibt den Tag-Namen eines Elements zurück

• elem.hasChildNodes()

  Gibt true zurück, wenn ein Element Kind-Knoten hat und false, wenn nicht

• elem.isEqualNode()

  Prüft, ob zwei Element gleich sind

• elem.isSameNode()

  Prüft, ob zwei Elemente derselbe Knoten sind

• elem.compareDocumentPosition()

  Vergleicht die Position zweier Elemente im Dokument und gibt einen Integer-Wert zurück

• nodelist.item()

  Gibt die Knoten am angegebenen Index in einer NodeList zurück

• nodelist.length

  Gibt die Zahl der Knoten in einer NodeList zurück

Dom Element Data

Inhalt von HTML-Elementen – Text oder untergeordnete Element

• elem.innerHTML

  Setzt den Inhalt eines Elements oder gibt den Inhalt zurück
  innerHTML

• elem.textContent

  Setzt den Text-Inhalt eines Knotens und seiner Abkömmlinge oder gibt ihn zurück
  textContent

• elem.toString()

  Wandelt ein Element in einen String um

Sonstiges

• elem.getFeature()

  Gibt ein Objekt zurück, das die APIs der angegebenen Features zurück

• elem.isContentEditable

  Gibt zurück, ob der Inhalt eines Elements editierbar ist (true) oder nicht (false)

• elem.isDefaultNamespace()

  Gibt true zurück, wenn der angegebene namespaceURI der default ist und false sonst

• elem.isSupported()

  Gibt true zurück, wenn das Element das angegebene Feature unterstützt

• elem.namespaceURI

  Gibt das namespace URI eines Elements zurück

• elem.ownerDocument

  Gibt das Root-Element (document object) zurück