Warum gibt 'childNodes' eine Zahl zurück, die größer ist als erwartet?

8

Könnten Sie sich bitte dieses jsFiddle-Beispiel ansehen und mir sagen, warum die Zahl "11" eher alarmiert ist als "5" ( die Anzahl der <li> Elemente)? ​​

Von jsFiddle:

HTML

%Vor%

JavaScript

%Vor%     
Web_Designer 16.08.2011, 00:43
quelle

6 Antworten

10

Der childNodes gibt abhängig vom verwendeten Browser die Textknoten sowie die Tags zurück, die untergeordnete Elemente des übergeordneten Knotens sind. Technisch gesehen wird das Leerzeichen zwischen den <li> Tags ebenfalls zu childNodes gezählt.

Um zu vermeiden, sie zu verarbeiten, können Sie überprüfen, dass nodeType != 3 . Hier ist eine Liste der Knotentypen.

%Vor%     
Michael Berkowski 16.08.2011 00:46
quelle
3

Sie haben Textknoten dort.

Sie können sie beim Iterieren mit ... überspringen.

%Vor%

jsFiddle .

Alternativ könnten Sie das auch auf eine funktionalere Art tun ...

%Vor%

jsFiddle .

Sie müssen es in ein richtiges Array konvertieren, um die Methode filter() zu verwenden. childNodes -Eigenschaft gibt ein NodeList -Objekt zurück.

    
alex 16.08.2011 00:49
quelle
1

Textknoten sind in der Anzahl der untergeordneten Knoten enthalten. Um den richtigen Wert zu erhalten, müssen Sie Textknoten entfernen oder sicherstellen, dass sie nicht in Ihrem Code enthalten sind. Jeder Leerraum zwischen Code wird als Leerzeichen und als Textknoten betrachtet. Ihre Anzahl entspricht also der Gesamtzahl der Textknoten.

    
Ktash 16.08.2011 00:48
quelle
1

Wie bereits erwähnt, enthält die Zahl childNode die Textknoten, die durch den Leerraum zwischen dem & lt; li & gt; Elemente.

%Vor%

Das wird Ihnen 5 childNodes geben, weil es das Leerzeichen wegläßt.

    
Dennis 16.08.2011 00:53
quelle
1

Ich habe eine Lösung dafür zusammengestellt, die mir gefällt. (Ich habe die Idee von diesem Blogpost .)

1) Zuerst erhalte ich die Anzahl der untergeordneten Elementknoten mit:

%Vor%

2) Dann habe ich eine Funktion geschrieben, die jeden untergeordneten Elementknoten nach Indexnummer zurückgibt. Ich tat dies, indem ich firstElementChild und nextElementSibling in einer for-Schleife verwendete.

%Vor%

Dies gibt das untergeordnete Element zurück, das ich für alles brauche, was ich daraus ziehen möchte. Es überspringt das Problem, wenn childNodes all die verschiedenen Knoten neu abstimmt, die nicht hilfreich sind, wenn nur die Elemente analysiert werden sollen. Ich bin mir sicher, dass jemand, der erfahrener ist als ich, das aufräumen könnte. Aber ich fand das so hilfreich, dass ich es veröffentlichen musste.

    
Tim Bobo 09.05.2014 03:27
quelle
0

Verwenden Sie stattdessen obj.children.

%Vor%

Der Unterschied zwischen diesen untergeordneten und untergeordneten Knoten besteht darin, dass untergeordnete Knoten alle Knoten enthalten, einschließlich Textknoten und Kommentarknoten, während untergeordnete Knoten nur Elementknoten enthalten. von w3schools.

    
Harijs Krūtainis 14.10.2015 11:44
quelle

Tags und Links