querySelector() в JavaScript — знайти елемент за селектором

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

Метод 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() повертає перший знайдений елемент, який відповідає заданому селектору. Якщо в документі існує кілька елементів, які відповідають селектору, і вам потрібно працювати з усіма ними, розгляньте використання querySelectorAll(), який повертає всі відповідні елементи у вигляді NodeList.

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

Порада

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

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

Порада

Для використання querySelector() в контексті конкретного елемента, а не всього документу, викличте метод на елементі, а не на об'єкті document. Це дозволить вам звузити область пошуку до певної частини DOM, ефективно зменшуючи область пошуку та підвищуючи продуктивність скрипта.

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

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

Синтаксис

querySelector(selectors)

Параметри

selectors

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

автор: Bond

правити

Повернення

ElementObject

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

автор: Bond

правити

Переглядачі

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

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

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

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

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

Приклади

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

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

// Визначаємо 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 = "Натиснуто";

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

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

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

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

<header>
  <h2 class="title">Document.querySelector()</h2>
  <p class="description">Знаходить перший елемент, що відповідає заданому CSS-селектору.</p>
</header>
<main>
  <div class="result">
    <button id="themeToggle">Переключити тему</button>
    <div id="content">Це зміст сторінки. Натисніть кнопку вище, щоб змінити тему оформлення.</div>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

/* Стилі для темної теми */
.dark-theme {
  background-color: #333;
  color: #fff;
}

.dark-theme header {
  background-color: #444;
}

.dark-theme .result {
  background-color: #555;
}

document.querySelector('#themeToggle').addEventListener('click', function () {
  document.body.classList.toggle('dark-theme');
  var theme = document.body.classList.contains('dark-theme') ? 'темну' : 'світлу';
  document.querySelector('#content').textContent = `Тему оформлення змінено на ${theme}. Натисніть кнопку вище, щоб змінити тему оформлення знову.`;
});
//# sourceURL=pen.js