DOM: Metodi e proprietà dei nodi

childNodes, firstChild, lastChild, nextSibling, previousSibling, parentNode, nodeValue

by Michele Pisani

HTML

<body id="corpo">
    <div id="contenitorePrincipale">
        <h1>Titolo</h1>
        <h2>Sottotitolo</h2>
        <p>Questo e' un paragrafo</p>
        <ul id="lista">
            <li class="selected_item">Primo elemento</li>
            <li>Secondo elemento</li>
            <li>Terzo elemento</li>
        </ul>
        <p id="par2">Secondo paragrafo (Questo paragrafo verrà rimosso la prima volta che clicchi sul secondo bottone)</p>
        <p >Terzo paragrafo</p>
        <p>Ultimo paragrafo</p>
    </div>        
    <input type="button" value="Analizza il contenitore" onclick="testFirstContainer();" /><br />
    <input type="button" value="Esegui operazioni sul contenitore" onclick="testActions();" /><br /><br />
    NB: il primo bottone dà informazioni sul contenuto del contenitore, il secondo bottone esegue alcune operazioni tra cui eliminare un paragrafo ed inserire e/o clonare e sostituire elementi nella lista.
</body>

CSS

.selected_item {color:#AA0000;}
.added_item {color:#00AA00;}

JavaScript

function testFirstContainer() {
    var idNodo = document.getElementById("contenitorePrincipale");
    var idNodoLista = document.getElementById("lista");
    var numeroFigli = idNodo.childNodes.length;
    var primoNodoFiglio = idNodo.firstChild;
    var ultimoNodoFiglio = idNodo.lastChild;
    
    var listaMsg = "La lista ha " + idNodoLista.childNodes.length + " nodi figli";
    if (!idNodoLista.hasChildNodes) {listaMsg = "La lista NON ha figli";}
    
    alert("primoContenitore ha " + numeroFigli + " figli\nIl valore del primo nodo adiacente al contenitore e' il testo stesso ovvero '" + primoNodoFiglio.nextSibling.firstChild.nodeValue + "'\nIl valore dell'ultimo e' invece '" + ultimoNodoFiglio.previousSibling.firstChild.nodeValue + "'\nInoltre 'primoContenitore' e' figlio di '" + idNodo.parentNode.id + "'\n" + listaMsg);
}

function testActions() {
    var idNodo = document.getElementById("contenitorePrincipale");
    var idNodoLista = document.getElementById("lista");
    var idNodoSecondoPar = document.getElementById("par2");
    if (idNodoSecondoPar != null && idNodoSecondoPar != 'null' && idNodoSecondoPar != '') {
        idNodo.removeChild(idNodoSecondoPar);
    }
    var li_element = document.createElement("li");
    li_element.innerHTML = "<li class='added_item'>Elemento aggiunto in fondo alla lista</li>";
    idNodoLista.appendChild(li_element);
    
    var elementoClonato = idNodoLista.firstChild.nextSibling.cloneNode(true);   
    idNodoLista.insertBefore(elementoClonato,idNodoLista.childNodes[1].nextSibling)
    var elementoSostituto = document.createElement('li');
    elementoSostituto.innerHTML = "Clonato 'Primo elemento', inserito nella lista prima dello stesso e sostituito il testo con il presente messaggio";
        idNodoLista.childNodes[1].firstChild.parentNode.replaceChild(elementoSostituto.firstChild,idNodoLista.childNodes[1].firstChild);
    
    alert(idNodoLista.childNodes[1].firstChild.nodeValue + " - " +...