web-dev-qa-db-ja.com

DOMノードの文字列表現を取得します

Javascript：ノード（要素またはドキュメント）のDOM表現があり、その文字列表現を探しています。例えば。、

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

生じるはずです：

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

私は些細な単純なものを見逃しているという強い気持ちを持っていますが、IE、FF、Safari、Operaで機能する方法を見つけられません。したがって、outerHTMLはオプションではありません。

javascriptstringdomcross-browserelement
85
Boldewyn

一時的な親ノードを作成し、その内部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だけが必要です。

117
CMS

探しているのは「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を取得します

42
gtournie

これには複雑なスクリプトは必要ないと思います。ただ使う

get_string=(el)=>el.outerHTML;
15
Shishir Arora

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;
   }
}
15
Bryan Kyle

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

6
Rich Apodaca

Element.outerHTMLを使用して、外部タグと属性を含む要素の完全な表現を取得します。

3
Pavel V.

要素に親がある場合

element.parentElement.innerHTML
1
Vincnetas

試して

new XMLSerializer().serializeToString(element);
1
Alex Popa

私のユースケースでは、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

0
Aaron

受け入れられた回答のコードを使用してDOMElementsを反復処理すると、何が間違っているのかを理解するのに多くの時間を無駄にしました。これは私のために働いたものです、そうでなければ、ドキュメントからすべての2番目の要素が消えます：

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