JS метод Element.querySelector()

Загальний опис

Element.querySelector() - це метод, який дозволяє знайти перший елемент у документі, що відповідає зазначеному селектору CSS. Він використовується для вибору та маніпуляції елементами на веб-сторінці та є корисним інструментом для роботи з DOM (Document Object Model).

Основна синтаксична конструкція методу querySelector() виглядає наступним чином:

element.querySelector(селектор);

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

Метод querySelector() підтримує широкий спектр селекторів CSS, включаючи селектори тегів, класів, ідентифікаторів, атрибутів, а також комбінації цих селекторів. Ось кілька прикладів використання:

// Вибір елемента за тегом
const heading = document.querySelector('h1');

// Вибір елемента за класом
const navLinks = document.querySelector('.nav-links');

// Вибір елемента за ідентифікатором
const mainContent = document.querySelector('#main-content');

// Вибір елемента за атрибутом
const externalLinks = document.querySelector('a[target="_blank"]');

// Комбінований селектор
const activeNavLink = document.querySelector('nav ul li.active a');

Одна з переваг використання querySelector() полягає в тому, що він дозволяє обирати елементи на основі їхнього контексту в документі. Наприклад, можна вибрати перший абзац всередині певного елемента:

const articleBody = document.querySelector('article');
const firstParagraph = articleBody.querySelector('p');

Метод querySelector() також дозволяє використовувати складні селектори CSS, такі як селектори псевдо-класів та псевдо-елементів. Наприклад, можна вибрати активний елемент навігації або першу літеру абзацу:

const activeNavLink = document.querySelector('nav a:active');
const firstLetter = document.querySelector('p::first-letter');

Слід зазначити, що querySelector() повертає лише перший елемент, що відповідає селектору. Якщо потрібно вибрати всі відповідні елементи, варто використовувати метод querySelectorAll(), який повертає статичну колекцію (NodeList) відповідних елементів.

Загалом, метод querySelector() є потужним та гнучким інструментом для вибору елементів на веб-сторінці, що значно спрощує маніпуляцію DOM та взаємодію з користувачем у JavaScript. Його використання дозволяє писати більш ефективний та зрозумілий код, а також полегшує роботу з різноманітними елементами веб-сторінки.

Синтаксис

querySelector(selectors)

Параметри

*selectors

Рядок, що містить один або більше селекторів CSS для вибору елементів. Це має бути коректний синтаксис CSS, інакше буде згенеровано виняток SyntaxError. Повертається перший знайдений елемент, що відповідає зазначеному селектору.

Return

element

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

Якщо жодний елемент не відповідає селектору, метод повертає null.

Переглядачі

• Стаціонарні переглядачі
• Мобільні переглядачі
• Серверні переглядачі

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

// Знаходимо перший елемент з класом "highlight"
const highlightedElement = document.querySelector('.highlight');

// Змінюємо колір тексту елемента
highlightedElement.style.color = 'red';

// Знаходимо елемент з ідентифікатором "parent"
const parentElement = document.querySelector('#parent');

// Ітеруємо по дочірніх елементах
const childElements = parentElement.children;
for (let i = 0; i < childElements.length; i++) {
  const child = childElements[i];

  // Перевіряємо, чи елемент є посиланням
  if (child.tagName.toLowerCase() === 'a') {
    // Додаємо клас до посилань
    child.classList.add('external-link');
  }
}