Можно ли обратиться к элементу по атрибуту

«Можно ли обратиться к элементу по атрибуту» — вопрос из категории HTML, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Да, можно. В JavaScript есть несколько методов для поиска элементов по атрибуту:

  1. querySelector и querySelectorAll с CSS-селектором атрибута:
// Найти первый элемент с атрибутом data-test
const element = document.querySelector('[data-test]');

// Найти все элементы с атрибутом data-test="value"
const elements = document.querySelectorAll('[data-test="value"]');
  1. getAttribute для проверки значения атрибута у уже найденного элемента:
const hasAttribute = element.getAttribute('data-test') !== null;
  1. dataset для работы с data-атрибутами:
// Для элемента <div data-test-id="123">
const testId = element.dataset.testId; // "123"

При поиске учитывайте, что атрибуты чувствительны к регистру, а data-атрибуты преобразуются в camelCase.