獲取 DOM 節點的字符串表示形式

Question

Javascript：我有一個節點（元素或文檔）的 DOM 表示，我正在尋找它的字符串表示。 例如，

var el = document.createElement("p");
el.appendChild(document.createTextNode("Test"));

應該產生：

get_string(el) == "<p>Test</p>";

我有一種強烈的感覺，我錯過了一些非常簡單的東西，但我只是找不到適用於 IE、FF、Safari 和 Opera 的方法。 因此，outerHTML 是沒有選擇的。

Answer 1

你可以創建一個臨時的父節點，並獲取它的innerHTML內容：

var el = document.createElement("p");
el.appendChild(document.createTextNode("Test"));

var tmp = document.createElement("div");
tmp.appendChild(el);
console.log(tmp.innerHTML); // <p>Test</p>

編輯：請參閱下面有關outerHTML 的答案。 el.outerHTML 應該是所有需要的。

Answer 2

您正在尋找的是“outerHTML”，但我們需要一個后備，因為它與舊瀏覽器不兼容。

var getString = (function() {
  var DIV = document.createElement("div");

  if ('outerHTML' in DIV)
    return function(node) {
      return node.outerHTML;
    };

  return function(node) {
    var div = DIV.cloneNode();
    div.appendChild(node.cloneNode(true));
    return div.innerHTML;
  };

})();

// getString(el) == "<p>Test</p>"

你會在這里找到我的 jQuery 插件： 獲取所選元素的外部 HTML

Answer 3

我認為您不需要任何復雜的腳本。 只需使用

get_string=(el)=>el.outerHTML;

Answer 4

在 FF 下，您可以使用XMLSerializer對象將 XML 序列化為字符串。 IE 為您提供了一個節點的xml屬性。 因此，您可以執行以下操作：

function xml2string(node) {
   if (typeof(XMLSerializer) !== 'undefined') {
      var serializer = new XMLSerializer();
      return serializer.serializeToString(node);
   } else if (node.xml) {
      return node.xml;
   }
}

Answer 5

使用 Element#outerHTML：

var el = document.createElement("p");
el.appendChild(document.createTextNode("Test"));

console.log(el.outerHTML);

它還可以用於編寫 DOM 元素。 來自 Mozilla 的文檔：

元素 DOM 接口的 outerHTML 屬性獲取描述元素及其后代的序列化 HTML 片段。 它可以設置為用從給定字符串解析的節點替換元素。

https://developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML

Answer 6

使用 element.outerHTML 獲取元素的完整表示，包括外部標簽和屬性。

Answer 7

嘗試

new XMLSerializer().serializeToString(element);

Answer 8

如果你的元素有父元素

element.parentElement.innerHTML

Answer 9

我發現對於我的用例，我並不總是想要整個 outerHTML。 許多節點有太多的子節點無法顯示。

這是一個功能（在 Chrome 中進行了最低限度的測試）：

/**
 * Stringifies a DOM node.
 * @param {Object} el - A DOM node.
 * @param {Number} truncate - How much to truncate innerHTML of element.
 * @returns {String} - A stringified node with attributes
 *                     retained.
 */
function stringifyEl(el, truncate) {
    var truncateLen = truncate || 50;
    var outerHTML = el.outerHTML;
    var ret = outerHTML;
    ret = ret.substring(0, truncateLen);

    // If we've truncated, add an elipsis.
    if (outerHTML.length > truncateLen) {
      ret += "...";
    }
    return ret;
}

https://gist.github.com/kahunacohen/467f5cc259b5d4a85eb201518dcb15ec

Answer 10

您可以簡單地在元素上使用outerHTML屬性。 它會返回你想要的。

讓我們創建一個名為get_string(element)

 var el = document.createElement("p"); el.appendChild(document.createTextNode("Test")); function get_string(element) { console.log(element.outerHTML); } get_string(el); // your desired output

Answer 11

當我使用接受的答案中的代碼遍歷 DOMElements 時，我浪費了很多時間來弄清楚出了什么問題。 這對我有用，否則每隔一個元素就會從文檔中消失：

_getGpxString: function(node) {
          clone = node.cloneNode(true);
          var tmp = document.createElement("div");
          tmp.appendChild(clone);
          return tmp.innerHTML;
        },

Answer 12

雖然outerHTML通常是答案，但對於Attr和Text （ Node接口的子類），還有其他屬性：

(<Element>x).outerHTML
(<Text>x).data
(<Attr>x).value;

有關DocumentFragment和Comment等更多類型的節點，請參閱https://developer.mozilla.org/en-US/docs/Web/API/Node

Answer 13

如果使用反應：

const html = ReactDOM.findDOMNode(document.getElementsByTagName('html')[0]).outerHTML;