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.

Ruft Brüder durch benachbarte Knoten ab. Knoten:

neighbourNode. previousSibing Ruft den vorherigen ab Geschwisterknoten des bekannten Knotens

neighbourNode.nextSibing Holen Sie sich den nächsten Geschwisterknoten des bekannten Knotens. Geschwisterknoten

ruft den übergeordneten Knoten über den untergeordneten Knoten ab:

1. childNode.parentNode Holen Sie sich den übergeordneter Knoten eines bekannten Knotens

Die obige Methode kann grundsätzlich rekursiv verwendet werden, parentObj.firstChild.firstChild.firstChild ... Aber es gibt einen Code wie diesen. Dummerweise hektisch. .

　

Erweiterung

Vor der Erweiterung müssen wir einige Grundkenntnisse über Knoten wissen: In Dom-Knoten hat jeder Knoten einen anderen Typ

Die 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	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!