JavaScript，如何在使用DOMparser解析text/html时删除<html> <head> <body>元素

Question

JavaScript，如何在使用DOMparser解析text/html时删除<html> <head> <body>元素

5

代码

var txt = '<div id="hi">fe</div><div id="h2">fe</div><div id="hj">fe</div>'
var parser = new DOMParser();
var temp_node = parser.parseFromString(txt, "text/html").documentElement;
console.log(temp_node)

这段代码生成完整的HTML文档，包括所有的HTML标签。

<html><head></head><body>
<div id="hi">fe</div>
<div id="h2">fe</div>
<div id="hj">fe</div>
</body></html>

如果我只想要<div id="hi">fe</div><div id="h2">fe</div><div id="hj">fe</div>这部分怎么办？我该如何操作？

另外，如果我想要追加所有节点，是否有一种方法可以不用循环实现？

parentNode.appendChile(temp_node) // add the entire code
parentNode.appendChile(temp_node.firstElementChild.nextElementSibling) // add the parent <body> and the other layers inside
parentNode.appendChild(temp_node.firstElementChild.nextElementSibling.childNodes) // doesn't do the trick, it complains about not being a "node", I guess I'd need an "appendChilds" function that allows to add many nodes at once

如果parentNode是 <div id="parent">，那么我希望...

<div id="parent">
 <div id="hi">fe</div>
 <div id="h2">fe</div>
 <div id="hj">fe</div>
</div>

但我得到的是

<div id="parent">
 <body>
  <div id="hi">fe</div>
  <div id="h2">fe</div>
  <div id="hj">fe</div>
 </body>
</div>

- GWorking

2个回答

2

属性 documentElement 返回以下内容：

返回文档的直接子元素。对于HTML文档，这通常是表示文档的<html>元素的HTMLHtmlElement对象。

- MDN

还有其他存在于 Document 上的属性，其中.body是其一。使用.body（而不是querySelector）将使您快速直接访问HTML内容的 body ，然后可以使用.innerHTML来获得它的内部内容：

parser.parseFromString(txt, "text/html").body

请参考以下实例：

const txt = '<div id="hi">fe</div><div id="h2">fe</div><div id="hj">fe</div>'
const parser = new DOMParser();
const temp_node = parser.parseFromString(txt, "text/html").body;
console.log(temp_node.innerHTML);

- Nick Parsons

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- davcs86 · Accepted Answer

使用 childNodes。

console.log(temp_node.childNodes[1].childNodes[0]);

或者 querySelector

console.log(temp_node.querySelector("#hi"));

JSFiddle演示

更新

或者innerHTML

console.log(temp_node.querySelector("body").innerHTML);

JSFiddle演示