Javascript DOM Elemente und Eigenschaften

firstChild, lastChild, nextSibling und prevSibling

So komfortabel wie jQuery-Selektoren waren die frühen nativen Javascript-Selektoren firstChild, lastChild, nextSibling und prevSibling nicht, dafür aber ohne Zusatzgewicht und schnell. Für den Komfort sorgen die neueren Methode wie nextElementSibling anstelle von nextSibling.

Zwischen firstElementChild und firstChild gibt es einen feinen Unterschied: firstElementChild erwischt nur Elemente mit nodeType 1. Leerzeichen, Zeilenumbrüche und Kommentare waren noch Stolperfallen für die älteren DOM-Selektoren childNodes, firstChild, nextSibling usw..

Javascript Element-Selektoren

Für 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.

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.querySelector()

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

• elem.querySelectorAll()

  Gibt alle Kind-Elemente zurück, die dem angegebenen CSS-Selektor entsprechen
  querySelectorAll

• elem.children

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

• elem.firstChild

  Gibt das erste Kind eines Elements zurück
  firstChild

• elem.firstElementChild

  Gibt das erste Kind-Element eines Elements zurück

• elem.childNodes

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

• elem.lastChild

  Gibt das letzte child node eines Elements zurück
  lastChild

• elem.lastElementChild

  Gibt das letzt child-Element eines Elements zurück

• elem.nextSibling

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

• 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
  parentNode

• elem.parentElement

  Gibt den Parent-Elementknoten eines Elements zurück

• elem.previousSibling

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

• elem.previousElementSibling

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

• elem.getElementsByClassName()

  Gibt eine Sammlung aller Kind-Elemente mit dem angegebenen Klassen-Namen zurück
  getElemementsByClassName

• elem.getElementsByTagName()

  Gibt eine Sammlung aller Kind-Elemente mit dem angegebenen tag name zurück
  getElementsByTagName

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.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.

Javascript – auf Elemente zugreifen und ändern

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.

• elem.appendChild()

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

• elem.cloneNode()

  Klont ein Element
  cloneNode

• elem.insertBefore()

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

• elem.removeChild()

  Entfernt einen Kindknoten vom Element
  removeChild

• elem.replaceChild()

  Ersetzt einen Kindknoten in einem Element
  replaceChild

• elem.normalize()

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

• elem.nodeValue

  Setzt den Wert eines Knotens oder gibt ihn zurück
  nodeValue

• elem.contentEditable

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

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
  nodeName

• elem.nodeType

  Gibt des node type eines Knotens zurück
  NodeType

• elem.tagName

  Gibt den Tag-Namen eines Elements zurück
  TagName

• 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.contains()

  Gibt true zurück, wenn der Knoten ein Nachfahre des Elements ist und false, wenn nicht

• 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