js字符串和dom对象的相互转换

字符串转dom对象

        const htmlString='<div><div>123</div></div>'
        const parser = new DOMParser();
        const htmlDoc = parser.parseFromString(htmlString, 'text/html');
        console.log(htmlDoc)

结果如下

接着上面的代码将dom对象转字符串

        const str=htmlDoc.body.innerHTML
        console.log(str)

（如果想连父标签一起获取，用outerHTML）

使用DOMParser.parseFromString时要注意的是如果你的字符串里有html标签、head标签或者body标签，会覆盖默认的html标签、head标签和body标签。就像下面这样：

好了，字符串和dom对象的相互转换的方法到此就介绍结束了，下面谈谈实际应用。

在我工作的时候有需求要生成自定义的html文件，可以用Blob去将字符串输出为html文件，那我只要按要求生成字符串就行。但是字符串里是无法使用dom的一些方法的，但是我会有一些地方需要调整结构，必须用dom的方法，所以要把字符串暂时转换为dom对象，然后进行添加样式、调整位置等操作，最后再转换为字符串用Blob去输出。