jQuery has a popular method for accessing the text contents of a targeted DOM node named [cci].text()[/cci]. It allows you to either get the text content or set the text content.
For example, using [cci]text()[/cci] on [cci]$(‘#test’)[/cci] returns [cci]foobar[/cci] below:
[cc]
foobar
$(‘#test’).text(); //=> returns ‘foobar’
[/cc]
By using [cci]text()[/cci] with a parameter, you can set the text to the passed in parameter.
[cc]
foobar
$(‘#test’).text(“cupcakes”); // sets the value to ‘cupcakes’
$(‘#test’).text(); //=> returns ‘cupcakes’
[/cc]
There is a similar jQuery method named [cci]html()[/cci]. It returns the html contents within the targeted DOM node.
[cc]
foobar
$(‘#test’).html(); //=> returns ‘foobar‘
[/cc]
Before we dive into the jQuery source, we can guess that jQuery uses textContent.
In the jQuery source, you can see on line 5702:
[cc]
jQuery.fn.extend({
text: function( value ) {
return jQuery.access( this, function( value ) {
return value === undefined ?
jQuery.text( this ) :
this.empty().append( ( this[0] && this[0].ownerDocument || document ).createTextNode( value ) );
}, null, value, arguments.length );
},
[/cc]
jQuery checks the passed in parameter [cci]value[/cci] using a ternary operator. If [cci]value[/cci] is [cci]undefined[/cci], then jQuery calls [cci]text[/cci]. Else, jQuery sets the value with [cci]createTextNode[/cci].
[cci]jQuery.access[/cci] on line 784 allows jQuery to determine if the value is defined or undefined.
If undefined, [cci]jQuery.text( this )[/cci] runs.
[cc]
// line 5348:
jQuery.text = Sizzle.getText;
[/cc]
Sizzle’s getText looks like:
[cc]
/**
* Utility function for retrieving the text value of an array of DOM nodes
* @param {Array|Element} elem
*/
getText = Sizzle.getText = function( elem ) {
var node,
ret = “”,
i = 0,
nodeType = elem.nodeType;
if ( nodeType ) {
if ( nodeType === 1 || nodeType === 9 || nodeType === 11 ) {
// Use textContent for elements
// innerText usage removed for consistency of new lines (see #11153)
if ( typeof elem.textContent === “string” ) {
return elem.textContent;
} else {
// Traverse its children
for ( elem = elem.firstChild; elem; elem = elem.nextSibling ) {
ret += getText( elem );
}
}
} else if ( nodeType === 3 || nodeType === 4 ) {
return elem.nodeValue;
}
// Do not include comment or processing instruction nodes
} else {
// If no nodeType, this is expected to be an array
for ( ; (node = elem[i]); i++ ) {
// Do not traverse comment nodes
ret += getText( node );
}
}
return ret;
};
[/cc]
You can see that jQuery either returns the string with [cci]textContent[/cci]
[cc]
// Use textContent for elements
// innerText usage removed for consistency of new lines (see #11153)
if ( typeof elem.textContent === “string” ) {
return elem.textContent;
}
[/cc]
or jQuery will traverse the DOM and append them into the [cci]ret[/cci] variable (initialized as as empty string) to return.
[cc]
// Traverse its children
for ( elem = elem.firstChild; elem; elem = elem.nextSibling ) {
ret += getText( elem );
}
[/cc]
If you are passing in a param value into [cci]text()[/cci], then jQuery will empty out the contents of the targeted DOM node and use createTextNode to allow your passed in param to show up.
[cc]
this.empty().append( ( this[0] && this[0].ownerDocument || document ).createTextNode( value ) );
[/cc]
If you are interested in using Core JavaScript to replicate jQuery’s [cci]text()[/cci], you could try the following:
[cc]
lion
var div = document.querySelectorAll(“#test”);
div[0].textContent; //=> returns ‘lion’
[/cc]
This targets the [cci]#test[/cci] div and get the text content.
[cc]
var div = document.querySelectorAll(“#test”);
div[0].appendChild(document.createTextNode(‘pizza’));
[/cc]
This is one way to set the div contents to display ‘pizza’.
Thanks for tuning into to another jQuery without jQuery. Diving into the source code is great for helping you understand how it all works.
jQuery without jQuery is a series that aims to open up the jQuery black box. jQuery is just JavaScript, so you should feel comfortable working at lower levels of abstraction and looking at the jQuery source code written in JavaScript.
