如何用javascript点击标签跨度中声明为 "role = button "的按钮？

Question

我刚刚开始使用JavaScript，重点是DOM，因为我必须在我们的Web服务中自动化一些人类的工作。

我试图用JavaScript代码点击一个按钮，但我无法访问到的 click() 函数给这个按钮。这可能是因为，这个按钮实际上不是一个声明的按钮，这个按钮是在一个 <div><span><a> 标签，使用 role=button.

后面是部分HTML代码。

<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
  <span class="ui-dialog-title" id="ui-dialog-title-jobCardDetail">text..</span>
  <a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button">
    <span class="ui-icon ui-icon-closethick">close</span>
  </a>
  ::after
</div>

我怎么能点击它？

Answer 1

你可以查询元素并在上面使用click()。这里我使用classNames进行查询。

这里我在按钮上添加了一个事件监听器，只是为了显示在按钮上发生了点击。

const btn = document.querySelector(".ui-dialog-titlebar-close.ui-corner-all");
// test code
btn.addEventListener('click', () => {
  console.log('Click Check!');
});
// test code
btn.click();

<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
<span class="ui-dialog-title" id="ui-dialog-title-jobCardDetail">text..</span>
<a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button">
<span class="ui-icon ui-icon-closethick">close</span>
</a>
::after
</div>