Question

我有一个HTML string，例如'Hello World!'

我使用HTML将此string DOM解析为DOMParser().parseFromString()，因为我想更改某些特定innerHTML的{{1}}。这就是为什么我将elements parse HTML转换为string并使用DOM获得所有元素并遍历它们以getElementByClassName对其进行更改的原因。到目前为止有效。

更改innerHTML后，我尝试将新的innerHTML转换回DOM。我不知道怎么办。我试图将string或innerHTML（都尝试）分配给这样的变量：

outerHTML

const parser = new DOMParser();
const doc = parser.parseFromString("<p>Hello World!</p>", "text/html");
console.log(doc.innerHTML) // undefined
console.log(doc.outerHTML) // undefined

我总是得到const parser = new DOMParser(); const doc = parser.parseFromString("Hello World!", "text/html"); console.log(doc.innerHTML) // undefined console.log(doc.outerHTML) // undefined。如何将其解析回undefined？我发现了很多使用string或innerHTML的示例，但就我而言，出了点问题。有什么想法吗？

Answer 1

DOMParser总是会给您一个文档作为回报。文档没有innerHTML属性，但document.documentElement却具有属性，就像页面的常规document对象一样：

const myHtmlString = '<p><span class="text">Hello World!</span></p>'
const htmlDom = new DOMParser().parseFromString(myHtmlString, 'text/html');
console.log(htmlDom.documentElement.innerHTML);

请注意，如果您自己不传递这些标记，则会为您创建一个<head>和<body>。如果只想要身体，那么：

const myHtmlString = '<p><span class="text">Hello World!</span></p>'
const htmlDom = new DOMParser().parseFromString(myHtmlString, 'text/html');
console.log(htmlDom.body.innerHTML);

将HTML字符串解析为DOM并将其转换回字符串

1 个答案: