DOM 노드의 문자열 표현 가져 오기

Javascript : 노드 (요소 또는 문서)의 DOM 표현이 있고 그 문자열 표현을 찾고 있습니다. 예 :

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

산출해야합니다 :

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

나는 사소한 일을 놓치고 있다는 강한 느낌을 가지고 있지만 IE, FF, Safari 및 Opera에서 작동하는 방법을 찾지 못했습니다. 따라서 outerHTML은 옵션이 아닙니다.

임시 부모 노드를 만들고 그 내부 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>

편집 : outerHTML에 대한 아래 답변을 참조하십시오. el.outerHTML 만 있으면됩니다.

당신이 찾고있는 것은 'outerHTML'이지만 이전 브라우저와 호환되지 않는 대체 coz가 필요합니다.

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;
   }
}

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

element.outerHTML을 사용하여 외부 태그 및 속성을 포함하여 요소의 전체 표현을 가져옵니다.

요소에 부모가있는 경우

element.parentElement.innerHTML

시험

new XMLSerializer().serializeToString(element);

내 사용 사례에서 항상 전체 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

받아 들여진 답변의 코드로 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;