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

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

dom节点序列化

<div id="root" class="root">
    <div class="cls-1">
        <ul>
            <li>list1li>
            <li>list2li>
            <li>list3li>
        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 = `

    

        

            
list1
            
list2
            
list3
        
    
    
`;
    const doc = new DOMParser().parseFromString(str, 'text/html');
    const root = doc.getElementById("root");
    root.addEventListener("click", () => {
        alert("click");
    })
    document.body.append(root);