Heim > Artikel > Web-Frontend > Zusammenfassung der JS-Methoden zum Erhalten von untergeordneten, übergeordneten und Geschwisterknoten
Dieser Artikel stellt hauptsächlich eine Zusammenfassung der Methoden zum Erhalten von untergeordneten, übergeordneten und Geschwisterknoten in JS sowie zwei Methoden zum Erhalten von Geschwisterknoten in JS vor. Freunde, die sich für JS interessieren, können auf diesen Artikel verweisen
Wir befinden uns in der eigentlichen Entwicklung. Oft ist es erforderlich, ein bestimmtes HTML-Element auf der Seite abzurufen und den Stil, die Inhaltsattribute usw. des Elements dynamisch zu aktualisieren.
Wir wissen bereits, dass die folgenden Methoden in JavaScript bereitgestellt werden, um untergeordnete, übergeordnete und Geschwisterknoten zu erhalten:
Regulär
Erhalten Sie den untergeordneten Knoten über den übergeordneten Knoten:
parentObj.firstChild Erhalten Sie den bekannten übergeordneten Knoten. Der letzte untergeordnete Knoten des Knotens
parentObj.childNodes Holen das untergeordnete Knoten-Array des bekannten übergeordneten Knotens (hier erhalte ich alle direkten untergeordneten Knoten in IE 7)
parentObj.children Ruft die direkten untergeordneten Knoten eines bekannten Knoten-Knoten-Arrays ab (gleicher Effekt wie childNodes in IE7)
parentObj.
getElementsByTagName(tagName) Gibt ein Array von untergeordneten Knoten mit dem angegebenen Wert im bekannten untergeordneten Knoten zurück.
neighbourNode.nextSibing Holen Sie sich den nächsten Geschwisterknoten des bekannten Knotens. Geschwisterknoten
Erweiterung
Vor der Erweiterung müssen wir einige Grundkenntnisse über Knoten wissen: In Dom-Knoten hat jeder Knoten einen anderen TypDie in W3C-Spezifikationen häufig verwendeten Dom-Knotentypen sind wie folgt
Knotentyp | Beschreibung | Wert |
Elementknoten | Jedes HTML-TagSie sind alle ein Elementknoten | 1 |
Attributknoten | Attribute des Elementknotens (HTML-Tag), wie z. B. ID, Klasse, Name usw. | 2 |
Textknoten | Textinhalt im Elementknoten oder Attributknoten | 3 |
Kommentarknoten | ist der Kommentar des Dokuments in der Form d8f04bce924a5373c7052ba2014e1df6 | 8 |
Dokumentknoten | stellt das gesamte Dokument dar (den Wurzelknoten des Dom-Baums, also Dokument) | 9 |
In Bezug auf die Namen von Knoten entsprechen verschiedene Knotentypen unterschiedlichen Namen
节点类型 | 节点名称 |
元素节点 | HTML的名称(大写) |
属性节点 | 属性的名称 |
文本节点 | 它的值永远的都#text |
文档节点 | 它的值永远都是#document |
Sie können den Knotentyp, den Knotennamen und den Knotenwert über nodeType (Knotentyp), nodeName (Knotenname) und nodeValue (Knotenwert) zurückgeben (z. B. geben Elementknoten 1 zurück, Attributknoten geben 2)
Zwei Möglichkeiten, Geschwisterknoten in JS zu erhalten
Methode 1: Finden Sie zuerst die „Geschwisterelemente“, einschließlich sich selbst, durch Entfernen Sie dann die untergeordneten Elemente des übergeordneten Elements.
function sibling(elem){ var a = []; var b = elem.parentNode.children; for (var i = 0 ; i < b.length ; i++){ if(b[i] !== elem) a.push(b[i]); } return a; }
Methode 2: Implementieren Sie die Methode in jQuery, suchen Sie zuerst das erste untergeordnete Element des Elements und fahren Sie dann mit der Suche nach dem nächsten angrenzenden Element fort und eliminiere dich selbst.
siblings:function(elem) { return JQuery.sibling(elem.parentNode.firstNode,elem); } JQuery.sibling = function(n,elem){ var r = []; for (;n;n= n.nextSibling){ if(n.nodeType == 1 && (!elem || elem != elem)) r.push(n); } return r; }
Dieser Code ist in jQuery 1.2 und weiteren Versionen zu finden. In der Version von jQuery 1.2.3, die ich mir angesehen habe, ist dieser Code in Zeile 1800 zu finden:
Setzen Sie dies ein Methode In eine unabhängig verwendbare Funktion umgewandelt:
fucntion sibling(elem){ var r = []; var n = elem.parentNode.firstChild; for(;n;n = n.nextSibling) { if(n.nodeType === 1 && n !== elem) { r.push(n); } } return r; }
Natürlich kann das Finden der Geschwisterelemente eines bestimmten Knotens auf diese Weise die Redundanz der Rekursion leicht vermeiden.
Alle untergeordneten Elementknoten abrufen
In JavaScript können Sie alle untergeordneten Knoten über untergeordnete Knoten abrufen (nur HTML zurückgeben, nicht einmal untergeordnete Knoten zurückgeben). ), das von fast allen Browsern unterstützt wird, in einigen Versionen von Firefox jedoch nicht.
Hinweis: Im IE enthält „Children“ Anmerkungsknoten.
Aufgrund besonderer Umstände müssen wir manchmal nur Elementknoten abrufen, damit wir nach dem Attribut „nodeType“ filtern können Das obige Wissen: Knoten mit nodeType == 1 sind Elementknoten.
Definieren Sie unten eine Funktion aus , um alle untergeordneten Elementknoten abzurufen:
var getChildNodes = function(elem) { var childArr = elem.children || elem.childNodes, childArrTem = new Array(); for (var i = 0 ; i < childArr.length; i ++ ) { if (childArr[i].nodeType == 1){ childArrTem.push(childArr[i]); } } return childArrTem; }
Alle übergeordneten Knoten abrufen
Auf ähnliche Weise können wir alle übergeordneten Knoten des aktuellen Knotens abrufen:
function getParents (elem){ var parents = []; while(elem.parentNode){ parents.push(elem.parentNode) elem = elem.parentNode; } return parents; }
Auf diese Weise können wir einen Dom-Knoten akzeptieren und schließlich das Dokumentobjekt abrufen, wenn wir es benötigen um das Beste herauszuholen Die obere Schicht ist der Körper. Sie können die Beurteilung in while ändern zu: while(elem.parentNode && elem.parentNode.tagName == 'BODY'
Entsprechend den in JavaScript bereitgestellten Methoden und zugehörigen Kenntnissen zum Erhalten von Knoten können wir viele Kapselungsmethoden schreiben. Probieren Sie es aus. Wie viele Möglichkeiten gibt es, Knoten zu erhalten?
Nachdem wir einige Kapselungen von Betriebsknoten geschrieben haben, wird es viel einfacher sein, sich den Quellcode der Knotenmethode Dom-Operation in jQuery anzusehen.
Verwandte Empfehlungen:
JavaScript-Implementierung der automatischen Musikumschaltung und Karussell-Beispiel-Tutorial
Detaillierte Erklärung des JavaScript-Plug-Ins Tab
JavaScript-Funktionsbindungs-Nutzungsanalyse
Das obige ist der detaillierte Inhalt vonZusammenfassung der JS-Methoden zum Erhalten von untergeordneten, übergeordneten und Geschwisterknoten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!