Блог

Предположим, у нас есть Html-элемент, я хочу выбрать все такие элементы на странице, класс которой содержит текстовую кнопку. Это не обязательно должна быть именно «кнопка». В этом случае классом является «кнопка-успех», так что его тоже нужно выбрать. Цель состоит в том, чтобы перейти к случайному URL и получить все теги кнопок

 <a class="nav-link button-success create-new-button" id="createbuttonDropdown" data-toggle="dropdown" aria-expanded="false" href="#">  Create Project</a>
  

До сих пор я представлял себе так много способов выбора кнопок

 const btnSelectedUsingClassBtn = document.querySelectorAll(".button");
const btnSelectedUsingClassButton = document.querySelectorAll(".button");
const btnSelectedUsingTagName = document.getElementsByTagName("button");
const btnSelectedUsingType = document.querySelectorAll("input[type=button]");
const btnSelectedUsingRole = document.querySelectorAll('[role="button"]');
  

Есть ли еще способы получить кнопки? И есть ли способ, которым мы можем выбрать кнопку с сайтов CMS, таких как WordPress, wix, squarespace и т.д. Им не обязательно иметь класс с кнопками имен в нем. есть ли для этого какое-нибудь подходящее слово

Я полагаю, что вы можете выбрать их все в одном запросе:

 const items = document.querySelectorAll("button, [class*=button], [type=button], [role=presentation]");
console.log(items);  

 <div class="button">Button</div>
<div class="button-success">Button Success</div>
<div class="button-failure">Button Failure</div>
<button>Button</button>
<input type=button value="Input Button" />
<div role="presentation">Presentation Button</div>