4

我找到了这个函数（不过，我忘记了在哪里）：

function outerHTML(node){
    // if IE, Chrome take the internal method otherwise build one
  return node.outerHTML || (
      function(n){
          var div = document.createElement('div'), h;
          div.appendChild( n.cloneNode(true) );
          h = div.innerHTML;
          div = null;
          return h;
      })(node);
}

但是这个函数通过调用outerHTML(my_element)而不是my_element.outerHTML

我希望能够扩展一个 javascript DOM 元素对象，使其具有 outerHTML 元素，但如果存在，仍然使用本机元素。我怎么做？

我想这样做的主要原因是因为 Firefox 本身没有 outerHTML 方法，但如果可用，我仍然想使用本机实现，因为它们已经过全面测试，我觉得我可以信任它们。

更新：@Raynos 建议我不要为 outerHTML 做上述事情，我应该做一些类似于 outerHTML 规范的事情。我发现了这个： 如何在 Firefox 中执行 OuterHTML？ 并且它不执行 .cloneNode，这可能会导致 FireFox 8.0.1 中的错误。
所以，我的解决方案是这样的，根据@Raynos：

if (!("outerHTML" in HTMLElement.prototype)) {
    Object.defineProperty(HTMLElement.prototype, "outerHTML", {
        get: getOuterHTML
    });
}


function getOuterHTML(){
    var parent = this.parentNode;
    var el = document.createElement(parent.tagName);
    el.appendChild(this.cloneNode(true));
    var shtml = el.innerHTML;
    return shtml;
}
4

3 回答 3

8

您通常会执行以下操作：

if (!("outerHTML" in document.body)) {
    Object.defineProperty(Element.prototype, "outerHTML", {
        get: getOuterHTML,
        set: setOuterHTML
    });
}

然后，您阅读outerHTML 规范并编写实现它的函数getOuterHTML。setOuterHTML

注意：我强烈建议不要天真地实现outerHTML不符合规范的属性。当您的“版本”与本机版本不同时，这将导致您在维护方面出现问题。特别是如果您向您的版本添加专有扩展或额外的“功能”

请注意，Object.defineProperty在旧版浏览器中未定义。您可能需要使用es5-shim 中的 shim

于 2011-12-12T19:51:48.650 回答
1

将其添加到 HTMLElement 原型

HTMLElement.prototype.outerHTML =  function() {
      // Your implementation of getting outerHTML
}
于 2011-12-12T19:45:15.023 回答
0

您可能想尝试扩展 Node 基础对象，几乎所有 DOM 都从该基础对象扩展，请在此处阅读描述元素元素 - MDN或其他人回复尝试从MDN 阅读的 HTMLElement - HTMLElement

Element.prototype.outerHTML = function(){ console.log('hola'); };
HTMLElement.prototype.outerHTML = function(){ console.log('hola'); };

正如Raynos在评论中指出的那样，这是 Spec 文章，鼓励使用 Element。

编辑：删除节点引用

于 2011-12-12T20:14:07.973 回答