รับการแสดงสตริงของโหนด DOM

Javascript: ฉันมีการแสดง DOM ของโหนด (องค์ประกอบหรือเอกสาร) และฉันกำลังมองหาการแสดงสตริงของมัน เช่น,

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

ควรให้ผล:

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

ฉันมีความรู้สึกที่ดีว่าฉันพลาดอะไรง่ายๆไปเล็กน้อย แต่ฉันไม่พบวิธีที่ใช้ได้กับ IE, FF, Safari และ Opera ดังนั้น outerHTML จึงไม่มีตัวเลือก

คุณสามารถสร้างโหนดแม่ชั่วคราวและรับเนื้อหา 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>

แก้ไข: โปรดดูคำตอบด้านล่างเกี่ยวกับ outerHTML el.outerHTML ควรเป็นสิ่งที่จำเป็นทั้งหมด

สิ่งที่คุณกำลังมองหาคือ 'outerHTML' แต่วีต้องการทางเลือกเพราะมันไม่สามารถใช้งานร่วมกับเบราว์เซอร์รุ่นเก่าได้

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:

แอ็ตทริบิวต์ outerHTML ของอินเทอร์เฟซ DOM ของอิลิเมนต์ได้รับแฟรกเมนต์ 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;
        },

ถ้าใช้ react:

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