javascript，如何在将 DOMparser 与 text/html 一起使用时删除 <html><head><body> 元素
Posted
技术标签:
【中文标题】javascript，如何在将 DOMparser 与 text/html 一起使用时删除 <html><head><body> 元素【英文标题】：javascript, how to remove the <html><head><body> elements when using DOMparser with text/html 【发布时间】：2015-11-23 16:34:38 【问题描述】：代码
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><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>
【问题讨论】：
【参考方案1】：documentElement 属性返回以下内容：
返回作为文档的直接子元素的元素。对于 HTML 文档，这通常是 HTMLHtmlElement 对象表示 文档的
<html>元素。-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);【讨论】：
【参考方案2】：使用childNodes
console.log(temp_node.childNodes[1].childNodes[0]);
或querySelector
console.log(temp_node.querySelector("#hi"));
JSFiddle demo
更新
或innerHTML
console.log(temp_node.querySelector("body").innerHTML);
JSFiddle demo
【讨论】：
如果我只有一个孩子，那就行了，但我确实有很多（问题已更新）。 使用temp_node.querySelector("body").innerHTML
是的，但是没有，因为我需要 DOM 结构。似乎使用 innerHTML 它丢失了（不是吗？）
然后temp_node.childNodes[1].childNodes（无索引）
是的，就是这样，我正在使用 createDocumentFragment 将所有 ChildNode 附加到父 div以上是关于javascript，如何在将 DOMparser 与 text/html 一起使用时删除 <html><head><body> 元素的主要内容，如果未能解决你的问题，请参考以下文章