How does jQuery’s .text() work, internally?
I quickly tried to find the implementation in jQuery’s source, but only found this which doesn’t actually seem to define it completely.
From the jQuery Source
jQuery.fn.extend({
text: function( text ) {
if ( jQuery.isFunction(text) ) {
return this.each(function() {
return jQuery(this).text( text.call(this) );
});
}
if ( typeof text !== "object" && text !== undefined ) {
return this.empty().append(开发者_运维百科 (this[0] && this[0].ownerDocument || document).createTextNode( text ) );
}
return jQuery.getText( this );
},
Anyone know?
Clarification:
I know how to use it. I just want to know how to get the text of an element à la jQuery when jQuery isn’t available.jQuery.fn.text can be used for 3 different purposes, as the source you pasted clearly shows. The case you're looking for, is the third one - returning the text value of an element.
jQuery uses jQuery.text() method to get the text value of an element, and jQuery.text points to Sizzle.getText()
jQuery.text = Sizzle.getText;
And here's the definition of getText function.
// Utility function for retreiving the text value of an array of DOM nodes
Sizzle.getText = function( elems ) {
var ret = "", elem;
for ( var i = 0; elems[i]; i++ ) {
elem = elems[i];
// Get the text from text nodes and CDATA nodes
if ( elem.nodeType === 3 || elem.nodeType === 4 ) {
ret += elem.nodeValue;
// Traverse everything else, except comment nodes
} else if ( elem.nodeType !== 8 ) {
ret += Sizzle.getText( elem.childNodes );
}
}
return ret;
};
Working example: http://jsfiddle.net/cBsDN/
var text = element.innerText || element.textContent;
Example: http://jsfiddle.net/XnL7H/1/
It uses the Sizzle getText method:
// Utility function for retreiving the text value of an array of DOM nodes
Sizzle.getText = function( elems ) {
var ret = "", elem;
for ( var i = 0; elems[i]; i++ ) {
elem = elems[i];
// Get the text from text nodes and CDATA nodes
if ( elem.nodeType === 3 || elem.nodeType === 4 ) {
ret += elem.nodeValue;
// Traverse everything else, except comment nodes
} else if ( elem.nodeType !== 8 ) {
ret += Sizzle.getText( elem.childNodes );
}
}
return ret;
};
http://sizzlejs.com/
Assuming you know how to get an element in JavaScript with out jQuery.
var el = document.getElementById("my-element");
And then you just have to use two properties that are available for each element innerText
and innerHTML
. So to get the text you use:
var text = el.innerText;
Or to get HTML, you do:
var html = el.innerHTML;
If you know the different of createTextNode and createElement, you can understand how to jquery.text work.
text function create a DOM text node. The browser will tread the value of node as text.
精彩评论