0

我们都知道我们可以像以下两种方式使用 outerHTML：

<h1></h1>
<p>I am superstar.</p>

//first way
var star = document.getElementsByTagName('p')[0];
var h1 = document.getElementsByTagName('h1')[0];
var starOuterHTML = star.outerHTML;
alert(starOuterHTML);//this output: '<p>I am superstar.</p>'

//second way
var star = document.getElementsByTagName('p')[0];
var h1 = document.getElementsByTagName('h1')[0];
star.outerHTML = '<h1>I am superstar.<h1>';////these two above sentences are both h1 element now,that's we have two h1 element

但是由于一些浏览器没有实现，所以我决定自己做一个实现，这些都是我现在自己做的：

if(!Element.outerHTML){
      Object.defineProperty(Element.prototype,'outerHTML',{
          value: function(){
              var wrapper = document.createElement('div');
              wrapper.appendChild(this.cloneNode(true));
              return wrapper.innerHTML;                    
          },
          writable: true,
          enumerable: false,
          configurable: false
      })  
  }

现在你知道这是第一种方式的实现，但是这里有一些问题（如果我们希望我们的实现只是比如内置的outerhtml方式，后面会讲到。

而且我不知道如何实现Element的outerHMTL属性的第二种方式？

当我搜索网络和我拥有的书籍时，我在不受支持的浏览器中发现了以下 outerHTML 实现：

          (function(){

        if(document.createElement('div').outerHTML) return;

        function outerHTMLGetter(){
          var container = document.createElement('div');
          container.appendChild(this.cloneNode(true));
          return container.innerHTML;  
        }

        function outerHTMLSetter(value){
               var container = document.createElement('div');
               container.innerHTML = value;
               while(container.firstChild){
                this.parentNode.insertBefore();
              }
              this.parentNode.removeChild(this);
        }


        if(Object.defineProperty){
          Object.defineProperty(Element.prototype, 'outerHTML',{
            get: outerHTMLGetter,
            set: outerHTMLSetter,
            enumerable:false,
            configurable: true
          });
        }else{
          Element.prototype.__defineGetter__('outerHTML', outerHMTLGetter);
          Element.prototype.__defineSetter__('outerHTML', outerHMTLSetter);

        }
      }());

是的，我们可以使用我搜索到的上面的代码来实现它，但是如果我们使用上面的代码，包括我自己的代码，我们正在使用函数。但是，outerHTML 是 Element 对象的属性，不是函数，我需要将它完全实现为内置方式，以便将来当所有浏览器都实现 outHTML 属性时，即使我们放弃实现代码，我们也可以使用它无需更改我们的任何代码。

内置方式：star.outerHTML 上述代码方式（不好）： star.outerHTML() star.outerHTML(value)

那么有什么想法可以完美地制作我自己的书面代码吗？谢谢

4

0 回答 0