问题描述
我正在尝试在 Node.JS 中使用 JSDOM 编辑一些 HTML。我希望删除任何 <blockquote>
,它是至多一个围绕 <div>
的孩子。但我希望保留两个或多个 <blockquote>
内的任何 <div>
标签。我已阅读this question,但我仍然感到困惑。你可以看到我在这个 JSFiddle 中的尝试。这是原始 HTML:
<html>
<div id="div1">
<blockquote>Text 1</blockquote>
</div>
<div id="div2">
<div id="div3">
<blockquote>Text 2</blockquote>
<div id="div4">
<blockquote>Text 3</blockquote>
</div>
</div>
</div>
<span onclick="removeblockquotes(this)">Change</span>
</html>
应该变成
<html>
<div id="div1">
Text 1
</div>
<div id="div2">
<div id="div3">
<blockquote>Text 2</blockquote>
<div id="div4">
<blockquote>Text 3</blockquote>
</div>
</div>
</div>
</html>
这是我迄今为止尝试过的功能,但它不起作用(所有块引用都没有改变):
function removeblockquotes(e)
{
var x = document.querySelectorAll("blockquote");
x.forEach(y=>{
if (y.parentNode.parentNode==null){
y.parentNode.appendChild(x.innerHTML);
y.parentNode.removeChild(x);
};
});
}
解决方法
只需将两个 .closest
调用链接到每个块引用上,看看是否有多个 div:
for (const b of document.querySelectorAll('blockquote')) {
if (!b.closest('div')?.parentElement.closest('div')) {
b.replaceWith(b.textContent);
}
}
console.log(document.body.innerHTML);
<div id="div1">
<blockquote>Text 1</blockquote>
</div>
<div id="div2">
<div id="div3">
<blockquote>Text 2</blockquote>
<div id="div4">
<blockquote>Text 3</blockquote>
</div>
</div>
</div>
(您需要一个 .parentElement
,因为 .closest
将返回调用它的元素如果匹配)