textContent 與 innerText

innerText是IE的私人實現,但也被除FF之外的瀏覽器所實現,textContent 則是w3c的標準API,現在IE9也實現了。

它們區別只要有兩點

1. innerText不能返回script標籤裡面的源碼，textContent則可以，在不支援textContent的瀏覽器，我們可以使用text與innerHTML代替。
2. textContent會保留空行與空格與分行符號，innerText則只會保留分行符號。

為了屏蔽兩者的差異，外國人寫了以下指令碼：

//http://clubajax.org/plain-text-vs-innertext-vs-textcontent///http://d.hatena.ne.jp/cou929_la/20110517/1305644081getPlainText = function(node){// used for testing://return node.innerText || node.textContent;var normalize = function(a){// clean up double line breaks and spacesif(!a) return "";return a.replace(/ +/g, " ").replace(/[\t]+/gm, "").replace(/[ ]+$/gm, "").replace(/^[ ]+/gm, "").replace(/\n+/g, "\n").replace(/\n+$/, "").replace(/^\n+/, "").replace(/\nNEWLINE\n/g, "\n\n").replace(/NEWLINE\n/g, "\n\n"); // IE}var removeWhiteSpace = function(node){// getting rid of empty text nodesvar isWhite = function(node) {return !(/[^\t\n\r ]/.test(node.nodeValue));}var ws = [];var findWhite = function(node){for(var i=0; i<node.childNodes.length;i++){var n = node.childNodes[i];if (n.nodeType==3 && isWhite(n)){ws.push(n)}else if(n.hasChildNodes()){findWhite(n);}}}findWhite(node);for(var i=0;i<ws.length;i++){ws[i].parentNode.removeChild(ws[i])}}var sty = function(n, prop){// Get the style of the node.// Assumptions are made here based on tagName.if(n.style[prop]) return n.style[prop];var s = n.currentStyle || n.ownerDocument.defaultView.getComputedStyle(n, null);if(n.tagName == "SCRIPT") return "none";if(!s[prop]) return "LI,P,TR".indexOf(n.tagName) > -1 ? "block" : n.style[prop];if(s[prop] =="block" && n.tagName=="TD") return "feaux-inline";return s[prop];}var blockTypeNodes = "table-row,block,list-item";var isBlock = function(n){// diaply:block or something elsevar s = sty(n, "display") || "feaux-inline";if(blockTypeNodes.indexOf(s) > -1) return true;return false;}var recurse = function(n){// Loop through all the child nodes// and collect the text, noting whether// spaces or line breaks are needed.if(/pre/.test(sty(n, "whiteSpace"))) {t += n.innerHTML.replace(/\t/g, " ").replace(/\n/g, " "); // to match IEreturn "";}var s = sty(n, "display");if(s == "none") return "";var gap = isBlock(n) ? "\n" : " ";t += gap;for(var i=0; i<n.childNodes.length;i++){var c = n.childNodes[i];if(c.nodeType == 3) t += c.nodeValue;if(c.childNodes.length) recurse(c);}t += gap;return t;}// Use a copy because stuff gets changednode = node.cloneNode(true);// Line breaks aren't picked up by textContentnode.innerHTML = node.innerHTML.replace(/<br>/g, "\n");// Double line breaks after P tags are desired, but would get// stripped by the final RegExp. Using placeholder text.var paras = node.getElementsByTagName("p");for(var i=0; i<paras.length;i++){paras[i].innerHTML += "NEWLINE";}var t = "";removeWhiteSpace(node);// Make the call!return normalize(recurse(node));}

但於擁有多層嵌套關係的父元素來說，對其進行如何複雜的操作無疑是吃力不討好，因此許多架構都無視之！

下面是我的架構元素文本的操作函數

//by 司徒正美           text:function(value){                var node = this[0];                if(value === void 0){                    if(!node){                        return ""                    }else if(node.tagName == "OPTION" || node.tagName === "SCRIPT"){                        return node.text;                    }else{                        return node.textContent || node.innerText ||  dom.getText([ node ]);                    }                }else{                    return this.empty().append( (node && node.ownerDocument || DOC).createTextNode( value ));                }            },