Firefox outerHTML實(shí)現(xiàn)代碼
更新時(shí)間：2009年06月04日 23:56:35 作者：
firefox沒(méi)有outerHTML用以下方法解決
減少DOM數(shù)可以加快瀏覽器的在解析頁(yè)面過(guò)程中DOM Tree和render tree的構(gòu)建，從而提高頁(yè)面性能。為此我們可以把頁(yè)面中那些首屏渲染不可見(jiàn)的部分HTML暫存在TextArea中，等完成渲染后再處理這部分HTML來(lái)達(dá)到這個(gè)目的。 要把TextArea 中暫存的HTML內(nèi)容添加到頁(yè)面中，使用元素的outerHTML屬性是最簡(jiǎn)單方便的了,不過(guò)在DOM標(biāo)準(zhǔn)中并沒(méi)有定義outerHTML，支持的瀏覽器有IE6+,safari, operal和 Chrome，經(jīng)測(cè)試FF4.0- 中還不支持。所以我們就來(lái)實(shí)現(xiàn)一個(gè)可以跨瀏覽器的outerHTML。
outerHTML 就是獲取或設(shè)置包含元素標(biāo)簽本身在內(nèi)的html。下面是實(shí)現(xiàn)代碼：
復(fù)制代碼 代碼如下:
if(typeof HTMLElement !== "undefined" && !("outerHTML" in HTMLElement.prototype)) {
//console.log("defined outerHTML");
HTMLElement.prototype.__defineSetter__("outerHTML",function(str){
var fragment = document.createDocumentFragment();
var div = document.createElement("div");
div.innerHTML = str;
for(var i=0, n = div.childNodes.length; i<n; i++){
fragment.appendChild(div.childNodes[i]);
}
this.parentNode.replaceChild(fragment, this);
});
//
HTMLElement.prototype.__defineGetter__("outerHTML",function(){
var tag = this.tagName;
var attributes = this.attributes;
var attr = [];
//for(var name in attributes){//遍歷原型鏈上成員
for(var i=0,n = attributes.length; i<n; i++){//n指定的屬性個(gè)數(shù)
if(attributes[i].specified){
attr.push(attributes[i].name + '="' + attributes[i].value + '"');
}
}
return ((!!this.innerHTML) ?
'<' + tag + ' ' + attr.join(' ')+'>'+this.innerHTML+'</'+tag+'>' :
'<' + tag + ' ' +attr.join(' ')+'/>');
});
}
代碼說(shuō)明：
1 代碼中首先條件判斷來(lái)監(jiān)測(cè)瀏覽器是否支持outerHTML以避免覆蓋瀏覽器原生的實(shí)現(xiàn)。
2 "__defineSetter__"，"__defineGetter__" 是firefox瀏覽器私有方面。分別定義當(dāng)設(shè)置屬性值和獲取屬性要執(zhí)行的操作。
3 在"__defineSetter__" "outerHTML"中為了避免插入頁(yè)面中元素過(guò)多導(dǎo)致頻繁發(fā)生reflow影響性能。使用了文檔碎片對(duì)象fragment來(lái)暫存需要插入頁(yè)面中DOM元素。
4 在"__defineGetter__" "outerHTML" 中使用元素attributes屬性來(lái)遍歷給元素指定的屬性。結(jié)合innerHTML返回了包含原屬本身在內(nèi)的html字符串。
測(cè)試代碼：
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>outerHTML</title>
</head>
<body>
<div id="content" class="test">
<p>This is <strong>paragraph</strong> with a list following it</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
<script>
if(typeof HTMLElement !== "undefined" && !("outerHTML" in HTMLElement.prototype)) {
console.log("defined outerHTML");
HTMLElement.prototype.__defineSetter__("outerHTML",function(str){
var fragment = document.createDocumentFragment();
var div = document.createElement("div");
div.innerHTML = str;
for(var i=0, n = div.childNodes.length; i<n; i++){
fragment.appendChild(div.childNodes[i]);
}
this.parentNode.replaceChild(fragment, this);
});
//
HTMLElement.prototype.__defineGetter__("outerHTML",function(){
var tag = this.tagName;
var attributes = this.attributes;
var attr = [];
//for(var name in attributes){//遍歷原型鏈上成員
for(var i=0,n = attributes.length; i<n; i++){//n指定的屬性個(gè)數(shù)
if(attributes[i].specified){
attr.push(attributes[i].name + '="' + attributes[i].value + '"');
}
}
return ((!!this.innerHTML) ?
'<' + tag + ' ' + attr.join(' ')+'>'+this.innerHTML+'</'+tag+'>' :
'<' + tag + ' ' +attr.join(' ')+'/>');
});
}
var content = document.getElementById("content");
alert(content.outerHTML)
</script>
</body>
</html>
假設(shè)要獲取 <p id="outerID">sdfdsdfsd</p> 的 P的outerHTML
代碼：
復(fù)制代碼 代碼如下:
var _p = document.getElementById('outerID');
_P = _P.cloneNode();
var _DIV = document.createElement();
_DIV.appendChild(_P);
alert(_DIV.innerHTML); 就是P的outerHTML;
firefox沒(méi)有outerHTML用以下方法解決
復(fù)制代碼 代碼如下:
/**
* 兼容firefox的 outerHTML 使用以下代碼后，firefox可以使用element.outerHTML
**/
if(window.HTMLElement) {
HTMLElement.prototype.__defineSetter__("outerHTML",function(sHTML){
var r=this.ownerDocument.createRange();
r.setStartBefore(this);
var df=r.createContextualFragment(sHTML);
this.parentNode.replaceChild(df,this);
return sHTML;
});
HTMLElement.prototype.__defineGetter__("outerHTML",function(){
var attr;
var attrs=this.attributes;
var str="<"+this.tagName.toLowerCase();
for(var i=0;i<attrs.length;i++){
attr=attrs[i];
if(attr.specified)
str+=" "+attr.name+'="'+attr.value+'"';
}
if(!this.canHaveChildren)
return str+">";
return str+">"+this.innerHTML+"</"+this.tagName.toLowerCase()+">";
});
HTMLElement.prototype.__defineGetter__("canHaveChildren",function(){
switch(this.tagName.toLowerCase()){
case "area":
case "base":
case "basefont":
case "col":
case "frame":
case "hr":
case "img":
case "br":
case "input":
case "isindex":
case "link":
case "meta":
case "param":
return false;
}
return true;
});
}
測(cè)試有效.
關(guān)于insertAdjacentHTML兼容的解新決辦法
復(fù)制代碼 代碼如下:
//---在組件最后插入html代碼
function InsertHtm(op,code,isStart){
if(Dvbbs_IsIE5)
op.insertAdjacentHTML(isStart ? "afterbegin" : "afterEnd",code);
else{
var range=op.ownerDocument.createRange();
range.setStartBefore(op);
var fragment = range.createContextualFragment(code);
if(isStart)
op.insertBefore(fragment,op.firstChild);
else
op.appendChild(fragment);
}
}
關(guān)于inner/outerHTML在NC6中的參考
DOM level 1 has no methods to allow for insertion of unparsed HTML into the document tree (as IE allows with insertAdjacentHTML or assignment to inner/outerHTML).NN6 (currently in beta as NN6PR3) know supports the .innerHTMLproperty of HTMLElements so that you can read or write the innerHTML of a page element like in IE4+.NN6 also provides a DOM level 2 compliant Range object to which a createContextualFragment('html source string')was added to spare DOM scripters the task of parsing html and creating DOM elements.You create a Range with var range = document.createRange();Then you should set its start point to the element where you want to insert the html for instance var someElement = document.getElementById('elementID'); range.setStartAfter(someElement);Then you create a document fragment from the html source to insert for example var docFrag = range.createContextualFragment('<P>Kibology for all.</P>');and insert it with DOM methods someElement.appendChild(docFrag);The Netscape JavaScript 1.5 version even provides so called setters for properties which together with the ability to prototype the DOM elements allows to emulate setting of outerHMTL for NN6:<SCRIPT LANGUAGE="JavaScript1.5">if (navigator.appName == 'Netscape') { HTMLElement.prototype.outerHTML setter = function (html) { this.outerHTMLInput = html; var range = this.ownerDocument.createRange(); range.setStartBefore(this); var docFrag = range.createContextualFragment(html); this.parentNode.replaceChild(docFrag, this); }}</SCRIPT> If you insert that script block you can then write cross browser code assigning to .innerHTML .outerHTMLfor instance document.body.innerHTML = '<P>Scriptology for all</P>';which works with both IE4/5 and NN6.The following provides getter functions for .outerHTMLto allow to read those properties in NN6 in a IE4/5 compatible way. Note that while the scheme of traversing the document tree should point you in the right direction the code example might not satisfy your needs as there are subtle difficulties when trying to reproduce the html source from the document tree. See for yourself whether you like the result and improve it as needed to cover other exceptions than those handled (for the empty elements and the textarea element).<HTML><HEAD><STYLE></STYLE><SCRIPT LANGUAGE="JavaScript1.5">var emptyElements = { HR: true, BR: true, IMG: true, INPUT: true};var specialElements = { TEXTAREA: true};HTMLElement.prototype.outerHTML getter = function () { return getOuterHTML (this);}function getOuterHTML (node) { var html = ''; switch (node.nodeType) { case Node.ELEMENT_NODE: html += '<'; html += node.nodeName; if (!specialElements[node.nodeName]) { for (var a = 0; a < node.attributes.length; a++) html += ' ' + node.attributes[a].nodeName.toUpperCase() + '="' + node.attributes[a].nodeValue + '"'; html += '>'; if (!emptyElements[node.nodeName]) { html += node.innerHTML; html += '<\/' + node.nodeName + '>'; } } else switch (node.nodeName) { case 'TEXTAREA': for (var a = 0; a < node.attributes.length; a++) if (node.attributes[a].nodeName.toLowerCase() != 'value') html += ' ' + node.attributes[a].nodeName.toUpperCase() + '="' + node.attributes[a].nodeValue + '"'; else var content = node.attributes[a].nodeValue; html += '>'; html += content; html += '<\/' + node.nodeName + '>'; break; } break; case Node.TEXT_NODE: html += node.nodeValue; break; case Node.COMMENT_NODE: html += '<!' + '--' + node.nodeValue + '--' + '>'; break; } return html;}</SCRIPT></HEAD><BODY><A HREF="javascript: alert(document.documentElement.outerHTML); void 0">show document.documentElement.outerHTML</A>|<A HREF="javascript: alert(document.body.outerHTML); void 0">show document.body.outerHTML</A>|<A HREF="javascript: alert(document.documentElement.innerHTML); void 0">show document.documentElement.innerHTML</A>|<A HREF="javascript: alert(document.body.innerHTML); void 0">show document.body.innerHTML</A><FORM NAME="formName"><TEXTAREA NAME="aTextArea" ROWS="5" COLS="20">JavaScript.FAQTs.comKibology for all.</TEXTAREA></FORM><DIV><P>JavaScript.FAQTs.com</P><BLOCKQUOTE>Kibology for all.<BR>All for Kibology.</BLOCKQUOTE></DIV></BODY></HTML>Note that the getter/setter feature is experimental and its syntax is subject to change.
HTMLElement.prototype.innerHTML setter = function (str) { var r = this.ownerDocument.createRange(); r.selectNodeContents(this); r.deleteContents(); var df = r.createContextualFragment(str); this.appendChild(df); return str;}HTMLElement.prototype.outerHTML setter = function (str) { var r = this.ownerDocument.createRange(); r.setStartBefore(this); var df = r.createContextualFragment(str); this.parentNode.replaceChild(df, this); return str;}
HTMLElement.prototype.innerHTML getter = function () { return getInnerHTML(this);}
function getInnerHTML(node) { var str = ""; for (var i=0; i<node.childNodes.length; i++) str += getOuterHTML(node.childNodes.item(i)); return str;}
HTMLElement.prototype.outerHTML getter = function () { return getOuterHTML(this)}
function getOuterHTML(node) { var str = ""; switch (node.nodeType) { case 1: // ELEMENT_NODE str += "<" + node.nodeName; for (var i=0; i<node.attributes.length; i++) { if (node.attributes.item(i).nodeValue != null) { str += " " str += node.attributes.item(i).nodeName; str += "=\""; str += node.attributes.item(i).nodeValue; str += "\""; } }
if (node.childNodes.length == 0 && leafElems[node.nodeName]) str += ">"; else { str += ">"; str += getInnerHTML(node); str += "<" + node.nodeName + ">" } break; case 3: //TEXT_NODE str += node.nodeValue; break; case 4: // CDATA_SECTION_NODE str += "<![CDATA[" + node.nodeValue + "]]>"; break; case 5: // ENTITY_REFERENCE_NODE str += "&" + node.nodeName + ";" break;
case 8: // COMMENT_NODE str += "<!--" + node.nodeValue + "-->" break; }
return str;}
var _leafElems = ["IMG", "HR", "BR", "INPUT"];var leafElems = {};for (var i=0; i<_leafElems.length; i++) leafElems[_leafElems[i]] = true;
然后我們可以封成JS引用
if (/Mozilla\/5\.0/.test(navigator.userAgent)) document.write('<script type="text/javascript" src="mozInnerHTML.js"></sc' + 'ript>');
復(fù)制代碼 代碼如下:
<script language="JavaScript" type="Text/JavaScript">
<!--
var emptyElements = { HR: true, BR: true, IMG: true, INPUT: true }; var specialElements = { TEXTAREA: true };
HTMLElement.prototype.outerHTML getter = function() {
return getOuterHTML(this);
}
function getOuterHTML(node) {
var html = '';
switch (node.nodeType) {
case Node.ELEMENT_NODE: html += '<'; html += node.nodeName; if (!specialElements[node.nodeName]) {
for (var a = 0; a < node.attributes.length; a++)
html += ' ' + node.attributes[a].nodeName.toUpperCase() + '="' + node.attributes[a].nodeValue + '"';
html += '>';
if (!emptyElements[node.nodeName]) {
html += node.innerHTML;
html += '<\/' + node.nodeName + '>';
}
} else
switch (node.nodeName) {
case 'TEXTAREA': for (var a = 0; a < node.attributes.length; a++)
if (node.attributes[a].nodeName.toLowerCase() != 'value')
html
+= ' ' + node.attributes[a].nodeName.toUpperCase() + '="' + node.attributes[a].nodeValue
+ '"';
else
var content = node.attributes[a].nodeValue;
html += '>'; html += content; html += '<\/' + node.nodeName + '>'; break;
} break;
case Node.TEXT_NODE: html += node.nodeValue; break;
case Node.COMMENT_NODE: html += '<!' + '--' + node.nodeValue + '--' + '>'; break;
}
return html;
}
//-->
</script>
相關(guān)文章
javascript實(shí)現(xiàn)鎖定網(wǎng)頁(yè)、密碼解鎖效果（類(lèi)似系統(tǒng)屏幕保護(hù)效果）
這篇文章主要介紹了javascript實(shí)現(xiàn)鎖定網(wǎng)頁(yè)、密碼解鎖效果,跟Windows系統(tǒng)的屏幕保護(hù)效果類(lèi)似,需要的朋友可以參考下2014-08-08
這篇文章介紹了JS格式化時(shí)間的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-04-04
這篇文章主要為大家詳細(xì)介紹了2個(gè)簡(jiǎn)單js倒計(jì)時(shí)方式，一是帶天數(shù)的倒計(jì)時(shí)，二是單純分鐘和秒倒計(jì)時(shí)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
微信小程序點(diǎn)擊view動(dòng)態(tài)添加樣式過(guò)程解析
這篇文章主要介紹了微信小程序點(diǎn)擊view動(dòng)態(tài)添加樣式過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-01-01
微信小程序wx.navigateTo方法里的events參數(shù)使用詳情及場(chǎng)景
這篇文章主要介紹了微信小程序wx.navigateTo方法里的events參數(shù)使用詳情及場(chǎng)景，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
說(shuō)起javascript無(wú)人不知無(wú)人不曉吧，下面是一些關(guān)于客戶(hù)端JS性能的一些優(yōu)化的小技巧，希望對(duì)大家有所幫助2013-11-11
一個(gè)挺有意思的Javascript小問(wèn)題說(shuō)明
目前為止,就我的猜測(cè),javascript執(zhí)行應(yīng)該是先做語(yǔ)法分析,然后順便分析完成了變量表(本地和全局)2011-09-09
js獲取url頁(yè)面id，也就是最后的數(shù)字文件名
這篇文章主要介紹了js獲取url頁(yè)面id，也就是最后的數(shù)字文件名，有時(shí)候我們需要判斷當(dāng)前頁(yè)面的id，又不用重新生成頁(yè)面直接用js獲取最后的數(shù)字.htm即可2020-09-09
微信小程序?qū)崿F(xiàn)菜單左右聯(lián)動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)菜單左右聯(lián)動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要為大家詳細(xì)介紹了JS上傳組件FileUpload自定義模板的使用方法，感興趣的小伙伴們可以參考一下2016-05-05