主页 / coding / 问题 / 78051726
Accepted
sudoExclamationExclamation
Asked: 2024-02-24 16:44:47 +0800 CST

在 Javascript 中，我如何 querySelector 来获取不包括内部兄弟 div 之一的innerHTML

  • 772

我有以下 html：

<body>
    <span class="comment">
        EXAMPLES:
        <p><i>Example 1</i> - <a href="https://example.com/1">https://example.com/1</a> - Jan 2020 (2 comments)</p>
        <p><i>Example 2</i> - <a href="https://example.com/2">https://example.com/2</a> - Jun 2022 (13 comments)</p>
        <div class="reply"><p><u><a href="reply?id=12323" rel="nofollow">reply</a></u></p></div>
        <p><i>Example 3</i> - <a href="https://example.com/3">https://example.com/3</a> - Apr 2023 (33 comments)</p>
    </span>
</body>

我正在尝试获取除 div之外innerHTML的班级。.comment.reply

请注意，该.reply课程并不保证是最后一堂课。

基本上，我只想得到：

EXAMPLES:
<p><i>Example 1</i> - <a href="https://example.com/1">https://example.com/1</a> - Jan 2020 (2 comments)</p>
<p><i>Example 2</i> - <a href="https://example.com/2">https://example.com/2</a> - Jun 2022 (13 comments)</p>
<p><i>Example 3</i> - <a href="https://example.com/3">https://example.com/3</a> - Apr 2023 (33 comments)</p>

我不知道如何才能排除其中一个兄弟姐妹。

.reply我知道我可以使用以下方法让除班级之外的孩子们：

document.querySelectorAll(`.comment > :not(.reply)`)

但这不是innerHTML. 它是NodeList：

在此输入图像描述

有没有办法从中获取一个新的组合元素，NodeList然后我可以调用innerHTML它？

我在这里发现了一个稍微类似的问题：

Javascript .innerHTML 但不包括内部 div

但这个问题是关于提取特定的字符串，解决方案看起来很丑陋。有没有更好的办法？

javascript

1 个回答

  1. Best Answer

    在检索之前对节点进行深度克隆comment并删除该节点：replyinnerHTML

    var comment = document.querySelector(".comment").cloneNode(true);
comment.querySelector(".reply").remove();
console.log(comment.innerHTML);
    <span class="comment">
  EXAMPLES:
  <p><i>Example 1</i> - <a href="https://example.com/1">https://example.com/1</a> - Jan 2020 (2 comments)</p>
  <p><i>Example 2</i> - <a href="https://example.com/2">https://example.com/2</a> - Jun 2022 (13 comments)</p>
  <div class="reply"><p><font size="1"><u><a href="reply?id=12323" rel="nofollow">reply</a></u></font></p></div>
  <p><i>Example 3</i> - <a href="https://example.com/3">https://example.com/3</a> - Apr 2023 (33 comments)</p>
</span>

    注意我将缺少的结束</font>标记添加到您的示例中。如果没有这个，无与伦比的空缺<font>将保留在innerHTML.

    • 1

相关问题