识别没有 ID 值的 DOM 元素

Question

我经常使用 Invisalign\xc2\xae 的网络应用程序来设置正畸病例。我使用 Keyboard Maestro 通过激活 JavaScript 在应用程序中创建键盘快捷键。

\n

键盘大师触发的 JavaScript 示例：

\n

document.getElementById('myButton').click();\n

\n

网络应用程序最近已更新，不再有按钮 ID。因此，getElementByID 不再起作用。

\n

我已经尝试过以下方法，但它不起作用：

\n

document.getElementByClass('myClass').click();\n

\n

（我尝试过c01143和c0012）

\n

该页面的 HTML 示例如下：

\n

<div class='c0012'>\n        <button type="button" tabindex="-1" data-qa-name="lower" data-qa-toggled="false" class="c0180 c01149 c01151">\n            <div class="c01143">\n                <svg class="c0189 c0191" viewBox="0 0 24 24"><path d="M2,13 L22,13 L22,16 L2,16 L2,13 Z M8,8 L16,8 L16,11 L8,11 L8,8 Z"></path></svg>\n            </div>\n        <span class="c01142">Lower</span>\n    </button>\n</div>\n

\n

我也尝试过：

\n

document.getElementBydata-qa-name('lower').click();\n

\n

这也是行不通的。希望有人可以帮助提供一个非常简单的解决方案。虽然我了解一些 HTML 和 CSS，但我对 JavaScript 几乎一无所知。

\n

Answer 1

非描述性类名（例如，c0012，c01143）强烈表明，在站点堆栈中的某个位置，HTML/CSS/JS 正在动态编译/生成。因此，您应该预期这些标识符可能会发生巨大且频繁的变化，并且您不应该在代码片段中依赖它们。

方法#1 -document.querySelector()使用data-qa-name

您可以使用document.querySelector()基于button标签、button type值以及自定义data-qa-name属性的方法进行识别。下面演示了此方法可以在不依赖类名或（不再存在的）ID 值的情况下识别元素：

(() => {
  console.log(document.querySelector("button[type='button'][data-qa-name='lower']"));
})();

<div class='c0012'>
  <button type="button" tabindex="-1" data-qa-name="lower" data-qa-toggled="false" class="c0180 c01149 c01151">
            <div class="c01143">
                <svg class="c0189 c0191" viewBox="0 0 24 24"><path d="M2,13 L22,13 L22,16 L2,16 L2,13 Z M8,8 L16,8 L16,11 L8,11 L8,8 Z"></path></svg>
            </div>
        <span class="c01142">Lower</span>
    </button>
</div>

click()您只需调用已识别的元素即可提升和移动上述内容，就像您之前所做的那样：

document.querySelector("button[type='button'][data-qa-name='lower']").click();

方法#2 - ，使用值document.querySelectorAll()过滤.innerText

虽然从您发布的内容来看，没有任何明显迹象表明该data-qa-name属性的名称或值会发生变化，但您也可以根据其innerText值来定位该元素，如下所示：

[...document.querySelectorAll("button[type='button']")].find(function (ele) {return ele.innerText === "Lower"})).click();

以下代码片段虽然看起来很简洁，但执行以下步骤：

1. 将具有 属性的所有button元素枚举到 Array 结构中。typebutton
2. 查找并返回数组中属性innerText等于 string 的第一个元素Lower。
3. click()在识别的按钮上执行该方法。

该特定代码片段无法满足您的要求的唯一情况是，如果 DOM 树中某个按钮出现在预期按钮元素之前，并且该按钮元素也具有innerText等于字符串“Lower”的属性。您必须执行少量测试来确认这些片段中的哪一个在您的场景中最一致地工作。

进一步阅读

考虑到您自称对 JavaScript 的理解有限，您可能希望查阅以下 MDN 文档页面，以更好地掌握上述方法和语言约定：

• document.querySelector()
• document.querySelectorAll()
• 展开语法 ( ...)
• 词汇表 -Array
• Array.find()

Answer 2

您可以使用document.querySelector()CSS 样式选择器来定位元素。在下面的示例中，它选择具有该类的元素内的第一个按钮.c0012。

document.querySelector('.c0012 button').click();