Le specifiche DOM affermano che quando un elemento non esiste nell'albero del documento, il metodo che ha cercato di accedere all'elemento può sollevare un eccezione. Questo vale nel caso del metodo getElementById() e della proprietà firstChild, che restituiscono entrambe null. Al contrario, il metodo getElementsByTagName() non restituisce alcun valore nel caso in cui gli elementi selezionati non esistano. Vediamo come normalizzare questa situazione.
Possiamo creare un oggetto di test e reindirizzare i risultati alla console JavaScript. Per i primi due casi elencati, dobbiamo solo verificare la presenza del valore null. Abbiamo la seguente struttura DOM:
<div id="test">
<p>Test</p>
<ul>
<li>Uno</li>
<li>Due</li>
<li>Tre</li>
</ul>
</div>
<hr />
getElementsByTagName() resituisce una collezione di nodi avente una proprietà length contenente il numero di nodi presenti. Possiamo quindi verificare che questo valore sia diverso da 0:
(function() {
var ElementUtils = {
exists: function(element) {
console.log(document.getElementById(element));
},
exist: function(elements) {
console.log(document.getElementsByTagName(elements).length);
},
isEmpty: function(element) {
var result = document.getElementsByTagName(element)[0].firstChild;
console.log(result);
}
};
ElementUtils.exists('foo'); // null
ElementUtils.exists('test'); // riferimento a elemento
ElementUtils.exist('span'); // 0
ElementUtils.exist('li'); // 3
ElementUtils.isEmpty('p'); // 'Test'
ElementUtils.isEmpty('hr'); // null
})();
Questo approccio ci permette di verificare anche in altri contesti la presenza o meno di nodi nell'albero del documento. Ricordiamo ancora una volta che non tutti i metodi del DOM disponibili restituiscono un valore nel caso di un elemento o di un nodo non trovato.