Ich habe mich mit JavaScript gefunden und ich lief über childNodes
und children
Eigenschaften. Ich frage mich, was der Unterschied zwischen ihnen ist. Auch ist einer dem anderen vorzuziehen?
quelle
Ich habe mich mit JavaScript gefunden und ich lief über childNodes
und children
Eigenschaften. Ich frage mich, was der Unterschied zwischen ihnen ist. Auch ist einer dem anderen vorzuziehen?
Verstehen Sie, dass dies .children
eine Eigenschaft eines Elements ist . 1 Nur Elemente haben .children
, und diese Kinder sind alle vom Typ Element. 2
Ist .childNodes
jedoch eine Eigenschaft von Node . .childNodes
kann einen beliebigen Knoten enthalten. 3
Ein konkretes Beispiel wäre:
let el = document.createElement("div");
el.textContent = "foo";
el.childNodes.length === 1; // Contains a Text node child.
el.children.length === 0; // No Element children.
Meistens möchten Sie verwenden, .children
da Sie bei Ihrer DOM-Manipulation im Allgemeinen keine Text- oder Kommentarknoten durchlaufen möchten .
Wenn Sie Textknoten bearbeiten möchten, möchten Sie wahrscheinlich .textContent
stattdessen. 4
1. Technisch gesehen ist es ein Attribut von ParentNode , einem von Element enthaltenen Mixin.
2. Sie sind alle Elemente, da .children
es sich um eine HTMLCollection handelt , die nur Elemente enthalten kann.
3. .childNodes
Kann in ähnlicher Weise jeden Knoten enthalten, da es sich um eine NodeList handelt .
4. Oder .innerText
. Sehen Sie die Unterschiede hier oder hier .
.children
: jsfiddle.net/fbwbjvch/1Element.children
Gibt nur untergeordnete Elemente zurück , währendNode.childNodes
alle untergeordneten Knoten zurückgegeben werden . Beachten Sie, dass Elemente Knoten sind, sodass beide für Elemente verfügbar sind.Ich glaube
childNodes
ist zuverlässiger. Beispielsweise stellt MDC (oben verlinkt) fest, dass der IE nurchildren
in IE 9 richtig funktioniert hat.childNodes
Browser-Implementierer bieten weniger Fehler.quelle
.children
keine Kommentarknoten heraus, aber es filtert Textknoten heraus..getElementsByTagName('*')
. IE kann manchmal so nervig sein ...children
, die IE unterstützen.Bisher gute Antworten, ich möchte nur hinzufügen, dass Sie den Typ eines Knotens überprüfen können, indem Sie
nodeType
:yourElement.nodeType
Dies gibt Ihnen eine ganze Zahl: (von hier genommen )
Beachten Sie, dass laut Mozilla :
quelle
Die Auswahl hängt von der Methode ab, nach der Sie suchen!?
Ich werde mit ParentNode.children gehen :
Da es eine
namedItem
Methode bietet , mit der ich eines der untergeordneten Elemente direkt abrufen kann, ohne alle untergeordneten Elemente zu durchlaufen oder die VerwendunggetElementById
usw. zu vermeiden .z.B
Ich werde mit Node.childNodes gehen :
Da es
forEach
Methode bietet , wenn ichwindow.IntersectionObserver
zB arbeitequelle