jQuery中實(shí)現(xiàn)text()的方法

<div class="divOne">
 <p>嘿嘿嘿</p>
</div>
<div class="divOne">
 <p>哈哈哈</p>
</div>

 function readText(elem) {
 let node,
 ret = "",
 i = 0,
 nodeType = elem.nodeType
 console.log(nodeType,'nodeType22')
 //如果selector是類的話，會(huì)有多個(gè)目標(biāo)元素，此時(shí)需要分別單個(gè)循環(huán)
 //比如document.querySelectorAll('.divOne').nodeType ->undefined
 if (!nodeType) {
 while ((node = elem[i++])) {
 //單個(gè)獲取
 ret += readText(node)
 }
 }
 //元素節(jié)點(diǎn)，文檔節(jié)點(diǎn)，文檔碎片
 else if (nodeType === 1 || nodeType === 9 || nodeType === 11) {
 //如果目標(biāo)元素的內(nèi)容是文本，則直接返回
 if (typeof elem.textContent === "string") {
 /*jQuery沒有用innerText獲取文本的值，http://bugs.jquery.com/ticket/11153，
 大概就是在IE8中新節(jié)點(diǎn)插入會(huì)保留所有回車。
 所以jQuery采用了textContent獲取文本值，
 textContent本身是dom3規(guī)范的，可以兼容火狐下的innerText問題。*/
 return elem.textContent
 }
 //如果節(jié)點(diǎn)內(nèi)容不是文本，則循環(huán)子節(jié)點(diǎn)，并依次獲取它們的文本節(jié)點(diǎn)
 else {
 for (elem = elem.firstChild; elem; elem = elem.nextSibling) {
 ret += readText(elem)
 }
 }
 }
 //文本節(jié)點(diǎn)、一個(gè)文檔的CDATA部分（沒遇到過這個(gè)）
 else if (nodeType === 3 || nodeType === 4) {
 //返回節(jié)點(diǎn)值
 return elem.nodeValue;
 }
 //nodeType：注釋節(jié)點(diǎn) 8，處理指令 7
 //text()方法不處理這兩個(gè)類型節(jié)點(diǎn)
 return ret
 }

 function writeText(value) {
 let elem,
 i = 0;
 //先清空目標(biāo)元素的內(nèi)容
 customEmpty.call(this)
 //循環(huán)
 for (; (elem = this[i]) != null; i++) {
 //元素節(jié)點(diǎn)，文檔碎片，文檔節(jié)點(diǎn)
 if (elem.nodeType === 1 || elem.nodeType === 11 || elem.nodeType === 9) {
 // text()方法不會(huì)解析標(biāo)簽
 elem.textContent = value;
 }
 }
 //return this 方便鏈?zhǔn)秸{(diào)用
 return this
 }

 function customEmpty() {
 let elem,
 i = 0;
 //注意for循環(huán)的寫法
 for (; (elem = this[i]) != null; i++) {
 //如果是元素節(jié)點(diǎn)的話，清空該節(jié)點(diǎn)的所有內(nèi)容
 if (elem.nodeType === 1) {
 elem.textContent = "";
 }
 }
 return this;
 }

//源碼6152行
 text: function( value ) {
 return access( this, function( value ) {
 return value === undefined ?
 //讀
 //如果直接調(diào)用text()的話,就調(diào)用Sizzle.getText
 jQuery.text( this ) :
 //寫
 //循環(huán)
 this.empty().each( function() {
 //先清空目標(biāo)元素的內(nèi)容，然后再賦值
 if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
 console.log(value,'value6159')
 //如果包含標(biāo)簽的話，需要用html()方法，text()方法不會(huì)解析標(biāo)簽
 /*jQuery沒有用innerText獲取文本的值，http://bugs.jquery.com/ticket/11153，
 大概就是在IE8中新節(jié)點(diǎn)插入會(huì)保留所有回車。
 所以jQuery采用了textContent獲取文本值，
 textContent本身是dom3規(guī)范的，可以兼容火狐下的innerText問題。*/
 this.textContent = value;
 }
 } )
 }, null, value, arguments.length );
 },

 //源碼2833行
 jQuery.text = Sizzle.getText;
Sizzle.getText()：
//源碼1642行
getText = Sizzle.getText = function( elem ) {
 var node,
 ret = "",
 i = 0,
 nodeType = elem.nodeType;

 if ( !nodeType ) {
 while ( (node = elem[i++]) ) {
 // Do not traverse comment nodes
 ret += getText( node );
 }
 }
 //元素節(jié)點(diǎn)、文檔節(jié)點(diǎn)、文檔碎片
 else if ( nodeType === 1 || nodeType === 9 || nodeType === 11 ) {
 // Use textContent for elements
 // innerText usage removed for consistency of new lines (jQuery #11153)
 //如果目標(biāo)元素的子節(jié)點(diǎn)是文本節(jié)點(diǎn)，則直接返回它的textContent
 if ( typeof elem.textContent === "string" ) {
 /*jQuery沒有用innerText獲取文本的值，http://bugs.jquery.com/ticket/11153，
 大概就是在IE8中新節(jié)點(diǎn)插入會(huì)保留所有回車。
 所以jQuery采用了textContent獲取文本值，
 textContent本身是dom3規(guī)范的，可以兼容火狐下的innerText問題。*/
 return elem.textContent;
 }
 //如果子節(jié)點(diǎn)不是文本節(jié)點(diǎn)，則循環(huán)子節(jié)點(diǎn)，并依次獲取它們的文本節(jié)點(diǎn)
 else {
 // Traverse its children
 for ( elem = elem.firstChild; elem; elem = elem.nextSibling ) {
 ret += getText( elem );
 }
 }
 }
 //文本節(jié)點(diǎn)、一個(gè)文檔的CDATA部分（沒遇到過這個(gè)）
 else if ( nodeType === 3 || nodeType === 4 ) {
 return elem.nodeValue;
 }
 // Do not include comment or processing instruction nodes
 return ret;
 };

 //寫
 //循環(huán)
 this.empty().each( function() {
 //先清空目標(biāo)元素的內(nèi)容，然后再賦值
 if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
 console.log(value,'value6159')
 //如果包含標(biāo)簽的話，需要用html()方法，text()方法不會(huì)解析標(biāo)簽
 /*jQuery沒有用innerText獲取文本的值，http://bugs.jquery.com/ticket/11153，
 大概就是在IE8中新節(jié)點(diǎn)插入會(huì)保留所有回車。
 所以jQuery采用了textContent獲取文本值，
 textContent本身是dom3規(guī)范的，可以兼容火狐下的innerText問題。*/
 this.textContent = value;
 }
 } )

 //源碼6231行
 empty: function() {
 var elem,
 i = 0;
 for ( ; ( elem = this[ i ] ) != null; i++ ) {
 //如果是元素節(jié)點(diǎn)的話
 if ( elem.nodeType === 1 ) {
 // Prevent memory leaks
 //清空內(nèi)容和事件，防止內(nèi)存泄漏
 jQuery.cleanData( getAll( elem, false ) );
 // Remove any remaining nodes
 //清空節(jié)點(diǎn)所有內(nèi)容
 elem.textContent = "";
 }
 }
 return this;
 },

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>jQuery之text()</title>
</head>
<body>
<script src="jQuery.js"></script>
<div class="divOne">
 <!--<p id="divTwo">嘿嘿嘿</p>-->
 <p>嘿嘿嘿</p>
</div>
<div class="divOne">
 <p>哈哈哈</p>
</div>
<input type="text" id="inputOne">
<script>
 function readText(elem) {
 let node,
 ret = "",
 i = 0,
 nodeType = elem.nodeType
 console.log(nodeType,'nodeType22')
 //如果selector是類的話，會(huì)有多個(gè)目標(biāo)元素，此時(shí)需要分別單個(gè)循環(huán)
 //比如document.querySelectorAll('.divOne').nodeType ->undefined
 if (!nodeType) {
 while ((node = elem[i++])) {
 //單個(gè)獲取
 ret += readText(node)
 }
 }
 //元素節(jié)點(diǎn)，文檔節(jié)點(diǎn)，文檔碎片
 else if (nodeType === 1 || nodeType === 9 || nodeType === 11) {
 //如果目標(biāo)元素的內(nèi)容是文本，則直接返回
 if (typeof elem.textContent === "string") {
 /*jQuery沒有用innerText獲取文本的值，http://bugs.jquery.com/ticket/11153，
 大概就是在IE8中新節(jié)點(diǎn)插入會(huì)保留所有回車。
 所以jQuery采用了textContent獲取文本值，
 textContent本身是dom3規(guī)范的，可以兼容火狐下的innerText問題。*/
 return elem.textContent
 }
 //如果節(jié)點(diǎn)的內(nèi)容不是文本，則循環(huán)子節(jié)點(diǎn)，并依次獲取它們的文本節(jié)點(diǎn)
 else {
 for (elem = elem.firstChild; elem; elem = elem.nextSibling) {
 ret += readText(elem)
 }
 }
 }
 //文本節(jié)點(diǎn)、一個(gè)文檔的CDATA部分（沒遇到過這個(gè)）
 else if (nodeType === 3 || nodeType === 4) {
 //返回節(jié)點(diǎn)值
 return elem.nodeValue;
 }
 //nodeType：注釋節(jié)點(diǎn) 8，處理指令 7
 //text()方法不處理這兩個(gè)類型節(jié)點(diǎn)
 return ret
 }
 function customEmpty() {
 let elem,
 i = 0;
 //注意for循環(huán)的寫法
 for (; (elem = this[i]) != null; i++) {
 //如果是元素節(jié)點(diǎn)的話，清空該節(jié)點(diǎn)的所有內(nèi)容
 if (elem.nodeType === 1) {
 elem.textContent = "";
 }
 }
 return this;
 }
 function writeText(value) {
 let elem,
 i = 0;
 //先清空目標(biāo)元素的內(nèi)容
 customEmpty.call(this)
 //循環(huán)
 for (; (elem = this[i]) != null; i++) {
 //元素節(jié)點(diǎn)，文檔碎片，文檔節(jié)點(diǎn)
 if (elem.nodeType === 1 || elem.nodeType === 11 || elem.nodeType === 9) {
 // text()方法不會(huì)解析標(biāo)簽
 elem.textContent = value;
 }
 }
 //return this 方便鏈?zhǔn)秸{(diào)用
 return this
 }
 function customText(value) {
 return value === undefined ?
 //讀
 readText(this) :
 //寫
 writeText.call(this, value)
 }
 customText.call(document.querySelectorAll('.divOne'))
 customText.call(document.querySelectorAll('.divOne'),"Hello <b>world</b>!")
 // let p=document.createElement('p')
 // p.innerText='哈哈哈'
 console.log($(".divOne").text())
 // customText.call(document.querySelectorAll('.divOne'))
 // console.log(document.querySelectorAll('.divOne').nodeType,'childnode81')
 // console.log(document.querySelectorAll('.divOne')[0].textContent,'childnode81')
 // $("#divOne").text('<p>aaaa</p>')
 // console.log(document.querySelector("#divTwo"))
</script>
</body>
</html>