outerHTML与innerHTML

为了屏蔽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("");
        }

<!doctype html>
<html>
  <head>
    <title>outerHTML与innerHTML by 司徒正美</title>
    <meta charset="utf-8"/>
    <meta content="IE=8" http-equiv="X-UA-Compatible"/>
    <meta name="keywords" content="outerHTML与innerHTML by 司徒正美" />
    <meta name="description" content="outerHTML与innerHTML by 司徒正美" />

var div = document.getElementById("aaa");
        var radio = document.getElementsByTagName("input")[0];
        radio.value = "aaa";
        alert(outerHTML(div))
        alert(innerHTML(div))
        alert(outerHTML(radio))
      }
    </script>

</head>
  <body>
    <div id="aaa" idd="bbb"  onclick="alert('222')" style="border:1px solid red">     outerHTML与innerHTML by 司徒正美
      <p pp="pp">outerHTML与innerHTML</p></div>
    <form>
      <input type="radio" checked>
    </form>

</body>
</html>

posted on 2010-05-30 22:01 司徒正美阅读(2020) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Ruby's Louvre

导航

公告

outerHTML与innerHTML