快捷導(dǎo)航

js有關(guān)元素內(nèi)容操作小結(jié)

更新時間：2011年12月20日 01:39:09 作者：

最近在研習(xí)“犀牛書6th”，看完Element Content as HTML一節(jié)，就想隨即展開寫點東西記錄記錄

1.innerHTML
這個大家一定都很熟悉，可讀可寫，修改元素內(nèi)容相當(dāng)快捷方便，在兼容問題上可以參考W3Help中一個知識記錄。

2.outerHTML
此方法可以用于對元素自身的快速替換,比如:

 
<p id="hello">Hello, I am a demo</p> 
$('hello').outerHTML = '<p>Hello, I am a replacement</p>'; 

遺憾的是，firefox目前還不支持（我當(dāng)前用firefox8），其他瀏覽器支持的還不錯，在ff中可以用innerHTML來模擬實現(xiàn)。

3.documentFragment
DocumentFragment能實現(xiàn)高效率的DOM節(jié)點插入操作，我們可以新建一個DocumentFragment。

var docFragment = document.createDocumentFragment();

它支持元素節(jié)點的appendChild方法，可以利用它進行追加節(jié)點，相當(dāng)于內(nèi)存中的一個臨時空間，然后一次性加入DOM Tree中，較少瀏覽器相關(guān)的reflow和repaint事件，在之前的博文中有提到。

4.insertAdjacentHTML
這個方法很有意思，是IE4最先引入的，目前也寫入了HTML5標(biāo)準(zhǔn)，目前所有瀏覽器都支持，ff是8才剛開始支持的。它能夠?qū)崿F(xiàn)在元素的里外，共4個地方靈活的添加內(nèi)容，例如：

復(fù)制代碼代碼如下:

 
<!-- beforebegin --><p id="test"><!-- afterbegin -->hello, I am a demo.<!-- beforeend--></p><!-- afterend--> 
$('test').insertAdjacentHTML('beforebegin', /* your content here */); 

這確實很cool不是么，但遺憾的是，IE自己引入，確在IE6~8的版本中存在不少bug,比如我測試中遇到如果元素是div的話，能夠在四個地方，都能順利插入內(nèi)容，這是我們所預(yù)期的，但是我換成p元素的話，‘beforebegin'和‘a(chǎn)fterend'就會報錯，它變得只支持p外部的內(nèi)容插入，不允許插入到p的內(nèi)部，還有tr，td不支持此方法等各種bug。IE9測下來，表現(xiàn)預(yù)期。關(guān)于這個方法jQuery之父，有篇博客有講，感興趣的可以稍微參考下http://ejohn.org/blog/dom-insertadjacenthtml/

5.textContent
這個是針對元素中的文本內(nèi)容的操作，提取元素本身和其子元素中文本內(nèi)容，這個用的頻率不是很高，但還是要知道下，比如:

復(fù)制代碼代碼如下:

 
<div id="test"><p>whatever, blah blah.</p>hello，I am a <em>Demo</em></div> 
$('test').textContent //whatever, blah blah.hello, I am a Demo 

把文本直接連接起來。IE9+和其他瀏覽器都很好的支持此方法。

6.innerText
這個也是由IE最初引入的，除了firefox，目前其他瀏覽器也都支持，但是結(jié)果有些微妙的不同。在opera中，結(jié)果和textContent一致，在chrome中，與包含該文本元素的樣式有關(guān)。在IE9中，與包含該文本元素的樣式有關(guān)。事實上，innerText和textContent看似差不多，但還是有一些值得注意的不同之處。具體MDN上有一定的說明：

1.textContent能夠獲取script，style元素中得文本。innerText不行

2.innerText結(jié)果跟樣式有關(guān)，不能獲取隱藏元素的文本內(nèi)容，textContent則不受限制

3.innerText會觸發(fā)瀏覽器內(nèi)部的reflow事件，而textContent不會，這個對效率有點影響。

當(dāng)然對于IE6~8，我們可以比較容易地通過遍歷節(jié)點來實現(xiàn)textContent的效果。如犀牛書中所給出的解決方法:

復(fù)制代碼代碼如下:

 
function textContent(e) { 
var child, type, s = []; // s holds the text of all children 
for(child = e.firstChild; child != null; child = child.nextSibling) { 
type = child.nodeType; 
if(type === 3 || type === 4) { //Text and CDATASection nodes 
s.push(child.nodeValue); 
} else if(type === 1) { 
s.push(textContent(child)); 
} 
return s.join(''); 
} 
} 

您可能感興趣的文章: