Nhận biểu diễn chuỗi của một nút DOM

Javascript: Tôi có biểu diễn DOM của một nút (phần tử hoặc tài liệu) và tôi đang tìm kiếm biểu diễn chuỗi của nó. Ví dụ,

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

nên nhường:

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

Tôi có cảm giác mạnh mẽ, rằng tôi đang thiếu một thứ gì đó đơn giản đến mức tầm thường, nhưng tôi không tìm thấy một phương pháp nào hoạt động trong IE, FF, Safari và Opera. Do đó, externalHTML không phải là tùy chọn.

Bạn có thể tạo một nút cha tạm thời và lấy nội dung InternalHTML của nó:

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>

CHỈNH SỬA: Vui lòng xem câu trả lời bên dưới về ngoàiHTML. el.outerHTML phải là tất cả những gì cần thiết.

Những gì bạn đang tìm kiếm là 'ngoàiHTML', nhưng cần một dự phòng vì nó không tương thích với các trình duyệt cũ.

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>"

Bạn sẽ tìm thấy plugin jQuery của tôi ở đây: Lấy HTML bên ngoài của phần tử đã chọn

Tôi không nghĩ rằng bạn cần bất kỳ kịch bản phức tạp nào cho việc này. Chỉ dùng

get_string=(el)=>el.outerHTML;

Trong FF, bạn có thể sử dụng XMLSerializerđối tượng để tuần tự hóa XML thành một chuỗi. IE cung cấp cho bạn một xmlthuộc tính của một nút. Vì vậy, bạn có thể làm như sau:

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

Sử dụng Phần tử # ngoàiHTML:

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

console.log(el.outerHTML);

Nó cũng có thể được sử dụng để viết các phần tử DOM. Từ tài liệu của Mozilla:

Thuộc tính externalHTML của giao diện DOM phần tử nhận phân đoạn HTML được tuần tự hóa mô tả phần tử bao gồm các phần tử con của nó. Nó có thể được đặt để thay thế phần tử bằng các nút được phân tích cú pháp từ chuỗi đã cho.

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

Sử dụng element.outerHTML để có được sự trình bày đầy đủ của phần tử, bao gồm các thẻ và thuộc tính bên ngoài.

Nếu phần tử của bạn có cha mẹ

element.parentElement.innerHTML

Thử

new XMLSerializer().serializeToString(element);

Tôi nhận thấy rằng đối với các trường hợp sử dụng của mình, tôi không phải lúc nào cũng muốn toàn bộ bên ngoàiHTML. Nhiều nút có quá nhiều nút con để hiển thị.

Đây là một chức năng (được thử nghiệm tối thiểu trong 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

Tôi đã lãng phí rất nhiều thời gian để tìm ra vấn đề gì xảy ra khi tôi lặp qua DOMElements với mã trong câu trả lời được chấp nhận. Đây là những gì đã làm việc cho tôi, nếu không mọi phần tử thứ hai sẽ biến mất khỏi tài liệu:

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

nếu sử dụng react:

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