识别没有ID值的DOM元素 方法1-使用document.querySelector()的{​​{1}} 方法2-document.querySelector("button[type='button'][data-qa-name='lower']").click(); ，使用document.querySelectorAll()值进行过滤进一步阅读

如何解决识别没有ID值的DOM元素 方法1-使用document.querySelector()的{​​{1}} 方法2-document.querySelector("button[type='button'][data-qa-name='lower']").click(); ，使用document.querySelectorAll()值进行过滤进一步阅读

我经常使用Invisalign®的Web应用程序来设置正畸案例。我使用Keyboard Maestro通过激活JavaScript在应用程序内创建键盘快捷键。

由键盘大师触发的JavaScript的示例：

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

该网络应用程序最近已更新，并且不再有按钮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,16 L2,13 Z M8,8 L16,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()的{​​{1}}

您可以使用data-qa-name方法基于document.querySelector()标签，button button值以及自定义type属性进行识别。以下内容证明了该方法无需依赖类名或（不再存在的）ID值即可识别元素：

data-qa-name

(() => {
  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,16 L2,13 Z M8,8 L16,11 L8,8 Z"></path></svg> </div> <span class="c01142">Lower</span> </button> </div>来抬起和移动上面的内容

click()

---

方法2-document.querySelector("button[type='button'][data-qa-name='lower']").click(); ，使用document.querySelectorAll()值进行过滤

从您发布的内容来看，虽然没有任何明显的迹象表明此.innerText属性的名称或值会更改，但是您也可以根据元素的data-qa-name值来定位该元素，类似于以下：

innerText

以下代码段虽然简洁，但执行以下步骤：

1. 将属性[...document.querySelectorAll("button[type='button']")].find(function (ele) {return ele.innerText === "Lower"})).click(); 为button的所有type元素枚举为数组结构。
2. 查找并返回数组中具有button属性等于字符串innerText的数组中的第一个元素。
3. 在标识的按钮上执行Lower方法。

此特定代码段无法满足您的要求的唯一情况是，如果预期按钮元素之前的DOM树中某处出现了一些按钮，并且它们也有一个{{1} }属性等于字符串“ Lower”。您必须进行少量测试，以确认这些片段中的哪个片段在您的情况下最一致地工作。

---

进一步阅读

考虑到您自称对JavaScript的了解有限，您不妨参考以下MDN文档页面，以更好地了解上面利用的方法和语言约定：

• document.querySelector()
• document.querySelectorAll()
• Spread syntax (...)
• Glossary - Array
• Array.find()

,

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

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