如何使用JavaScript获取活动标签的文本值？

Question

如何使用JavaScript获取活动标签的文本值？由于它是第三方Web应用程序，因此无法修改页面上的代码。在示例中，我希望返回值“ BASIC INFORMATION”。我假设存在某种方式来利用tabindex = 0等，但是我不知道如何？

谢谢！

Answer 1

applyNow-active看起来是一个很好的类。这里的挑战是忽略子节点。

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!

示例：https://jsfiddle.net/vo0hperz/

Answer 2

这是一种方法：

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

Answer 3

获取.applyNow-active标签的第一个子节点（textNode）：

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>