Как нажать кнопку, объявленную как "role = button" внутри диапазона тегов с javascript

Question

Я только начал с JavaScript, сосредоточившись на DOM, потому что мне нужно автоматизировать некоторые человеческие работы в наших веб-сервисах.

Я пытаюсь нажать кнопку, используя код 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>