javascript - 如何从 Javascript querySelector 获取文本

Question

这个问题已经有答案了:

How to get the pure text without HTML element using JavaScript? (10 个回答)

已关闭 5 年前。

我的页面上有一个选项卡，其中包含如下选项卡:

<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 & Contacts ”，我想仅使用普通 JS 来完成此操作，而不是使用 jQuery 或任何其他框架。

这是我到目前为止的代码，我可以定位正确的事件选项卡，但不确定如何检索文本:

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

CodePen link

Answer 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, '&'));

<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>