Come inizializzare firstChild in modo da non ottenere "x.firstChild è nullo o non un oggetto"?

Question

Nel mio JSP/HTML ho questo:

<div id="exampleLabel"> </div> 

Poi nella mia sezione javascript ho una funzione chiamata da un onclick come questo;

function changeLabel(){ 
    exampleLabel.firstChild.nodeValue = 'LABEL HAS CHANGED'; 
} 

Questo funziona bene in Chrome, non fa nulla in Firefox e IE in un errore nella pagina appare dicendo

exampleLabel.firstChild è nullo o non un oggetto.

Ok posso prendere che non c'era firstChild così cercando di fare firstChild.ANYTHING sarebbe un NPE, posso anche prendere che gli altri browser non si limitano a inizializzare loro stessi come Chrome fa, ovviamente.

La domanda è, come posso inizializzarlo da solo in modo che possa quindi passare a .nodeValue = "blahblah"?

Answer 1

Il motivo per cui non funziona in IE è che a differenza di tutti gli altri principali browser, non crea nodi di testo per gli spazi nel codice HTML, quindi il vostro <div> che contiene solo uno spazio non ha nodi figlio in IE. Suggerirei di aggiungere manualmente un nodo di testo o di modificarne uno esistente.

Inoltre, se non hai dichiarato exampleLabel altrove, ti stai affidando a una funzionalità non standard e piuttosto icky di IE e Chrome che associa ID di elementi DOM a proprietà dell'oggetto globale (ad esempio, puoi fare riferimento a un elemento come variabile dal suo ID). Questo non funziona con altri browser. Quello che dovresti fare invece è usare document.getElementById().

function changeLabel(labelText) { 
    var exampleLabel = document.getElementById('exampleLabel'); 
    var child = exampleLabel.firstChild; 
    if (!child) { 
     child = document.createTextNode(''); 
     exampleLabel.appendChild(child); 
    } 
    child.nodeValue = labelText; 
} 

changeLabel('LABEL HAS CHANGED'); 

Answer 2

Creare un textNode e quindi aggiungerlo.

function changeLabel(){ 
    var textNode = exampleLabel.firstChild; 
    if (!textNode) { 
     textNode = document.createTextNode('foo'); 
     exampleLabel.appendChild(textNode); 
    } 
    textNode.nodeValue = 'LABEL HAS CHANGED'; 
}