Einführung in das Abrufen verschiedener Dom-Knoten in Javascript

Bei der Entwicklung von Webanwendungen, insbesondere Web 2.0-Programmen, ist es häufig erforderlich, ein Element auf der Seite abzurufen und dann den Stil, den Inhalt usw. des Elements zu aktualisieren.

1. Erhalten Sie über den Dokumentknoten der obersten Ebene:
(1) document.getElementById(elementId): Diese Methode kann die erforderlichen Informationen genau abrufen über die ID des Knotens ist eine relativ einfache und schnelle Methode. Wenn die Seite mehrere Knoten mit derselben ID enthält, wird nur der erste Knoten zurückgegeben.
Heutzutage gibt es viele JavaScript-Bibliotheken wie Prototyp und Mootools, die eine einfachere Methode bereitstellen: $(id), und der Parameter ist immer noch die ID des Knotens. Diese Methode kann als eine andere Art des Schreibens von document.getElementById() betrachtet werden, die Funktion von $() ist jedoch leistungsfähiger. Informationen zur spezifischen Verwendung finden Sie in den jeweiligen API-Dokumenten.
(2) document.getElementsByName(elementName): Diese Methode ruft den Knoten anhand seines Namens ab. Wie aus dem Namen hervorgeht, gibt diese Methode kein Knotenelement zurück, sondern ein Array von Knoten mit demselben Namen. Anschließend können wir ein bestimmtes Attribut des Knotens durchlaufen, um festzustellen, ob es sich um den erforderlichen Knoten handelt.
Zum Beispiel: In HTML verwenden Kontrollkästchen und Radio denselben Namensattributwert, um Elemente innerhalb einer Gruppe zu identifizieren. Wenn wir jetzt das ausgewählte Element abrufen möchten, holen wir uns zuerst das gemischte Element und führen dann eine Schleife durch, um zu bestimmen, ob der überprüfte Attributwert des Knotens wahr ist.
(3) document.getElementsByTagName(tagName): Diese Methode erhält den Knoten über sein Tag. Diese Methode gibt auch ein Array zurück. Beispiel: document.getElementsByTagName('A') gibt alle Hyperlink-Knoten auf der Seite zurück. Vor dem Erhalten des Knotens ist der Typ des Knotens im Allgemeinen bekannt, sodass die Verwendung dieser Methode relativ einfach ist. Der Nachteil liegt jedoch auch auf der Hand: Das zurückgegebene Array kann sehr groß sein, was viel Zeit verschwendet. Ist diese Methode also nutzlos? Natürlich nicht. Diese Methode unterscheidet sich von den beiden oben genannten. Sie ist keine proprietäre Methode des Dokumentknotens und kann auch auf andere Knoten angewendet werden, die unten erwähnt werden.
2. Durch den übergeordneten Knoten gelangen:
(1) parentObj.firstChild: Diese Methode kann verwendet werden, wenn der Knoten der erste untergeordnete Knoten eines bekannten Knotens (parentObj) ist. Dieses Attribut kann rekursiv verwendet werden, das heißt, es unterstützt die Form parentObj.firstChild.firstChild.firstChild..., sodass tiefere Knoten erhalten werden können.
(2) parentObj.lastChild: Offensichtlich dient dieses Attribut dazu, den letzten untergeordneten Knoten des bekannten Knotens (parentObj) zu erhalten. Wie firstChild kann es auch rekursiv verwendet werden.
Wenn wir die beiden kombinieren, erzielen wir im Gebrauch einen aufregenderen Effekt, nämlich: parentObj.firstChild.lastChild.lastChild...
(3) parentObj.childNodes: Erhalten Sie kennen das Array der untergeordneten Knoten eines Knotens, und dann können Sie den erforderlichen Knoten durch Schleifen oder Indizieren finden.
Hinweis: Nach dem Testen wurde festgestellt, dass in IE7 das Array direkter untergeordneter Knoten erhalten wird, während in Firefox 2.0.0.11 alle untergeordneten Knoten erhalten werden, einschließlich der untergeordneten Knoten des untergeordneten Knotens .
(4) parentObj.children: Ruft das direkte untergeordnete Knotenarray eines bekannten Knotens ab.
Hinweis: Nach dem Test ist der Effekt unter IE7 derselbe wie bei childNodes, wird jedoch von Firefox2.0.0.11 nicht unterstützt. Aus diesem Grund verwende ich einen anderen Stil als andere Methoden. Daher wird seine Verwendung nicht empfohlen.
(5) parentObj.getElementsByTagName(tagName): Die Verwendungsmethode wird nicht im Detail beschrieben. Sie gibt ein Array von untergeordneten Knoten mit dem angegebenen Wert unter allen untergeordneten Knoten des bekannten Knotens zurück. Beispiel: parentObj.getElementsByTagName('A') gibt alle Hyperlinks in bekannten untergeordneten Knoten zurück.
3. Erhalten Sie über benachbarte Knoten:
(1) neighborNode. previousSibling: Holen Sie sich den vorherigen Knoten des bekannten Knotens (neighbourNode) und lastChild. Rekursiv verwendet.
(2) neighbourNode.nextSibling: Ruft den nächsten Knoten des bekannten Knotens (neighbourNode) ab und unterstützt auch die Rekursion.
4. Über untergeordnete Knoten abrufen:
(1) childNode.parentNode: Den übergeordneten Knoten eines bekannten Knotens abrufen.
Die oben genannten Methoden sind nur einige grundlegende Methoden. Wenn Sie JavaScript-Bibliotheken wie Prototype verwenden, erhalten Sie möglicherweise auch andere Methoden, z. B. das Abrufen über die Klasse des Knotens usw. Wenn Sie jedoch die verschiedenen oben genannten Methoden flexibel nutzen können, sollten Sie meines Erachtens mit den meisten Programmen umgehen können

Operationscode:

<table> 
<tr> 
<td id="TEST"> 
<input type="submit" value="确定"> 
<input type="button" value="取消"> 
</td> 
</tr> 
</table>

Getestet:

var td= document.getElementById("TEST"); 
alert(td.childNodes.length);结果为4

JS中,空格也是作为一个文本节点,而两个input元素后面都有空格
所以都作为一个文本节点,所以结果为4
删除空格后结果为2
为了处理里面的空格节点,用以下函数来处理

function cleanWhitespace(element) 
{ 
for(var i=0; i<element.childNodes.length; i++) 
{ 
var node = element.childNodes[i]; 
if(node.nodeType == 3 && !/\S/.test(node.nodeValue)) 
{ 
node.parentNode.removeChild(node); 
} 
} 
}

Das obige ist der detaillierte Inhalt vonEinführung in das Abrufen verschiedener Dom-Knoten in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!