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. Його використання дозволяє писати більш ефективний та зрозумілий код, а також полегшує роботу з різноманітними елементами веб-сторінки.

правити

Порада

Будьте обережні при використанні складних селекторів CSS у querySelector(). Хоча вони можуть бути зручними, їх використання може негативно вплинути на продуктивність, особливо якщо вони застосовуються до великих фрагментів DOM. У таких випадках розгляньте можливість використання більш простих селекторів або альтернативних методів, таких як getElementById() або getElementsByClassName().

автор: Bond правити

Порада

Комбінуйте querySelector() з іншими методами для маніпуляції обраними елементами. Наприклад, ви можете змінити стиль елемента або додати обробник події після його вибору: document.querySelector('button').style.color = 'red' або document.querySelector('#myDiv').addEventListener('click', handleClick).

автор: Bond правити

Порада

Для вибору кількох елементів використовуйте querySelectorAll() замість querySelector(). Метод querySelectorAll() повертає статичну колекцію (NodeList) всіх елементів, що відповідають заданому селектору. Ви можете перебрати цю колекцію за допомогою циклу для виконання операцій над кожним елементом.

const links = document.querySelectorAll('a');
links.forEach(link => {
  link.style.textDecoration = 'underline';
});

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

querySelector(selectors)

Параметри

selectors

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

автор: Bond

правити

Повернення

element

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

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

автор: Bond

правити

Переглядачі

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

Підтримка: стаціонарні переглядачі

Переглядач
	1	3.5	3.1	10	12

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	2

Підтримка: серверні переглядачі

Переглядач
	-	-

Приклади

+ запропонувати свій приклад у пісочниці

<div class="highlight">перший елемент highlight</div>
<div class="highlight">другий елемент highlight</div>

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

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

<div id="parent">Демонстраційний елемент</div>

// Знаходимо елемент з ідентифікатором "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');
  }
}