Ways of setting/getting a textNode's value

Question

There are many ways to retrieve/change the value of a text node:

It's not textnode.value, a XUL-only thing
textContent^[mdn] is not supported until IE9
data, inherited by Text from the CharacterData interface
nodeValue^[mdn] from the Node interface

I tend to use .data. Which of them is recommended - they all return the same?

jasssonpet · Answer 1 · 2012-06-04T23:52:40.677

If you have a TEXT_NODE [type 3] textContent will return the nodeValue (MDN):

If the node is a CDATA section, a comment, a processing instruction, or a text node, textContent returns the text inside this node (the nodeValue).

CharacterData is the same as nodeValue for text nodes (MDN).

Text, Comment, and CDATASection all implement CharacterData, which in turn also implements Node.

For text nodes they are the same.

jQuery (Sizzle) uses nodeValue:

/**
 * Utility function for retreiving the text value of an array of DOM nodes
 * @param {Array|Element} elem
 */
var getText = Sizzle.getText = function( elem ) {
    ...
    if ( nodeType === 1 || nodeType === 9 || nodeType === 11 ) {
        // Use textContent || innerText for elements
        if ( typeof elem.textContent === 'string' ) {
            return elem.textContent;
        } else if ( typeof elem.innerText === 'string' ) {
            // Replace IE's carriage returns
            return elem.innerText.replace( rReturn, '' );
        }
        ...
    // TEXT_NODE
    } else if ( nodeType === 3 || nodeType === 4 ) {
        return elem.nodeValue;
    }
    return ret;
};

So using data is fine, but textContent is IE9+ only and a bit slower.

Ways of setting/getting a textNode's value

1 Answers1