Firefox のアウター HTML 実装コード_JavaScript スキル

DOM の数を減らすと、ページの解析プロセス中にブラウザによる DOM ツリーとレンダリング ツリーの構築が高速化され、ページのパフォーマンスが向上します。この目的のために、最初の画面レンダリングでは表示されないページ内の HTML の部分を TextArea に一時的に保存し、レンダリングが完了した後に HTML のこの部分を処理して、この目的を達成できます。 TextArea に一時的に保存された HTML コンテンツをページに追加するには、要素の externalHTML 属性を使用するのが最も簡単で便利です。ただし、outerHTML は DOM 標準で定義されていません。サポートされているブラウザは IE6、safari、operal、および Chrome です。 FF4.0 でテスト済み - まだサポートされていません。それでは、クロスブラウザーの innerHTML を実装してみましょう。
outerHTML は、要素タグ自体を含む HTML を取得または設定します。以下は実装コードです:

コードをコピー コードは次のとおりです:

if( typeof HTMLElement !== "未定義" && !("outerHTML" in HTMLElement.prototype)) {
//console.log("define innerHTML");
HTMLElement.prototype.__defineSetter__("outerHTML",function) (str){
var フラグメント = document.createDocumentFragment();
var div = document.createElement("div");
div.innerHTML =
for(var i=0, n = div.childNodes .length; ifragment.appendChild(div.childNodes[i]);
this.parentNode.replaceChild(fragment, this); >});
//
HTMLElement.prototype.__defineGetter__("outerHTML",function(){
var タグ = this.tagName;
var 属性 = this.attributes;
var attr = [];//for(属性の変数名){//プロトタイプ チェーン上のメンバーを走査します
for(var i=0,n =attributes.length; iif(attributes[i].specified){
attr.push(attributes[i].name '="'attributes[i].value '"'); 🎜>}
}
return ((!!this.innerHTML) ?
'<' タグ ' ' attr.join(' ') '>' this.innerHTML '' :
'<' タグ ' attr.join(' ') '/>')
}


: コード内の
1 まず、ブラウザーのネイティブ実装の上書きを避けるために、ブラウザーが externalHTML をサポートしているかどうかを検出するための条件判断が行われます。
2 「__defineSetter__」、「__defineGetter__」は Firefox ブラウザのプライベートな部分です。プロパティ値の設定時とプロパティの取得時に実行する操作をそれぞれ定義します。
3 「__defineSetter__」「outerHTML」では、ページに要素が多すぎると挿入され、パフォーマンスに影響を与える頻繁なリフローが発生するのを避けるためです。ドキュメント フラグメント オブジェクト フラグメントは、ページに挿入する必要がある DOM 要素を一時的に格納するために使用されます。

4 「__defineGetter__」「outerHTML」の要素属性属性を使用して、要素に指定された属性をトラバースします。 innerHTML と組み合わせると、元の属性自体を含む HTML 文字列が返されます。
テストコード:




コードをコピー

コードは次のとおりです: /head>

これは 段落

• 項目 2
  
• 項目 3
;

• アイテム 4

<script> && !( "outerHTML" in HTMLElement.prototype)) { <br>console.log("define innerHTML"); <br>HTMLElement.prototype.__defineSetter__("outerHTML",function(str){ <br>var フラグメント = document.createDocumentFragment (); <br>var div = document.createElement("div"); <br>div.innerHTML = str; <br>for(var i=0, n = div.childNodes.length; i< n; i ){ <BR>fragment.appendChild(div.childNodes[i]) <BR>this.parentNode.replaceChild(fragment, this); <BR> 🎜>HTMLElement .prototype.__defineGetter__("outerHTML",function(){ <BR>var tag = this.tagName; <BR>varattributes = this.attributes; <BR>var attr = []; <BR>// for(var name inattributs){//プロトタイプチェーン上のメンバーを走査します<BR>for(var i=0,n =attributs.length; i<n; i){//n< で指定された属性の数🎜>if(attributes[ i].specified){ <BR>attr.push(attributes[i].name '="'attributes[i].value '"'); <BR>} <BR>} <BR>return ((!! this.innerHTML) ? <BR>'<' タグ ' ' attr.join(' ') '>' this.innerHTML '</' タグ '>' : <br>' <' タグ ' attr.join(' ') '/>'); <BR>} <BR>var content = document.getElementById("content"); content.outerHTML) <BR></script>

sdfdsdfsd

の アウター HTML
コードを取得するとします。

コードをコピー コードは次のとおりです:

var _p = document.getElementById('outerID');
_P = _P.cloneNode(); var _DIV = document.createElement ();
_DIV.appendChild(_P);
alert(_DIV.innerHTML);

firefox には externalHTML がありません。以下の方法で解決します

コードをコピー コードは次のとおりです:

/**
* Firefox 互換の innerHTML 次のコードを使用すると、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);
return
}; prototype.__defineGetter__("outerHTML",function(){
var attr;
var attrs=this.attributes;
var str="<" this.tagName.toLowerCase();
for (var i=0;iattr=attrs[i];
if(attr.specified)
str =" " attr.name '="' 属性value '"';
}
if( !this.canHaveChildren)
return str ">";
return str ">" this.innerHTML "";
});
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 ;
}


insertAdjacentHTML の新しいソリューションについて互換性

コードをコピー

コードは次のとおりです: //---HTML コードを挿入コンポーネントの最後に function InsertHtm(op,code,isStart){ if (Dvbbs_IsIE5)

op.insertAdjacentHTML(isStart ? "afterbegin" : "afterEnd",code

else); {
var range=op.ownerDocument.createRange();
range.setStartBefore(op );
if(isStart)
op. insertBefore(fragment,op.firstChild);
else
op.appendChild(fragment)
}
}


关于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('

Kibology for all.

');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: If you insert that script block you can then write cross browser code assigning to .innerHTML .outerHTMLfor instance document.body.innerHTML = '

Scriptology for all

';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).show document.documentElement.outerHTML|show document.body.outerHTML|show document.documentElement.innerHTML|show document.body.innerHTML

JavaScript.FAQTs.comKibology for all.

JavaScript.FAQTs.com

Kibology for all.
All for Kibology.

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; iHTMLElement.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; iif (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 = ""; break; case 5: // ENTITY_REFERENCE_NODE str = "&" node.nodeName ";" break;
case 8: // COMMENT_NODE str = "" 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('