使用 Javascript 从 table 外的 div 获取 td 内的所有元素

Question

我目前正在努力获取所有 A 元素，其中 td 位于 table 内，table 位于重复 [=17= 内].

这就是我的 html 代码的格式

我希望每个 a 元素都在一个变量中，下面我将使用我拥有的功能单击所有这些元素，但不要介意。

所以我试过了

var scrl = document.getElementsByClassName("uiScrollableAreaContent");
var circleditems = scrl[scrl.length-1].getElementsByClassName("_1pu2 _1pu4");

但是显然没有得到a元素。知道如何在 Javascriot（而不是 jquery）中做到这一点吗？？

非常感谢~

Answer 1

这应该可以用 document.querySelectorAll() 解决：

Returns 文档中与指定的 selectors 组匹配的元素列表（使用文档节点的深度优先预序遍历）。返回的对象是一个 NodeList.

该函数接受 CSS selector。所以这应该给你你正在寻找的链接：

document.querySelectorAll(".uiScrollableAreaContent ._1pt_ table.uiGrid a._1pu2._1pu4");

一个小例子：

var links = document.querySelectorAll(".uiScrollableAreaContent ._1pt_ table.uiGrid a._1pu2._1pu4");
links.forEach(l => l.classList.add("highlight"));

.highlight { background-color: yellow }

<div class="uiScrollableAreaContent">
  <div class="_1pt_">
    <table class="uiGrid">
    <tbody>
      <tr><td><a href="#" class="">1</a></td></tr>
      <tr><td><a href="#" class="_1pu2 _1pu4">2</a></td></tr>
      <tr><td><a href="#" class="">3</a></td></tr>
      <tr><td><a href="#" class="_1pu2 _1pu4">4</a></td></tr>
    </tbody>
    </table>
  </div>
  <p>
    <a href="#" class="_1pu2 _1pu4">lorem ipsum</a>
  </p>
</div>

使用 Javascript 从 table 外的 div 获取 td 内的所有元素

Get all a elements inside td's from a div outside the table with Javascript

javascript

html

getelementsbyclassname