How do I get the text value of the active tab using JavaScript?

Question

How do I get the text value of the active tab using JavaScript? I can't modify the code on the page as it is a 3rd party web app. In the example, I would want the value "BASIC INFORMATION" returned. I'm assuming there is some type of way to leverage the tabindex=0 etc. but I don't know how?

Thanks!

Answer 1

applyNow-active looks like a good class to use. The challenge here is ignoring the child node.

let element = document.querySelector('.applyNow-active label');

let child = element.firstChild;
let texts = [];

while (child) {
    if (child.nodeType == 3) {
        texts.push(child.data);
    }
    child = child.nextSibling;
}

texts.join(""); // this is the text!

example: https://jsfiddle.net/vo0hperz/

Answer 2

这是一种方法：

var textYouWant = document.querySelector('.applyNow-active>label').firstChild.textContent.trim();

Answer 3

Get the first child (textNode) of the .applyNow-active label:

 let activeElement = document.querySelector('.applyNow-active label') console.log(activeElement.firstChild.textContent.trim()) 

 <main class="main-container"> <div class="progress-step" id="ApplicationProgressBar" style="display:block;"> <section role="banner"> <ul aria-label="Application Progressbar" role="list"> <li id="basic-info" tabindex="0" class="applyNow-active"> <label>"BASIC INFORMATION" <span class="screen-reader-text">APPLICATION STEP</span> </label> </li> <li id="business-info" tabindex="-1"> <label>"BUSINESS INFORMATION" <span class="screen-reader-text">APPLICATION STEP</span> </label> </li> <li id="personal-info" tabindex="-1"> <label>"PERSONAL INFORMATION" <span class="screen-reader-text">APPLICATION STEP</span> </label> </li> <li id="app-results" tabindex="-1"></li> </ul> </section> </div>