获取父类的内部 HTML 但忽略子类

Question

我需要将父元素的 innerHTML 保存到变量中，同时忽略某些子类。

我试过隐藏和不显示（不起作用）。 删除它们然后将它们重新添加到它们所在的位置可能是一种选择，但我不确定如何实现。

示例代码，读取父div的innerHTML，但忽略任何包含“ignore-me”作为类的元素。

<div id="parent">
 <p>read me read me read me</p>
 <div class="ignore-me">and thus ignore this text</div>
 <p>read me read me read me</p>
 <script class="ignore-me"></script>
 <p>read me read me read me</p>
 <link class="ignore-me">
</div>

我有一个复制按钮，可以将正文的内容复制到剪贴板。 我只需要弄清楚如何在不破坏它们的情况下从复制函数中忽略/去除上述元素。

Answer 1

这是您可以实现的方法。选择除特定类外的所有子级。

 let html=document.querySelectorAll("#parent >:not(.ignore-me)"); //console.log(html) // returns only p tags html.forEach(ele=>console.log(ele.innerHTML)) // you can get html like this 

 <div id="parent"> <p>read me read me read me</p> <div class="ignore-me">and thus ignore this text</div> <p>read me read me read me</p> <script class="ignore-me"></script> <p>read me read me read me</p> <link class="ignore-me"> </div> 

这是您可以在jquery中执行的操作（只需添加）

 let html = $('#parent').children().not('.ignore-me'); //console.log(html); html.each(function() { console.log($(this).html()) }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="parent"> <p>read me read me read me</p> <div class="ignore-me">and thus ignore this text</div> <p>read me read me read me</p> <script class="ignore-me"></script> <p>read me read me read me</p> <link class="ignore-me"> </div> 

Answer 2

如果我清楚地知道您想要一个parent级副本 ，但没有带有元素ignore-me元素：

[edit]添加了clipborad副本（请参阅： https : //developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard#Using_the_Clipboard_API ）

 document.querySelector('#Bt-Copy').onclick=_=> { let parentBis = document .getElementById('parent') .cloneNode(true) parentBis .querySelectorAll('.ignore-me') .forEach(element=>{ parentBis.removeChild(element) }) console.log('copy :=', parentBis.innerHTML) add2Clipboard( parentBis.innerHTML ) } function add2Clipboard(newClip) // copy to clipboard { navigator.clipboard .writeText(newClip) .then(_=>{ console.log('clipboard successfully set ') } ,_=>{ console.log('clipboard write failed ') } ); } 

 .ignore-me { color: red } 

 <div id="parent"> <p>read me read me read me</p> <div class="ignore-me">and thus ignore this text</div> <p>read me read me read me</p> <script class="ignore-me"></script> <p>read me read me read me</p> <link class="ignore-me"> </div> <button id="Bt-Copy">copy to clipboard (except red part)</button> 

Answer 3

也许现在回答为时已晚，但我认为为了在需要 html 的情况下保留树结构，我发现以下是最佳解决方案。

 const node = document.getElementById("parent"); const clone = node.cloneNode(true); const elems = clone.querySelectorAll('.ignore-me'); for (const elem of elems) { elem.remove(); } console.log(clone.innerText);

 <div id="parent"> <p>read me read me read me</p> <div class="ignore-me">and thus ignore this text</div> <p>read me read me read me</p> <script class="ignore-me"></script> <p>read me read me read me</p> <link class="ignore-me"> </div>