In JavaScript folgt der DOM-Baum der hierarchischen Struktur, die eine große Liste von Knoten enthält. Die Struktur beginnt beim Wurzelknoten (Dokument) und wird dann an die übergeordneten und untergeordneten Knoten angehängt. Um auf diese untergeordneten Knoten zuzugreifen, bietet JavaScript die „ childNodes ' Eigentum. Diese Eigenschaft unterstützt Benutzer beim Zugriff auf alle oder einen bestimmten untergeordneten Knoten des zugehörigen übergeordneten Elements.
In diesem Beitrag wird das Ziel und die Funktionsweise der Eigenschaft „childNodes“ des HTML-DOM-Elements in JavaScript erläutert.
Was ist die Eigenschaft „childNodes“ des HTML-DOM-Elements in JavaScript?
Der ' childNodes „ ist eine schreibgeschützte Eigenschaft, die die Liste aller untergeordneten Knoten eines Elements in Form eines NodeList-Objekts zurückgibt. Diese spezielle Eigenschaft kann auch verwendet werden, um auf den spezifischen untergeordneten Knoten des übergeordneten Elements zuzugreifen. Der untergeordnete Knoten beginnt beim Index „0 (Null)“. Darüber hinaus gelten auch Leerzeichen, Kommentare und Textknoten als untergeordnete Knoten.
Syntax
element.childNodes
Die oben verallgemeinerte Syntax gibt das NodeList-Objekt zurück, das untergeordnete Knoten des Zielelements enthält.
Lassen Sie uns die oben definierten Syntaxen praktisch anwenden.
HTML Quelltext
Schauen Sie sich zunächst den angegebenen HTML-Code an:
< div Ausweis = „Div“ Stil = „Rand: 2 Pixel einfarbig schwarz; Höhe: 200 Pixel; Breite: 250 Pixel; Abstand: 10 Pixel“ >< h2 > Erste Überschrift h2 >
< h3 > Zweite Überschrift h3 >
< P > Erster Paragraph P >
< P > Zweiter Absatz P >
div >
< P Ausweis = 'für' > P >
In den obigen Codezeilen:
- Füge hinzu ein ' ”-Element mit der ID „Div“, formatiert mit Hilfe der angegebenen Eigenschaften (Rahmen, Höhe und Breite).
- Definieren Sie innerhalb des „
“-Elements zwei Überschriften bzw. zwei Absätze.- Schließlich ist das „ Das Tag „bettet einen leeren Absatz mit der ID „para“ ein.
Notiz: Der angegebene HTML-Code wird in diesem Beitrag berücksichtigt.
Beispiel 1: Anwenden der Eigenschaft „childNodes“, um die Gesamtzahl der untergeordneten Knoten eines bestimmten Elements zu ermitteln
In diesem Beispiel werden die Eigenschaften „childNodes“ und „length“ verwendet, um die Gesamtzahl der im jeweiligen übergeordneten Element vorhandenen untergeordneten Knoten zu ermitteln.
JavaScript-Code
Folgen wir dem angegebenen Code:
< Skript >
const elem = document.getElementById ( „Div“ ) ;
lassen num = elem.childNodes.length;
document.getElementById ( 'für' ) .innerHTML = 'Wert: ' + num;
Skript >In den obigen Codezeilen:
- Die Variable „elem“ nutzt die Variable „ getElementById() ”-Methode, um auf das übergeordnete Element zuzugreifen, dessen ID „Div“ ist.
- Die Variable „num“ verwendet die Variable „ childNodes ' Und ' Länge ”-Eigenschaften, um die Anzahl der untergeordneten Knoten zu ermitteln, die im aufgerufenen „“-Element vorhanden sind.
- Zuletzt ruft die Methode „getElementById()“ den eingebetteten leeren Absatz über seine ID „para“ ab, um ihn mit dem Variablenwert „num“ anzuhängen.
Ausgang
Die Ausgabe impliziert, dass es insgesamt „ 9 ” untergeordnete Knoten im angegebenen „
“-Element, einschließlich der Leerzeichen zwischen den Elementen.Beispiel 2: Anwenden der Eigenschaft „childNodes“, um den Namen eines bestimmten untergeordneten Knotens abzurufen
Die Eigenschaft „childNodes“ kann auch mit der Eigenschaft „nodeName“ verwendet werden, um den Namen des/der untergeordneten Knoten(s) abzurufen. Schauen wir es uns praktisch an.
JavaScript-Code
Gehen Sie den folgenden Code durch:
< Skript >
const elem = document.getElementById ( „Div“ ) ;
lassen num = elem.childNodes [ 1 ] .Knotenname;
document.getElementById ( 'für' ) .innerHTML = 'Element: ' +num;
Skript >Hier das ' childNodes Die Eigenschaft ist mit der Eigenschaft „ Knotenname ”-Eigenschaft, um den angegebenen Namen des untergeordneten Knotens basierend auf dem Index, auf den zugegriffen wird, zu erhalten, d. h. „1“.
Ausgang
Die Ausgabe zeigt den Namen des untergeordneten Knotens, d. h. das Element „H2“, gegenüber dem angegebenen Index an.
Beispiel 3: Anwenden der Eigenschaft „childNodes“, um die Textfarbe eines bestimmten untergeordneten Knotens zu ändern
In diesem Beispiel wird die besprochene Eigenschaft verwendet, um die Farbe des indizierten untergeordneten Ziels zu ändern.
JavaScript-Code
Betrachten Sie den folgenden Code:
< Skript >
document.getElementById ( „Div“ ) .childNodes [ 3 ] .style.color = 'Grün' ;
Skript >Hier das ' getElementById() Die Methode ruft das übergeordnete Element „
“ über seine ID „Div“ und seinen am angegebenen Index platzierten untergeordneten Knoten über die Methode „ ab. childNodes ” Eigentum bzw. Verwenden Sie danach die Funktion „ Stil.Farbe ”-Eigenschaft, um die Textfarbe des aufgerufenen untergeordneten Knotens zu ändern.Ausgang
Die Ausgabe bestätigt, dass die Textfarbe des angegebenen untergeordneten Knotens entsprechend geändert wurde.
Abschluss
In JavaScript ist das „ childNodes Die Eigenschaft „ruft das NodeList-Objekt ab, das die untergeordneten Knoten des Ziel-HTML-Elements enthält. Durch Angabe der Indexnummer mit der Eigenschaft „childNodes“ kann auf die untergeordneten Knoten auf einmal oder auf den gewünschten zugegriffen werden. Diese Eigenschaft ermöglicht die Ausführung der JavaScript-Funktion, um spezielle Aufgaben auf den untergeordneten Knoten auszuführen, auf die zugegriffen wird. In diesem Artikel wurde die Anwendung der Eigenschaft „childNodes“ in JavaScript näher erläutert.
- Definieren Sie innerhalb des „