Получить строковое представление узла DOM - PullRequest
Новая
       17

Получить строковое представление узла DOM

82 голосов
/ 17 ноября 2009

Javascript: у меня есть DOM-представление узла (элемента или документа), и я ищу его строковое представление. Например., 

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

должно дать: 

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

У меня сильное чувство, что я упускаю что-то тривиально простое, но я просто не нахожу метод, который работает в IE, FF, Safari и Opera. Следовательно, externalHTML - это не вариант.

Ответы [ 11 ]

114 голосов
/ 17 ноября 2009

Вы можете создать временный родительский узел и получить его содержимое 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>

EDIT: Пожалуйста, смотрите ответ ниже о externalHTML. el.outerHTML должен быть всем, что нужно.

39 голосов
/ 19 ноября 2013

То, что вам нужно, это "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-код выбранного элемента

15 голосов
/ 17 ноября 2009

В 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;
   }
}
13 голосов
/ 10 марта 2016

Я не думаю, что вам нужен какой-либо сложный скрипт для этого. Просто используйте 

get_string=(el)=>el.outerHTML;
6 голосов
/ 05 марта 2017

Использовать Элемент # outerHTML: 

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

console.log(el.outerHTML);

Может также использоваться для записи элементов DOM. Из документации Mozilla:

Атрибут outerHTML интерфейса DOM элемента получает сериализованный фрагмент HTML, описывающий элемент, включая его потомков. Можно установить замену элемента узлами, проанализированными из заданной строки.

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

3 голосов
/ 10 марта 2016

Используйте element.outerHTML, чтобы получить полное представление элемента, включая внешние теги и атрибуты.

1 голос
/ 05 октября 2018

Попробуйте 

new XMLSerializer().serializeToString(element);
1 голос
/ 02 января 2015

Если ваш элемент имеет родителя 

element.parentElement.innerHTML
0 голосов
/ 10 октября 2018

Я обнаружил, что для моих сценариев использования я не всегда хочу весь внешний 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

0 голосов
/ 09 ноября 2017

при использовании реакции: 

const html = ReactDOM.findDOMNode(document.getElementsByTagName('html')[0]).outerHTML;
Страница:
...