0

我必须查看网页上的大量视频（截图如下）。视频部分隐藏。而要观看每个视频，我必须more一个一个地点击按钮（如下图所示）。 在此处输入图像描述

每页通常有 40 个视频。不断地滚动并more一遍又一遍地点击按钮是乏味的，如果我继续这样做，我想我会受到重复性压力伤害。

所以，我想我会使用 Chrome Dev Toolsconsole来识别按钮并在一个批处理过程中向它们发送所有点击。

我可以使用Chrome Dev Tools 中的工具 找到more按钮，如下所示：inspect在此处输入图像描述

按钮的moreDOM-tree 面包屑路径inspect（请点击放大，下面有两个图像部分）：

在此处输入图像描述

在此处输入图像描述

more按钮标记代码如下所示：

<button class="d2l-label-text" type="button">
    <d2l-icon class="d2l-button-subtle-icon" icon="d2l-tier1:chevron-down" dir="ltr"></d2l-icon>
    <span class="d2l-button-subtle-content"><!---->more<!----></span>
    <slot></slot>
</button>

more按钮class是_d2l-label-text

我想我会在console：

> let allbuttonsArray = document.getElementsByClassName("d2l-label-text");

  for (let eachbutton of allbuttonsArray) {
    eachbutton.click();
  }

然而，事实证明这document.getElementsByClassName("d2l-label-text")并没有抓住任何东西。结果数组的长度为0。

我尝试使用其他一些选择器，发现console不是从 中抓取的generated source/computed html，它只是在抓取那里的标签/元素source（可以通过 获取的原始来源right-click, view source）。

我的问题：我做错了什么？我怎样console才能抓住generated source/computed html more按钮？

4

2 回答 2

2

从屏幕截图中可以看出，该元素位于ShadowRoot内，这意味着它不能直接从 main 访问document。

要找到这样的元素，您必须递归访问 ShadowRoot 链。
在您的情况下，此链中有两个元素。

for (const more of document.querySelectorAll('d2l-more-less')) {
  for (const buttonSubtle of more.shadowRoot.querySelectorAll('d2l-button-subtle')) {
    const btn = buttonSubtle.shadowRoot.querySelector('button');
    if (btn) btn.dispatchEvent(new MouseEvent('click', {bubbles: true}));
  }
}

如果 shadowRoot 是由页面在'closed'模式下创建的，您可能必须Element.prototype.attachShadow在页面上下文脚本中挂钩。

于 2019-10-06T04:29:35.690 回答
0

您是否知道您要获取的内容是否在页面内的 iframe 内？

如果是这样，我相信您需要先获取 iframe，然后使用

theiframe.getElementsByClassName()
于 2019-10-05T19:49:28.000 回答