Question

我有一个结构如下的页面，我想从跨度类“ spanName”中提取“ TEXT”。

我尝试使用getElementbyClassName，getElementbyId时没有运气。

<section id="level1" class="level1a">
  <div class>
    <div class="level3">
      <div class="level4">
        <span class="spanName">TEXT</span>
      </div>
    </div>
  </div>
</section>

有人可以帮忙吗？

Answer 1

getElementsByClassName() 返回元素的 NodeList 集合。您需要做的就是结合 .innerHTML ：

访问NodeList集合的索引。

console.log(document.getElementsByClassName('spanName')[0].innerHTML);

<section id="level1" class="level1a">
  <div class>
    <div class="level3">
      <div class="level4">
        <span class="spanName">TEXT</span>
      </div>
    </div>
  </div>
</section>

或者，您可以根据ID level1来抓取元素，然后使用 childNodes 下移：

console.log(document.getElementById('level1').childNodes[1].childNodes[1].childNodes[1].childNodes[1].innerHTML);

<section id="level1" class="level1a">
  <div class>
    <div class="level3">
      <div class="level4">
        <span class="spanName">TEXT</span>
      </div>
    </div>
  </div>
</section>

或使用 getElementsByTagName() 查找<span>：

console.log(document.getElementsByTagName('span')[0].innerHTML);

<section id="level1" class="level1a">
  <div class>
    <div class="level3">
      <div class="level4">
        <span class="spanName">TEXT</span>
      </div>
    </div>
  </div>
</section>

Answer 2

找到了解决方案：

document.getElementById('level1').getElementsByClassName('spanName')[0].innerText

Answer 3

您可以用不同的方式来做到这一点，这是一个可以帮助您的示例：

var span = document.querySelector('.spanName');

console.log(span.innerText);

<section id="level1" class="level1a">
  <div class>
    <div class="level3">
      <div class="level4">
        <span class="spanName">TEXT</span>
      </div>
    </div>
  </div>
</section>

如何获取span类的内容（console.log）

3 个答案: