如何在javascript中获取没有ID的元素的文本内容

Question

我想获取标题元素的特定文本内容，该内容没有任何与之关联的ID。我应该使用什么JavaScript代码获取内容“我只想要这个”。

var elements = document.querySelectorAll('.one span');
console.log(elements[0].text);

此代码未提供所需的输出

<h5 class="one two three four">
<span class="s1 s2">I don't want this</span>
I only want this one</h5>

我希望输出为“我只想要这个”，但是我变得未定义...

Answer 1

您要选择不是元素的文本节点，因此无法使用querySelectorAll（或querySelector）立即选择它-因此，首先选择父项（.one），然后导航到其最后一个子项：

const parent = document.querySelector('.one');
const textNode = parent.lastChild;
console.log(textNode.textContent);

<h5 class="one two three four">
  <span class="s1 s2">I don't want this</span>
I only want this one</h5>

请注意，如果只希望第一个与特定选择器字符串匹配的元素，则更适合使用querySelector（返回该元素），而不是querySelectorAll（返回一个集合）。您必须继续选择其中的第一个元素。