JavaScript querySelector() — пошук елемента за CSS-селектором

Метод querySelector() знаходить перший елемент, що відповідає CSS-селектору.

правити

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

Приймає будь-який селектор, який розуміє CSS: .class, #id, [data-id="1"], ul > li:first-child. Це й зробило його універсальною заміною всім старим методам пошуку.

Якщо нічого не знайшов — повертає null, а не помилку. Тому звертання до властивості одразу після виклику — класичне джерело TypeError. Оператор ?. цю проблему знімає.

Викликаний на елементі, шукає лише серед його нащадків — тобто пошук можна звужувати.

правити

Нотатка

Не знайшов — це null. document.querySelector('.missing').textContent кине TypeError, і це найчастіша помилка в консолі новачків.

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

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

Переглядачі

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

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

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

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

Переглядач
querySelector	yes	yes	yes	yes

Приклади

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

<ul id="list">
    <li data-id="1">Перший</li>
    <li data-id="2" class="active">Другий</li>
</ul>

const list = document.getElementById('list');

// будь-який CSS-селектор
console.log(document.querySelector('#list .active').textContent);
console.log(document.querySelector('[data-id="1"]').textContent);

// шукає лише серед своїх нащадків
console.log(list.querySelector('li').textContent); // 'Перший'

// не знайшов — null, а не помилка
console.log(document.querySelector('.missing')); // null

// безпечно
console.log(document.querySelector('.missing')?.textContent); // undefined