Отримайте рядкове представлення вузла DOM

Javascript: у мене є DOM-представлення вузла (елемента чи документа), і я шукаю рядкове його представлення. Наприклад,

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

повинен дати:

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

У мене є сильне відчуття, що мені не вистачає чогось тривіально простого, але я просто не знаходжу методу, який працює в IE, FF, Safari та Opera. Тому зовнішній HTML не є варіантом.

Ви можете створити тимчасовий батьківський вузол і отримати внутрішній вміст HTML:

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>

EDIT: Будь ласка, дивіться відповідь нижче про externalHTML. el.outerHTML повинен бути всім необхідним.

Те, що ви шукаєте, це "externalHTML", але вам потрібен резервний варіант, оскільки він не сумісний зі старими браузерами.

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 вибраного елемента

Я не думаю, що для цього вам потрібен якийсь складний сценарій. Просто використовуйте

get_string=(el)=>el.outerHTML;

Під 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;
   }
}

Використовуйте елемент # externalHTML:

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

console.log(el.outerHTML);

Він також може бути використаний для запису елементів DOM. З документації Mozilla:

Зовнішній атрибутHTML інтерфейсу елемента DOM отримує серіалізований фрагмент HTML, що описує елемент, включаючи його нащадків. Його можна встановити для заміни елемента вузлами, проаналізованими з заданого рядка.

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

Використовуйте element.outerHTML, щоб отримати повне представлення елемента, включаючи зовнішні теги та атрибути.

Якщо ваш елемент має батька

element.parentElement.innerHTML

Спробуйте

new XMLSerializer().serializeToString(element);

Я виявив, що для моїх випадків використання я не завжди хочу весь зовнішній HTML. Багато вузлів просто мають занадто багато дітей, щоб показати.

Ось функція (мінімально перевірена в 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

Я витратив багато часу на з'ясування того, що не так, коли я переглядаю DOMElements з кодом у прийнятій відповіді. Це те, що мені вдалося, інакше кожен другий елемент зникає з документа:

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

якщо використовується реакція:

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