时间戳

首页 > 解决方案 > 如何在“类”中获取“a”标签的元素？

javascript - 如何在“类”中获取“a”标签的元素？

问题描述

一段时间以来，我一直在为 GetElementsBy(ID/Tag/Span) 使用香草 javascript，想知道你们中是否有人遇到过这个问题或知道这个问题的解决方案。

我正在尝试为 DOM 中的 3 个 innerHTML 文本获取 getElementBy(...) ，如下所示：

<ul class ="main_Bucket">
  <li class="id_category">
    <span class="id_item">
    <span class="id_device">
      <a href="somesite.com">This is the Data I want to Grab</a>
    </span>
  </li>
<ul class ="main_Bucket">
  <li class="id_category">
    <span class="id_item">
    <span class="id_device">
      <a href="somesite.com">This is the Data I want to Grab</a>
    </span>
  </li>
<ul class ="main_Bucket">
  <li class="id_category">
    <span class="id_item">
    <span class="id_device">
      <a href="somesite.com">This is the Data I want to Grab</a>
    </span>
  </li>

最终，我想使用 GetElementsBy(...) 来获取文本标签内的所有三个文本。获取这些数据的正确方法是什么？

标签： javascripthtmldomweb-scraping

解决方案

您的 HTML 非常混乱。我尝试在下面的示例中对其进行清理，并为您尝试提取的每一位文本添加一些不同的文本，这样更能说明我们正在抓取 3 个不同的链接文本。代码遍历找到的锚点，并使用@Jaromanda X 在他的评论中写的相同的高度特定的选择器。

单击下面的“运行”按钮以查看它的运行情况。

let anchors = document.querySelectorAll('ul.main_Bucket>li.id_category>span.id_device>a');
console.log(anchors.length, "anchors found");
anchors.forEach((anchor)=>console.log(anchor.innerText));
<ul class ="main_Bucket">
  <li class="id_category">
    <span class="id_item"></span>
    <span class="id_device">
      <a href="somesite.com">ONE: This is the Data I want to Grab</a>
    </span>
  </li>
</ul>
<ul class ="main_Bucket">
  <li class="id_category">
    <span class="id_item"></span>
    <span class="id_device">
      <a href="somesite.com">TWO: This is the Data I want to Grab</a>
    </span>
  </li>
</ul>
<ul class ="main_Bucket">
  <li class="id_category">
    <span class="id_item"></span>
    <span class="id_device">
      <a href="somesite.com">THREE: This is the Data I want to Grab</a>
    </span>
  </li>
</ul>

推荐阅读