Перейти до основного вмісту

Пошук елементів

Отже, ми вже знаємо що DOM-елемент - це об'єкт з властивостями і методами. Саме час навчитися швидко знаходити елемент за довільним CSS-селектором. Група методів elem.querySelector* - це сучасний стандарт для пошуку елементів. Вони дозволяють знайти елемент або групу елементів за CSS-селектором будь-якої складності.

element.querySelector(selector);

Використовується, якщо необхідно знайти тільки один, найчастіше унікальний елемент.

  • Повертає перший знайдений елемент всередині element, що відповідає CSS-селектору selector.
  • Якщо нічого не знайдено, поверне null.
element.querySelectorAll(selector);

Використовується, якщо необхідно знайти колекцію елементів, тобто отримати масив посилань на елементи з однаковим селектором. Наприклад, всі елементи списку з класом menu-item.

  • Повертає псевдомасив всіх елементів всередині element, які відповідають CSS-селектору selector.
  • Якщо нічого не знайдено, поверне порожній масив.

Відкрий цей приклад в окремому вікні і подивися логи в консолі розробника.