JS метод Document.querySelector()

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

Метод querySelector() дозволяє виконати пошук першого елемента, що відповідає заданому CSS-селектору. Цей метод значно спрощує доступ до елементів DOM, дозволяючи розробникам легко взаємодіяти зі структурою веб-сторінки за допомогою стандартних CSS-селекторів, таких як теги, ідентифікатори, класи, атрибути, псевдокласи тощо.

querySelector() є частиною Document Object Model (DOM) API і може бути використаний з будь-яким об'єктом, що реалізує інтерфейс Document або Element. Це означає, що метод не лише може шукати елементи в рамках усього документа, але й у межах конкретного елемента, що робить його надзвичайно гнучким у використанні.

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

Простий приклад використання

// Пошук першого елемента <p> у документі
var paragraph = document.querySelector("p");
// Зміна текстового вмісту знайденого елемента
paragraph.textContent = "Змінено текст за допомогою querySelector()";

У цьому прикладі querySelector() шукає перший елемент <p> у документі та змінює його текстовий вміст. Це демонструє базове застосування методу для доступу та модифікації елементів.

Застосування з різними селекторами

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

// Пошук елемента за ідентифікатором
var specificElement = document.querySelector("#specificElement");

// Пошук елемента за класом
var elementByClass = document.querySelector(".someClass");

// Пошук елемента за атрибутом
var elementByAttribute = document.querySelector("[data-custom='value']");

Складніше застосування

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

// Додавання слухача подій до кнопки
document.querySelector("#submitButton").addEventListener("click", function() {
    alert("Кнопка натиснута");
});

// Умовне застосування стилів
var importantParagraph = document.querySelector("p.important");
if (importantParagraph) {
    importantParagraph.style.color = "red";
}

У цих прикладах демонструється застосування querySelector() для додавання функціональності до елементів без прямого доступу до них через HTML-атрибути, що робить код чистішим та більш абстрактним.

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

Синтаксис

querySelector(selectors)

Параметри

*selectors

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

Return

ElementObject

Повертає об'єкт Element, який представляє перший елемент у документі, що відповідає заданому набору CSS-селекторів, або null, якщо збігів не знайдено. Якщо потрібен список усіх елементів, які відповідають вказаним селекторам, слід використовувати метод querySelectorAll().

Переглядачі

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

Приклади

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

// Визначаємо HTML-структуру з кнопкою
// <button class="btn">Натисни мене</button>

// Використовуємо `Document.querySelector()` для пошуку кнопки за класом
var button = document.querySelector(".btn");

// Змінюємо стилі кнопки
button.style.backgroundColor = "blue";
button.style.color = "white";
button.style.padding = "10px 20px";
button.textContent = "Натиснуто";

// Визначаємо HTML-структуру з одним параграфом
// <p id="greeting">Привіт, світ!</p>

// Використовуємо `Document.querySelector()` для пошуку елемента за ID
var p = document.querySelector("#greeting");

// Змінюємо текст вибраного параграфа
p.textContent = "Вітаємо на нашому сайті!";