如何从Javascript querySelector中获取文本[重复]答案

【问题标题】：How to get just text from Javascript querySelector [duplicate]如何从Javascript querySelector中获取文本[重复]
【发布时间】：2017-11-21 12:16:55
【问题描述】：

我的页面上有一个标签，其中包含如下标签：

<ul>
  <li class="3 tabs__item active uiTabItem" role="presentation" data-aura-rendered-by="79:126;a" data-aura-class="uiTabItem" data-original-width="183">
    <a class="tabHeader" aria-selected="true" data-tab-name="3" tabindex="0" role="tab" aria-controls="73:126;a" title="Files &amp; Contacts" href="?tabset-563b2=3" data-aura-rendered-by="80:126;a" data-special-link="true">
      <span data-aura-rendered-by="81:126;a">
     </span>
      <span class="title" data-aura-rendered-by="83:126;a">Files &amp; Contacts</span>
    </a>
  </li>
</ul>

在代码中，我想获取字符串格式的选项卡标签。所以对于上面的代码我想返回“Files &amp; Contacts”，我想只使用vanilla JS而不是使用jQuery或任何其他框架。

这是我到目前为止的代码，我可以定位正确的活动标签，但不确定如何检索文本：

var selectedTab = document.querySelector('.tabs__item.active');
console.log(selectedTab);

CodePen link

【问题讨论】：

selectedTab.textContent?

标签： javascript html

【解决方案1】：

您可以使用 innerText 或 textContent ：

var selectedTab = document.querySelector('.tabs__item.active');
console.log(selectedTab.innerText);
//OR
console.log(selectedTab.textContent);
//OR
console.log(selectedTab.innerText.replace(/&/g, '&amp;'));

<ul>
  <li class="3 tabs__item active uiTabItem" role="presentation" data-aura-rendered-by="79:126;a" data-aura-class="uiTabItem" data-original-width="183">
    <a class="tabHeader" aria-selected="true" data-tab-name="3" tabindex="0" role="tab" aria-controls="73:126;a" title="Files &amp; Contacts" href="?tabset-563b2=3" data-aura-rendered-by="80:126;a" data-special-link="true">
      <span data-aura-rendered-by="81:126;a"><!--render facet: 82:126;a--></span>
      <span class="title" data-aura-rendered-by="83:126;a">Files &amp; Contacts</span>
    </a>
  </li>
</ul>

【讨论】：