Var el = document.querySelector ( "div.user-panel.main input");

Specifications

Browser compatibility

The compatibility table on this page is generated from structured data. If you "d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

Legend

На цьому уроці ми розглянемо методи об'єкта document, які призначені для пошуку вузла або колекції вузлів у всьому документі. А також методи об'єкта node (вузла), які виконують аналогічні дії, але вже серед своїх дочірніх вузлів.

Методи, призначені для пошуку вузла або колекції вузлів в дереві

На попередньому уроці ми розглянули властивості, за допомогою яких ми можемо переміщатися по дереву і знаходити потрібні нам вузли. Але, пошук вузлів за допомогою їх властивостей заняття дуже важке і не ефективне. Тому щоб знайти вузли в дереві, веб-розробники зазвичай використовують спеціально призначені для цього методи об'єкта document або вузла (node).

Метод getElementById ()

Метод getElementById (elementID) повертає елемент в документі, який має вказаний ідентифікатор (id = "elementID"), у вигляді об'єкта Node (вузла). Якщо елемента із зазначеним ідентифікатором не існує, то даний метод повертає значення null.

Відповідно стандартом у Вас в документі не може бути кілька елементів з однаковим значенням атрибута id, тобто значення ідентифікатора повинні бути унікальним в межах одного документа. Проте, якщо у Вас в документі існують кілька елементів із зазначеним id, то метод getElementById () поверне перший знайдений елемент.

document.getElementById (elementID)

Даний метод має один обов'язковий параметр (elementID), що представляє собою рядок, що містить значення атрибута id елемента, який Ви хочете отримати.

Наприклад, змінити колір тексту елементу, що має id = "nameArticie".

Назва статті

• 1 пункт
• 2 пункт
• 3 пункт

Метод getElementsByClassName ()

Метод getElementsByClassName (className) повертає всі знайдені елементи в документі (для document) або серед дочірніх вузлів (для node), що мають вказане ім'якласу (class = "className"), у вигляді об'єкта NodeList (колекції вузлів). Іншими словами даний метод повертає об'єкт NodeList, що представляє собою колекцію елементів (вузлів), що мають вказане в параметрі цього методу ім'я класу.

Для отримання кількість знайдених вузлів Ви необхідно використовувати властивість length об'єкта NodeList. А для того щоб перебрати всі вузли в колекції можна скористатися наступним циклом:

Var elementsList = document.getElementsByClassName ( "list"); for (var i = 0; i

document.getElementByClassName (className);
node (вузол) .getElementByClassName (className);

Даний метод має один обов'язковий параметр (className), що представляє собою рядок, що містить назву класу елементів, які Ви хочете отримати. Якщо ви хочете отримати елементи, які мають кілька зазначених класів, то їх необхідно в параметрі даного методу розділити за допомогою пробілу. Наприклад, отримати колекцію вузлів, що мають класи classl і class2:

Document.getElementsByClassName ( "classl class2");

Наприклад, змінити колір фону елементів, що мають клас list:

Назва статті

• 1 пункт
• 2 пункт
• 3 пункт

• 1 пункт
• 2 пункт

Наприклад, отримати колекцію елементів (вузлів), що мають клас list. Далі отримати 2 вузол в цій колекції, тобто вузол має індекс 1. Після цього змінити колір фону отриманого вузла.

// Отримати колекцію елементів, що мають клас list var elementsList = document.getElementsByClassName ( "list"); // Отримати 2 вузол в колекції var secondList = elementsList; // Змінити колір фону елемента secondList.style.backgroundColor = "red";

Метод getElementsByTagName ()

Метод getElementsByTagName (tagname) повертає всі знайдені елементи в документі (для document) або серед дочірніх вузлів (для node), що мають зазначений тег, у вигляді об'єкта NodeList (колекції вузлів). Отримання певного вузла в колекції здійснюється за індексом. Відлік елементів (вузлів) в колекції починається з 0.

document.getElementsByTagName (tagname);
node (вузол) .getElementsByTagName (tagname);

Даний метод має один обов'язковий параметр (tagname), що представляє собою рядок, що містить ім'я тега, яке вказується прописними буквами. Якщо в якості параметра вказати рядок, що містить зірочку ( "*"), то ми отримаємо всі елементи в документі (для об'єкта document) або всі дочірні елементи вузла (для об'єкта node).

Для отримання кількість знайдених вузлів, що містяться в колекції, необхідно використовувати властивість length об'єкта NodeList. А для того щоб перебрати всі вузли в колекції можна скористатися наступним циклом:

Var elementsList = document.getElementsByTagName ( "LI"); for (var i = 0; i

Наприклад, змінити колір фону елементів LI:

Назва статті

• 1 пункт
• 2 пункт
• 3 пункт

Наприклад, отримати колекцію елементів UL. Далі отримати 1 вузол в цій колекції, тобто вузол має індекс 0. Після цього отримати колекцію дочірніх вузлів LI для цього вузла. І на закінчення змінити розмір шрифту кожного елемента в цій колекції.

// Отримати колекцію елементів UL var elementsUL = document.getElementsByTagName ( "UL"); // Отримати 1 вузол в цій колекції var elementUL = elementsUL; // Отримати колекцію Дочірніх елементів LI вузла elementUL var elementsLI = elementUL.getElementsByTagName ( "LI"); // перебрати всі елементи в колекції for (var i = 0; i

Метод getElementsByName ()

Метод getElementsByName (name) повертає всі знайдені елементи в документі, мають зазначене ім'я (значення атрибута name), у вигляді об'єкта NodeList (колекції вузлів).

Елементи (вузли) додаються в колекцію в тому порядку, в якому вони зустрічаються в дереві. Отримання певного вузла в колекції здійснюється за індексом. Відлік елементів (вузлів) в колекції починається з 0.

Var elementsList = document.getElementsByName ( "phone"); for (var i = 0; i

Примітка: У HTML5 атрибут name визнаний застарілим, і він був замінений для більшості елементів атрибутом id.

document.getElementsByName (name)

Даний метод має один обов'язковий параметр (name), що представляє собою рядок, що містить значення атрибута name.

Наприклад, змінити колір фону елементів, що мають атрибут name зі значенням phone (name = "phone"):

Phone: Another phone:

Метод querySelector ()

Метод querySelector () повертає перший знайдений елемент в документі (для document) або серед дочірніх вузлів (для node), який відповідає CSS селектору, вказаною в якості параметра даного методу. Якщо жоден елемент не відповідає CSS селектору, то даний метод повертає null.

document.querySelector (cssSelector)
node.querySelector (cssSelector)

Даний метод має один обов'язковий параметр (cssSelector), що представляє собою рядок, що містить CSS селектор, відповідно до якого вибирається елемент.

Наприклад, змінити колір тексту першого знайденого елемента, відповідного селектору #main p:

Наприклад, отримати колекцію елементів DIV в документі. Далі отримати 1 вузол в цій колекції, тобто вузол має індекс 0. Для цього вузла знайти серед його дочірніх вузлів перший елемент, який відповідають CSS селектору h1 + p. Після цього змінити розмір шрифту цього елемента.

// Отримати колекцію елементів DIV var elementsDIV = document.getElementsByTagName ( "DIV"); // Отримати 1 вузол в цій колекції var elementDIV = elementsDIV; // Отримати вузол p, розташований відразу ж після вузла h1 // Пошук вузла виробляти серед дочірніх вузлів вузла, який зберігається в змінної elementDIV var elementP = elementDIV.querySelector ( "h1 + p"); // змінити розмір шрифту елемента elementP.style.fontSize = "30px";

Метод querySelectorAll ()

Метод querySelectorAll () повертає всі знайдені елементи в документі (для document) або серед дочірніх вузлів (для node), які відповідають CSS селектору, вказаною в якості параметра даного методу, у вигляді об'єкта NodeList (колекції вузлів). Звернення до вузлів в колекції здійснюється за індексом. Відлік елементів (вузлів) в колекції починається з 0.

Для отримання кількість знайдених вузлів необхідно використовувати властивість length об'єкта NodeList. А для того щоб перебрати всі вузли в колекції можна скористатися наступним циклом:

Var elementsList = document.querySelectorAll ( "# main p"); for (var i = 0; i

document.querySelectorAll (cssSelector);
node (вузол) .querySelectorAll (cssSelector);

Даний метод має один обов'язковий параметр (cssSelector), що представляє собою рядок, що містить CSS селектор, відповідно до якого вибираються елементи. Для вказівки кількох селекторів в параметрі цього методу, їх необхідно розділити між собою через кому.

Наприклад, змінити колір тексту елементів, відповідних селектору #main p:

Наприклад, отримати дочірній вузол, який має атрибут id зі значенням sidebar. Змінити колір фону дочірніх елементів p вузла, отриманого на попередньому кроці:

// отримати елемент (вузол), що має id = "sidebar" var sidebar = document.getElementById ( "sidebar"); // отримати колекцію вузлів, відповідних селектору "p" var elementsListP = sidebar.querySelectorAll ( "p"); // перебрати всі елементи в колекції for (var i = 0; i

завдання

Написати код на мові JavaScript використовуючи методи getElementById (), getElementsByClassName (), getElementsByTagName (), querySelector (), querySelectorAll () для наступних завдань:

1. Отримати всі елементи p, розташовані в блоці main;
2. Отримати блок aside, розташований в контейнері div;
3. Отримати блок footer, розташований в контейнері body.

Кожне завдання виконати якомога більшою кількістю різних способів.

JavaScript метод document .querySelector ()повертає перший елемент в документі (об'єкт Element), відповідний вказаною селектору, або групі селектор. Якщо збігів, не знайдено, то повертається значення null.

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

Якщо вам необхідний список всіх елементів, відповідних вказаним селектору або селекторам, то використовуйте для цього метод querySelectorAll ().

метод .querySelector ()також визначено в об'єкті Element, з цієї причини він може бути викликаний на будь-якому елементі, не тільки на об'єкті document. Елемент на якому він викликається буде використаний в якості кореневого елемента для пошуку.

підтримка браузерами

JavaScript синтаксис:

Специфікація

значення параметрів

винятки

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