How to get just text from Javascript querySelector [duplicate]

Question

I have a tab on my page which contains tabs like this:

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

Within the code I'd like to get the tab label in String format. So for the code above I'd like to return "Files & Contacts", I'd like to do this using just vanilla JS as opposed to using jQuery or any other framework.

This is the code I have so far, I can target the correct active tab but not sure how to just retrieve the text:

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

CodePen link

selectedTab.textContent?

evolutionxbox
– evolutionxbox

2017-11-21 12:17:49 +00:00
Commented Nov 21, 2017 at 12:17 — evolutionxbox
– evolutionxbox, Commented Nov 21, 2017 at 12:17

Zakaria Acharki · Accepted Answer · 2017-11-21 12:26:14Z

0

You could use innerText or 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>

edited Nov 21, 2017 at 12:26

answered Nov 21, 2017 at 12:20

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to get just text from Javascript querySelector [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related