JavaScript: selezionare il testo di un elemento del DOM a contenuto misto

Un elemento del DOM si dice a contenuto misto quando contiene sia nodi di testo che altri nodi elemento. Volendo implementare una funzione simile al metodo text() di jQuery dobbiamo operare una distinzione tra i nodi figlio di un dato elemento. Vediamo come fare.

Abbiamo il seguente elemento a contenuto misto:

<p id="test">Lorem ipsum dolor <strong>sit</strong> amet et ideo autem <em>aquis</em> huius mundi...</p>​

A noi interessa solo il testo, non gli elementi discendenti. Ecco come procedere:

function getText(element) {
    element = document.getElementById(element);
    var children = element.childNodes,
        len = children.length,
        i, textNodes = [];
    for (i = 0; i < len; i++) {
        var node = children[i];
        var text = '';
        if (node.nodeType == 3) {
            text = node.nodeValue;
        } else if (node.nodeType == 1) {
            text = node.firstChild.nodeValue;
        }

        textNodes.push(text);


    }

    return textNodes.join(' ');

}

alert(getText('test'));

La funzione può essere ulteriormente perfezionata usando la ricorsione, in quanto potrebbero esserci elementi che non hanno un solo nodo di testo ma altri discendenti annidati.

Potete visionare l'esempio finale in questa pagina.