Firefoxで innerText と outerHTMLをエミュレート Take2

JavaScript

以前の記事には、outerHTMLのgetterが無かったので、追加してみました。

window.uu = {
  ua: {
    gecko: navigator.userAgent.indexOf("Gecko/") >= 0
  }
};

uu.ua.gecko && !HTMLElement.prototype.outerHTML && (function() {
  HTMLElement.prototype.__defineGetter__("outerHTML", function() {
              var r = docuemnt.createRange(), tub = docuemnt.createElement("div");
              r.selectNode(this);
              tub.appendChild(r.cloneContents());
              return tub.innerHTML;
            });
  HTMLElement.prototype.__defineSetter__("outerHTML", function(html) {
              var r = docuemnt.createRange(), f;
              r.setStartBefore(this);
              f = r.createContextualFragment(html);
              this.parentNode.replaceChild(f, this);
            });
  HTMLElement.prototype.__defineGetter__("innerText", function() {
              return this.textContent;
            });
  HTMLElement.prototype.__defineSetter__("innerText", function(text) {
              while(this.hasChildNodes()) {
                this.removeChild(this.lastChild);
              }
              this.appendChild(docuemnt.createTextNode(text));
            });
}());

outerHTML getter は、

  1. まずdiv要素を作成します。
  2. ターゲットノードそのものを含んだ状態で、ノードのクローンを作成します。
  3. オンザフライ(ドキュメントツリーに関連付けしない状態)のdiv要素に、クローン済みのノードを追加します。
  4. div.innerHTMLでテキスト化します。

コードそのまんまの解説ですね。

Google Code Archive - Long-term storage for Google Code Project Hosting. version 0.5 から outerHTML getterは使用可能になります。

参考(DOM.Range)