Heim > Web-Frontend > js-Tutorial > So greifen Sie in JavaScript auf Knoten zu

So greifen Sie in JavaScript auf Knoten zu

青灯夜游
Freigeben: 2023-01-06 11:18:02
Original
3575 Leute haben es durchsucht

Methoden für den Zugriff auf Knoten: 1. Verwenden Sie das Attribut „ownerDocument“; 3. Verwenden Sie das Attribut „childNodes“; .

So greifen Sie in JavaScript auf Knoten zu

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

Durch die Baumbeziehung zwischen Knoten können wir jeden Knoten im Dokument lokalisieren. DOM definiert die folgenden Eigenschaften für den Node-Typ, um die JavaScript-Durchquerung jedes Knotens im Dokumentbaum zu erleichtern.

  • ownerDocument: Gibt das Stammelement (Dokumentobjekt) des aktuellen Knotens zurück.
  • parentNode: Gibt den übergeordneten Knoten des aktuellen Knotens zurück. Alle Knoten haben nur einen übergeordneten Knoten
  • childNodes: Gibt die Knotenliste aller untergeordneten Knoten des aktuellen Knotens zurück
  • firstChild: Gibt den ersten untergeordneten Knoten des aktuellen Knotens zurück
  • lastChild: Gibt den letzten untergeordneten Knoten des aktuellen Knotens zurück
  • nextSibling: Gibt die benachbarten Geschwisterknoten nach dem aktuellen Knoten zurück.
  • previousSibling: Gibt die benachbarten Geschwisterknoten vor dem aktuellen Knoten zurück eine Liste aller untergeordneten Knoten.

nodeList ist ein Array-ähnliches Objekt, das zum Speichern einer geordneten Menge von Knoten verwendet wird, auf die Benutzer durch Subskription ihrer Positionen zugreifen können. Obwohl childNodes über die Syntax in eckigen Klammern auf den Wert von nodeList zugreifen kann und das childNodes-Objekt eine Längeneigenschaft enthält, die die Anzahl (Länge) der in der Liste enthaltenen untergeordneten Knoten angibt, ist childNodes kein Array und kann Array-Methoden nicht direkt aufrufen.

【2】parentNode

Jeder Knoten verfügt über ein parentNode-Attribut, das auf den übergeordneten Knoten im Dokumentbaum zeigt. Alle in der Liste „childNodes“ enthaltenen Knoten haben denselben übergeordneten Knoten, sodass ihre parentNode-Eigenschaften alle auf denselben Knoten verweisen. Der vom

parentNode-Attribut zurückgegebene Knoten ist immer ein Elementtypknoten, da nur Elementknoten untergeordnete Knoten enthalten dürfen. Der Dokumentknoten hat jedoch keinen übergeordneten Knoten und die Eigenschaft parentNode des Dokumentknotens gibt null zurück.

【3】firstChild und lastChild

Die Eigenschaft firstChild gibt den ersten untergeordneten Knoten zurück, und die Eigenschaft lastChild gibt den letzten untergeordneten Knoten zurück. Die Eigenschaften „firstChild“ und „lastChild“ von Textknoten und Attributknoten geben immer null zurück.

Hinweis: firstChild entspricht dem ersten Element von childNodes und der Attributwert lastChild entspricht dem letzten Element von childNodes.

node.childNodes[0] = node.firstChild
node.childNodes[node.childNodes.length-1]  = node.lastChild
Nach dem Login kopieren
【4】nextSibling- und previousSibling-Eigenschaften

nextSibling-Eigenschaften geben den nächsten benachbarten Knoten zurück, und die previousSibling-Eigenschaft gibt den vorherigen benachbarten Knoten zurück. Wenn es keine benachbarten Knoten gibt, die denselben übergeordneten Knoten haben, geben sie null zurück.

【5】ownerDocument

Im DOM-Dokumentbaum können Sie das OwnerDocument-Attribut verwenden, um auf den Stammknoten zuzugreifen.

node.ownerDocument
Nach dem Login kopieren

Über das OwnerDocument-Attribut jedes Knotens können wir direkt auf den Dokumentknoten zugreifen, ohne mehrere Backtracking-Ebenen durchlaufen zu müssen, um an die Spitze zu gelangen. Darüber hinaus können Benutzer auch die folgenden Methoden verwenden, um auf den Root-Knoten zuzugreifen.

document.documentElement
Nach dem Login kopieren
【Verwandte Empfehlungen: Javascript-Lern-Tutorial

Das obige ist der detaillierte Inhalt vonSo greifen Sie in JavaScript auf Knoten zu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage