JavaScript non deve ignorare gli spazi bianchi? Nodo di stranezza in Firefox

Ho incontrato questo “bug” nell’ultima versione di Firefox e non so che cosa causa questo comportamento e quale sia il risultato corretto.

HTML

First Title

Second Title

JavaScript

 var allDivNodes = document.getElementsByTagName("div"); console.log(allDivNodes[0].childNodes); console.log(allDivNodes[1].childNodes); console.log(allDivNodes[0].childNodes.length); console.log(allDivNodes[1].childNodes.length); 

Il risultato che ottengo è il seguente:

inserisci la descrizione dell'immagine qui

Ed ecco il cavillo. Se aggiungo spazi nel mio codice HTML ed eseguo lo stesso script, ottengo questo risultato:

NUOVO HTML. JavaScript rimane lo stesso

  

First Title

Second Title

Nuovo risultato:

inserisci la descrizione dell'immagine qui

Pensavo che JavaScript fosse uno spazio bianco insensibile. Allora perché cambia nodeLength da 1 a 3?

Potresti usare i bambini invece dei childNodes , a causa della formattazione hai introdotto alcuni nodes di testo (sì, sono nodes con tipo 3 e non solo alcuni spazi bianchi) e childNodes li restituirà tutti.

 console.log(allDivNodes[0].children.length); 

Oppure con i childNodes puoi eseguire il ciclo e ignorare quelli con nodeType === 3 .

Allo stesso modo hai anche childElementCount che ti darà il conteggio childElement e ignorerà i nodes di testo.

Pensavo che JavaScript fosse uno spazio bianco insensibile. Allora perché cambia nodeLength da 1 a 3?

Firefox si sta comportando correttamente.

Questo non è un problema JavaScript. Il DOM conta le aree “solo spazi bianchi” come nodes di testo, e quindi JavaScript sta correttamente restituendo tutti i nodes figli che trova.

Era più vecchio IE che si comportava in modo diverso, dove tali aree solo bianche sarebbero state ignorate. Questo è stato corretto da IE9.

Fondamentalmente, tutto ciò che appare nella pagina è rappresentato come un nodo DOM.

Personalmente preferisco comprimere il mio HTML. Non solo riduce il tempo di download, ma rende anche il DOM più piccolo con meno occupazioni della memoria e meno nodes indesiderati da aggirare.