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
querySelectorelem.querySelectorAll()
Gibt alle Kind-Elemente zurück, die dem angegebenen CSS-Selektor entsprechen
querySelectorAllelem.children
Gibt eine Sammlung der child nodes (ohne Text- und Kommentarknoten) zurück
elem.firstChild
Gibt das erste Kind eines Elements zurück
firstChildelem.firstElementChild
Gibt das erste Kind-Element eines Elements zurück
elem.childNodes
Gibt eine Sammlung der child nodes (mitsamt Text- und Kommentarknoten) zurück
childNodeselem.lastChild
Gibt das letzte child node eines Elements zurück
lastChildelem.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
nextSiblingelem.nextElementSibling
Gibt das nächste Element auf derselben Ebene im DOM-Baum zurück
elem.parentNode
Gibt den Parent Node eines Elements zurück
parentNodeelem.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
getElemementsByClassNameelem.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
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.Setzt die Anzahl der Pixel, um die ein Element horizontal gescrollt wird oder gibt die Anzahl der Pixel zurück
Setzt die Anzahl der Pixel, um die ein Element vertikal gescrollt wird oder gibt die Anzahl der Pixel zurück
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
appendChildelem.cloneNode()
Klont ein Element
cloneNodeelem.insertBefore()
Fügt ein neues child node vor dem angegebenen child node ein
insertBeforeelem.removeChild()
Entfernt einen Kindknoten vom Element
removeChildelem.replaceChild()
Ersetzt einen Kindknoten in einem Element
replaceChildelem.normalize()
Fügt aufeinanderfolgende Textknoten und entfernt leere Textknoten aus einem Element
normalizeelem.nodeValue
Setzt den Wert eines Knotens oder gibt ihn zurück
nodeValueelem.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
classListelem.nodeName
Gibt des Namen des Knotens zurück
nodeNameelem.nodeType
Gibt des node type eines Knotens zurück
NodeTypeelem.tagName
Gibt den Tag-Namen eines Elements zurück
TagNameelem.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
innerHTMLelem.textContent
Setzt den Text-Inhalt eines Knotens und seiner Abkömmlinge oder gibt ihn zurück
textContentelem.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