Javascript DOM Elemente und Eigenschaften

JS firstElementChild, lastElementChild

Wenn CSS-Klassen oder ID-Attribute einen direkten Weg zum Element bieten, sind querySelector bzw. querySelectorAll die Allround-Methoden. Wenn es hingegen keinen direkten Weg über class, id, … zum Element gibt, springen spezielle Javascript-Selektoren wie firstElementChild, lastElementChild, nextElementSibling und children ein und bereichern das traditionelle DOM-API um zuverlässige Methoden: Sie finden und sammeln Element-Nodes.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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