首頁 > 其他

outerHTML與innerHTML

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

為了屏蔽IE與標準瀏覽器之間鴻溝，特別搞了這個，而且連XML也能用了。

          if(!String.prototype.trim){               String.prototype.trim = function(str){                   return this.replace(/^[\s\xa0]+|[\s\xa0]+$/g, '');               }         }                        var  metaObject = {                    '\b': '\\b',                    '\t': '\\t',                    '\n': '\\n',                    '\f': '\\f',                    '\r': '\\r',                    '\\': '\\\\'         }        if(!String.prototype.quote ){           String.prototype.quote = function () {                 str = this.replace(/[\x00-\x1f\\]/g, function (chr) {                            var special = metaObject[chr];                            return special ? special : '\\u' + ('0000' + chr.charCodeAt(0).toString(16)).slice(-4)                 });                  return '"' + str.replace(/"/g, '\\"') + '"';             }        }        if(document.documentElement.__defineGetter__){          HTMLElement.prototype.__defineGetter__("currentStyle", function () {            return this.ownerDocument.defaultView.getComputedStyle(this, null);          });        }        var rselfClosing = /^(?:area|br|col|embed|hr|img|input|link|meta|param)$/i;        var outerHTML = function(el,recursion){          switch(el.nodeType+""){            case "1":              var array = [];              var nodeName = el.nodeName;              if(recursion && el.currentStyle.display == "block"){                array.push("\n")              }              array.push("<"+nodeName);              for(var i=0,t;t=el.attributes[i++];){                array.push(" "+t.name+"="+(t.value||t.specified+"").quote())              }              if(rselfClosing.test(el.nodeName)){                array.push("\/>")              }else{                array.push(">");                for(var i=0,c;c=el.childNodes[i++];){                  array.push(outerHTML(c,true))                }                array.push("<\/"+el.nodeName+">")              }              return array.join("");            case "3":              return el.nodeValue.trim();            case "8":              return "innerHTML" in el? el.innerHTML : "<!--"+el.nodeValue+"-->"          }        }        var innerHTML = function(el){          var array = [];          for(var i=0,c;c=el.childNodes[i++];){            array.push(outerHTML(c,true))          }          return array.join("");        }

<br /><!doctype html><br /><html><br /> <head><br /> <title>outerHTML與innerHTML by 司徒正美</title><br /> <meta charset="utf-8"/><br /> <meta content="IE=8" http-equiv="X-UA-Compatible"/><br /> <meta name="keywords" content="outerHTML與innerHTML by 司徒正美" /><br /> <meta name="description" content="outerHTML與innerHTML by 司徒正美" /></p><p> <script type="text/javascript" charset="utf-8"></p><p> window.onload = function(){</p><p> if(!String.prototype.trim){<br /> String.prototype.trim = function(str){<br /> return this.replace(/^[\s\xa0]+|[\s\xa0]+$/g, '');<br /> }<br /> }</p><p> var metaObject = {<br /> '\b': '\\b',<br /> '\t': '\\t',<br /> '\n': '\\n',<br /> '\f': '\\f',<br /> '\r': '\\r',<br /> '\\': '\\\\'<br /> }<br /> if(!String.prototype.quote ){<br /> String.prototype.quote = function () {<br /> str = this.replace(/[\x00-\x1f\\]/g, function (chr) {<br /> var special = metaObject[chr];<br /> return special ? special : '\\u' + ('0000' + chr.charCodeAt(0).toString(16)).slice(-4)<br /> });<br /> return '"' + str.replace(/"/g, '\\"') + '"';<br /> }<br /> }<br /> if(document.documentElement.__defineGetter__){<br /> HTMLElement.prototype.__defineGetter__("currentStyle", function () {<br /> return this.ownerDocument.defaultView.getComputedStyle(this, null);<br /> });<br /> }<br /> var rselfClosing = /^(?:area|br|col|embed|hr|img|input|link|meta|param)$/i;<br /> var outerHTML = function(el,recursion){<br /> switch(el.nodeType+""){<br /> case "1":<br /> var array = [];<br /> var nodeName = el.nodeName;<br /> if(recursion && el.currentStyle.display == "block"){<br /> array.push("\n")<br /> }<br /> array.push("<"+nodeName);<br /> for(var i=0,t;t=el.attributes[i++];){<br /> array.push(" "+t.name+"="+(t.value||t.specified+"").quote())<br /> }<br /> if(rselfClosing.test(el.nodeName)){<br /> array.push("\/>")<br /> }else{<br /> array.push(">");<br /> for(var i=0,c;c=el.childNodes[i++];){<br /> array.push(outerHTML(c,true))<br /> }<br /> array.push("<\/"+el.nodeName+">")<br /> }<br /> return array.join("");<br /> case "3":<br /> return el.nodeValue.trim();<br /> case "8":<br /> return "innerHTML" in el? el.innerHTML : "<!--"+el.nodeValue+"-->"<br /> }<br /> }<br /> var innerHTML = function(el){<br /> var array = [];<br /> for(var i=0,c;c=el.childNodes[i++];){<br /> array.push(outerHTML(c,true))<br /> }<br /> return array.join("");<br /> }</p><p> var div = document.getElementById("aaa");<br /> var radio = document.getElementsByTagName("input")[0];<br /> radio.value = "aaa";<br /> alert(outerHTML(div))<br /> alert(innerHTML(div))<br /> alert(outerHTML(radio))<br /> }<br /> </script></p><p> </head><br /> <body><br /> <div id="aaa" idd="bbb" onclick="alert('222')" style="border:1px solid red"> outerHTML與innerHTML by 司徒正美<br /> <p pp="pp">outerHTML與innerHTML</p><!-- 注釋 //--></div><br /> <form><br /> <input type="radio" checked><br /> </form></p><p> </body><br /></html><br />

運行代碼

outerHTML = function(el,recursion){
dom.require("css");
switch(el.nodeType+""){
case "1":
var array = [];
var nodeName = el.nodeName;
if(recursion && dom.getStyle(el,"display") == "block"){
array.push("\n")
}
array.push("]*)>/);
if(a && a[2]){
array.push(" "+ a[2].trim().split(/\s+/).map(function(el){
var value = el.split("=")[1];
if(value.charAt(0)!=="\""){
el = el.replace(value,value.quote());
}
return el;
}).join(" "));
}
}else{
for(var i=0,t;t=el.attributes[i++];){
array.push(" "+t.name+"="+(t.value||t.specified+"").quote())
}
}
if(rselfClosing.test(el.nodeName)){
array.push("\/>")
}else{
array.push(">");
for(var i=0,c;c=el.childNodes[i++];){
array.push(outerHTML(c,true))
}
array.push("")
}
return array.join("");
case "3":
return el.nodeValue.trim();
case "8":
return "innerHTML" in el? el.innerHTML : ""
}
},

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More