如何将DOMParser修改后的DOM转换为字符串？技术咨询

嘿，我明白你的问题了——你已经用DOMParser解析并修改了HTML内容，但直接把Document对象传给document.write肯定不行，因为它只认字符串。别担心，几步就能搞定！

核心解决思路 #

你需要把修改后的整个DOM文档转换成HTML字符串，这里最直接的方式是获取解析后文档的根元素（也就是<html>标签）的outerHTML属性，它会返回包含该元素及其所有子内容的完整HTML字符串。

修改后的完整代码 #

const domName = 'MOBILE_NO'; 
const dom = '<html><head><title>Merchant Checkout Page</title></head><body><center><h1>Please do not refresh this page...</h1></center><form method="post" name="paytm_form"><input type="hidden" name="MOBILE_NO" value="xxxxxxxx"></form></body></html>';
const parser = new DOMParser();
const parsedHtml = parser.parseFromString(dom, 'text/html');

// 修改目标元素的value
parsedHtml.getElementsByName(domName)[0].setAttribute('value', '1234567890');

// 将修改后的文档转换为HTML字符串并写入页面
document.write(parsedHtml.documentElement.outerHTML);

为什么这样可行？ #

• parsedHtml是DOMParser返回的完整Document对象，直接传给document.write会被当成对象字符串（比如[object HTMLDocument]），这显然不是你要的。
• parsedHtml.documentElement获取的是文档的根<html>元素，调用它的outerHTML就能得到包含所有修改内容的完整HTML字符串，正好符合document.write的参数要求。

如果遇到更复杂的XML/HTML场景，也可以用XMLSerializer来序列化：

const serializer = new XMLSerializer();
const updatedHtmlStr = serializer.serializeToString(parsedHtml);
document.write(updatedHtmlStr);

不过对于HTML文档来说，outerHTML的写法更简洁直观，效果是完全一致的。

内容的提问来源于stack exchange，提问作者R.G.Krish