dom节点序列化与反序列化（XMLSerializer和DOMParser）

dom节点序列化与反序列化（XMLSerializer和DOMParser）

dom节点序列化

<div id="root" class="root">
    <div class="cls-1">
        <ul>
            <li>list1</li>
            <li>list2</li>
            <li>list3</li>
        </ul>
    </div>
    <img src="sea.jpg" width="600">
</div>

const xmlSerializer = new XMLSerializer();
const root = document.getElementById('root')
console.log(xmlSerializer.serializeToString(root))

//result
<div xmlns="http://www.w3.org/1999/xhtml" id="root" class="root">
    <div class="cls-1">
        <ul>
            <li>list1</li>
            <li>list2</li>
            <li>list3</li>
        </ul>
    </div>
    <img src="sea.jpg" width="600" />
</div>

dom节点反序列化

利用该方法可以将一个html字符串反转义为dom节点，并将其绑定事件或进行其他操作，并将其加入到文档中

    const str = `<div xmlns="http://www.w3.org/1999/xhtml" id="root" class="root">
    <div class="cls-1">
        <ul>
            <li>list1</li>
            <li>list2</li>
            <li>list3</li>
        </ul>
    </div>
    <img src="sea.jpg" width="600" />
</div>`;
    const doc = new DOMParser().parseFromString(str, 'text/html');
    const root = doc.getElementById("root");
    root.addEventListener("click", () => {
        alert("click");
    })
    document.body.append(root);