Question

我正在尝试为查看文本的querySelector做一个避免在内容中拾取div的文本。感谢任何想法。

JS

domdoc.querySelector('li.list_item').textContent

HTML：

<li class="list_item">
  Hello
  <a>
    world,
    <div id="tooltip">
      Please ignore this
    </div>
  </a>
  how are you
</li>

返回：

Hello world, Please ignore this how are you

想看看：

Hello world, how are you

Answer 1

querySelector将选择元素，而不是元素及其后代。

包含列表项后代的

textContent是textContent的一项功能，而不是querySelector的功能。

您可以克隆列表项，从中删除div，然后获取textContent。

var li = document.querySelector('li.list_item');
var duplicate = li.cloneNode(true);
duplicate.querySelector("div").remove();
console.log(duplicate.textContent);

<ul>
  <li class="list_item">
    Hello
    <a>
    world,
    <div id="tooltip">
      Please ignore this
    </div>
  </a> how are you
  </li>
</ul>

Answer 2

只需replace工具提示文字并修剪空格。

const text = document.querySelector(`li.list_item`).textContent
const tooltip = document.querySelector(`#tooltip`).textContent
const message = text.replace(tooltip, ``).replace(/\s+/g, ` `).trim()

console.log(message)

<li class="list_item">
  Hello
  <a>
    world,
    <div id="tooltip">
      Please ignore this
    </div>
  </a>
  how are you
</li>

使用querySelector（）排除后代

2 个答案: