js有關(guān)元素內(nèi)容操作小結(jié)
更新時(shí)間:2011年12月20日 01:39:09 作者:
最近在研習(xí)“犀牛書6th”,看完Element Content as HTML一節(jié),就想隨即展開寫點(diǎn)東西記錄記錄
1.innerHTML
這個(gè)大家一定都很熟悉,可讀可寫,修改元素內(nèi)容相當(dāng)快捷方便,在兼容問題上可以參考W3Help中一個(gè)知識(shí)記錄。
2.outerHTML
此方法可以用于對(duì)元素自身的快速替換,比如:
<p id="hello">Hello, I am a demo</p>
$('hello').outerHTML = '<p>Hello, I am a replacement</p>';
遺憾的是,firefox目前還不支持(我當(dāng)前用firefox8),其他瀏覽器支持的還不錯(cuò),在ff中可以用innerHTML來模擬實(shí)現(xiàn)。
3.documentFragment
DocumentFragment能實(shí)現(xiàn)高效率的DOM節(jié)點(diǎn)插入操作,我們可以新建一個(gè)DocumentFragment。
var docFragment = document.createDocumentFragment();
它支持元素節(jié)點(diǎn)的appendChild方法,可以利用它進(jìn)行追加節(jié)點(diǎn),相當(dāng)于內(nèi)存中的一個(gè)臨時(shí)空間, 然后一次性加入DOM Tree中,較少瀏覽器相關(guān)的reflow和repaint事件,在之前的博文中有提到。
4.insertAdjacentHTML
這個(gè)方法很有意思,是IE4最先引入的,目前也寫入了HTML5標(biāo)準(zhǔn),目前所有瀏覽器都支持,ff是8才剛開始支持的。 它能夠?qū)崿F(xiàn)在元素的里外,共4個(gè)地方靈活的添加內(nèi)容,例如:
<!-- beforebegin --><p id="test"><!-- afterbegin -->hello, I am a demo.<!-- beforeend--></p><!-- afterend-->
$('test').insertAdjacentHTML('beforebegin', /* your content here */);
這確實(shí)很cool不是么,但遺憾的是,IE自己引入,確在IE6~8的版本中存在不少bug,比如我測(cè)試中遇到如果元素是div的話, 能夠在四個(gè)地方,都能順利插入內(nèi)容,這是我們所預(yù)期的,但是我換成p元素的話,‘beforebegin'和‘a(chǎn)fterend'就會(huì)報(bào)錯(cuò), 它變得只支持p外部的內(nèi)容插入,不允許插入到p的內(nèi)部,還有tr,td不支持此方法等各種bug。IE9測(cè)下來,表現(xiàn)預(yù)期。 關(guān)于這個(gè)方法jQuery之父,有篇博客有講,感興趣的可以稍微參考下http://ejohn.org/blog/dom-insertadjacenthtml/
5.textContent
這個(gè)是針對(duì)元素中的文本內(nèi)容的操作,提取元素本身和其子元素中文本內(nèi)容,這個(gè)用的頻率不是很高,但還是要知道下, 比如:
<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
這個(gè)也是由IE最初引入的,除了firefox,目前其他瀏覽器也都支持,但是結(jié)果有些微妙的不同。在opera中,結(jié)果和textContent一致,在chrome中,與包含該文本元素的樣式有關(guān)。在IE9中,與包含該文本元素的樣式有關(guān)。 事實(shí)上,innerText和textContent看似差不多,但還是有一些值得注意的不同之處。 具體MDN上有一定的說明:
1.textContent能夠獲取script,style元素中得文本。innerText不行
2.innerText結(jié)果跟樣式有關(guān),不能獲取隱藏元素的文本內(nèi)容,textContent則不受限制
3.innerText會(huì)觸發(fā)瀏覽器內(nèi)部的reflow事件,而textContent不會(huì),這個(gè)對(duì)效率有點(diǎn)影響。
當(dāng)然對(duì)于IE6~8,我們可以比較容易地通過遍歷節(jié)點(diǎn)來實(shí)現(xiàn)textContent的效果。如犀牛書中所給出的解決方法:
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('');
}
}
這個(gè)大家一定都很熟悉,可讀可寫,修改元素內(nèi)容相當(dāng)快捷方便,在兼容問題上可以參考W3Help中一個(gè)知識(shí)記錄。
2.outerHTML
此方法可以用于對(duì)元素自身的快速替換,比如:
復(fù)制代碼 代碼如下:
<p id="hello">Hello, I am a demo</p>
$('hello').outerHTML = '<p>Hello, I am a replacement</p>';
遺憾的是,firefox目前還不支持(我當(dāng)前用firefox8),其他瀏覽器支持的還不錯(cuò),在ff中可以用innerHTML來模擬實(shí)現(xiàn)。
3.documentFragment
DocumentFragment能實(shí)現(xiàn)高效率的DOM節(jié)點(diǎn)插入操作,我們可以新建一個(gè)DocumentFragment。
var docFragment = document.createDocumentFragment();
它支持元素節(jié)點(diǎn)的appendChild方法,可以利用它進(jìn)行追加節(jié)點(diǎn),相當(dāng)于內(nèi)存中的一個(gè)臨時(shí)空間, 然后一次性加入DOM Tree中,較少瀏覽器相關(guān)的reflow和repaint事件,在之前的博文中有提到。
4.insertAdjacentHTML
這個(gè)方法很有意思,是IE4最先引入的,目前也寫入了HTML5標(biāo)準(zhǔn),目前所有瀏覽器都支持,ff是8才剛開始支持的。 它能夠?qū)崿F(xiàn)在元素的里外,共4個(gè)地方靈活的添加內(nèi)容,例如:
復(fù)制代碼 代碼如下:
<!-- beforebegin --><p id="test"><!-- afterbegin -->hello, I am a demo.<!-- beforeend--></p><!-- afterend-->
$('test').insertAdjacentHTML('beforebegin', /* your content here */);
這確實(shí)很cool不是么,但遺憾的是,IE自己引入,確在IE6~8的版本中存在不少bug,比如我測(cè)試中遇到如果元素是div的話, 能夠在四個(gè)地方,都能順利插入內(nèi)容,這是我們所預(yù)期的,但是我換成p元素的話,‘beforebegin'和‘a(chǎn)fterend'就會(huì)報(bào)錯(cuò), 它變得只支持p外部的內(nèi)容插入,不允許插入到p的內(nèi)部,還有tr,td不支持此方法等各種bug。IE9測(cè)下來,表現(xiàn)預(yù)期。 關(guān)于這個(gè)方法jQuery之父,有篇博客有講,感興趣的可以稍微參考下http://ejohn.org/blog/dom-insertadjacenthtml/
5.textContent
這個(gè)是針對(duì)元素中的文本內(nèi)容的操作,提取元素本身和其子元素中文本內(nèi)容,這個(gè)用的頻率不是很高,但還是要知道下, 比如:
復(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
這個(gè)也是由IE最初引入的,除了firefox,目前其他瀏覽器也都支持,但是結(jié)果有些微妙的不同。在opera中,結(jié)果和textContent一致,在chrome中,與包含該文本元素的樣式有關(guān)。在IE9中,與包含該文本元素的樣式有關(guān)。 事實(shí)上,innerText和textContent看似差不多,但還是有一些值得注意的不同之處。 具體MDN上有一定的說明:
1.textContent能夠獲取script,style元素中得文本。innerText不行
2.innerText結(jié)果跟樣式有關(guān),不能獲取隱藏元素的文本內(nèi)容,textContent則不受限制
3.innerText會(huì)觸發(fā)瀏覽器內(nèi)部的reflow事件,而textContent不會(huì),這個(gè)對(duì)效率有點(diǎn)影響。
當(dāng)然對(duì)于IE6~8,我們可以比較容易地通過遍歷節(jié)點(diǎn)來實(shí)現(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('');
}
}
您可能感興趣的文章:
- JavaScript獲取元素尺寸和大小操作總結(jié)
- javascript數(shù)組操作(創(chuàng)建、元素刪除、數(shù)組的拷貝)
- js/jQuery對(duì)象互轉(zhuǎn)(快速操作dom元素)
- JS實(shí)現(xiàn)為動(dòng)態(tài)創(chuàng)建的元素添加事件操作示例
- JS實(shí)現(xiàn)數(shù)組簡單去重及數(shù)組根據(jù)對(duì)象中的元素去重操作示例
- js中數(shù)組插入、刪除元素操作的方法
- JavaScript DOM元素常見操作詳解【添加、刪除、修改等】
- 一個(gè)JavaScript操作元素定位元素的實(shí)例
- JavaScript中用sort()方法對(duì)數(shù)組元素進(jìn)行排序的操作
- JavaScript操作元素實(shí)例大全
相關(guān)文章
游戲開發(fā)中如何使用CocosCreator進(jìn)行音效處理
這篇文章主要介紹了游戲開發(fā)中如何使用CocosCreator進(jìn)行音效處理,并對(duì)音效組件進(jìn)行封裝,方便以后使用,同學(xué)們看完之后,一定要親手實(shí)驗(yàn)一下2021-04-04在javascript中實(shí)現(xiàn)函數(shù)數(shù)組的方法
js不進(jìn)行類型檢查,數(shù)組可以存放任何東西。于是我就想數(shù)組里可否存放函數(shù)呢,下面就為大家詳細(xì)介紹下2013-12-12JavaScript+html5 canvas繪制繽紛多彩的三角形效果完整實(shí)例
這篇文章主要介紹了JavaScript+html5 canvas繪制繽紛多彩的三角形效果,以完整實(shí)例形式分析了html5的canvas繪制圖形的相關(guān)技巧,需要的朋友可以參考下2016-01-01Bootstrap布局組件應(yīng)用實(shí)例講解
這篇文章主要針對(duì)Bootstrap布局組件應(yīng)用進(jìn)行實(shí)例講解,感興趣的小伙伴們可以參考一下2016-02-02在JavaScript中對(duì)HTML進(jìn)行反轉(zhuǎn)義詳解
下面小編就為大家?guī)硪黄贘avaScript中對(duì)HTML進(jìn)行反轉(zhuǎn)義詳解。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05JavaScript實(shí)現(xiàn)簡單抽獎(jiǎng)系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡單抽獎(jiǎng)系統(tǒng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03