我经常使用 Invisalign® 的网络应用程序来设置正畸病例。我使用 Keyboard Maestro 通过激活 JavaScript 在应用程序中创建键盘快捷键。
由键盘大师触发的 JavaScript 示例:
document.getElementById('myButton').click();
Web 应用程序最近更新,不再有按钮 ID。因此,getElementByID 不再起作用。我尝试了以下方法,但它不起作用:
document.getElementByClass('myClass').click();
(我试过c01143和c0012)页面的 HTML 示例如下:
<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>
我也试过:document.getElementBydata-qa-name('lower').click();
那也行不通。希望有人可以提供一个非常简单的解决方案。虽然我知道一些 HTML 和 CSS,但我的 JavaScript 几乎不存在。
最佳答案
非描述性的类名(例如 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
过滤值(value)虽然从您发布的内容来看,没有任何强烈迹象表明此
data-qa-name
属性的名称或值都会发生变化,您也可以根据其 innerText
定位元素类似于以下的值:[...document.querySelectorAll("button[type='button']")].find(function (ele) {return ele.innerText === "Lower"})).click();
以下代码片段虽然看起来很简洁,但执行以下步骤:button
具有属性 type
的元素的 button
成一个数组结构。 innerText
的第一个元素属性等于字符串 Lower
. click()
识别按钮上的方法。 此特定代码段无法满足您的要求的唯一情况是,如果在 DOM 树中某处出现在预期按钮元素之前的按钮也具有
innerText
属性等于字符串“Lower”。您必须执行少量测试,以确认哪些片段在您的场景中最一致地工作。进一步阅读
考虑到您自称对 JavaScript 的理解有限,您可能希望查阅以下 MDN 文档页面,以更好地掌握上述方法和语言约定:
document.querySelector()
document.querySelectorAll()
...
) Array
Array.find()
关于javascript - 识别没有 ID 值的 DOM 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64232856/