Пошук елементів в DOM

Для пошуку елементів в DOM (Document Object Model, дерево наших HTML-тегів) об'єкт document має декілька методів. Розглянемо їх по черзі:


				var p = document.getElementById('price');

				var p = document.getElementsByTagName('p');

				var p = document.getElementsByClassName('title');

				var l = document.getElementsByName('login');

Кожен з цих методів, окрім першої, повертає набір тегів (можливий варіант набір з 0 або 1 елемента) - HTMLCollection.

Перший метод завжди знаходить лише один елемент, навіть якщо в коді навмисно прописати однакові id декільком елементам.

Зверніть увагу на літеру s перед словом By.

Ще два нових метода, querySelector знаходить один елемент, перший підходящий, а querySelectorAll - всі підходящі, повертає набір елементів NodeList.


				var p = document.querySelector('p');

				var p = document.querySelectorAll('p');

Порівняйте прототипи HTMLCollection та NodeList:


				var a = document.querySelectorAll('h1');

				var b = document.getElementsByTagName('h1');

				console.dir(a);

				console.dir(b);

Методи по запиту селектора зручні тим, що туди можна вписувати селектор, як в CSS-коді:


				var q = 'form.login ul > li > label span + input[name^="phone"]';

				var inp = document.querySelectorAll(q);

Якщо зі знайденими елементами треба зробити лише одну дію - у змінну їх записувати не треба.

До елементів в наборі можна звертатися по їх індексу, використовуючи квадратні дужки.


				var year = document.getElementsByName('birthday')[0].value;

				document.getElementById('price').innerText = '333 грн.';

				document.querySelector('h1').style.color = 'red';

				document.querySelectorAll('button')[1].onclick = function(){ ... }

Та якщо потрібно звернутися до елемента декілька разів, то варто цей елемент зберігти у змінну, так як при кожному зверненні цей елемент наново шукається по всьому DOM.

Зверніть увагу: ви не можете звернутися до всього набору одночасно. Наступний код невірний:


				document.getElementsByTagName('p').style.color = 'green';

				document.getElementsByClassName('button').onclick = function(){ ... };

				document.querySelectorAll('.hey').innerText = 'Hey!';

Потрібно перебрати елементи циклом чи методом forEach і працювати з кожним окремо.

Пошук елементів в елементах

У кожного тега є всі вищепредставлені методи пошуку. Таким чином ви можете шукати в елементі його дочірні елементи:


				var sections = document.body.getElementsByTagName('section');

				var ul = sections[2].getElementById('menu');

				var li = ul.querySelectorAll('li');

				var active = ul.getElementsByClassName('active')[0];

Домашнє завдання (в т.ч. на декілька наступних занять).

Скачайте файл js_dom_homework.html і виконуйте завдання у ньому (скрипти прописуйте внизу файла).
Виведіть User Agent вашого браузера у span#useragent (дивіться властивість window.navigator).
В кожній формі є скрите поле. В його value потрібно добавити form1, form2... Використайте об'єкт document.forms.
Кожна таблиця має заголовок. В заголовки добавте нумерацію: Таблиця 1. ... В даному випадку краще працювати з текстовою нодою.
У деяких посилань немає протоколу. Добавте протокол http до посилань там, де це необхідно. Також всі посилання повинні відкриватися в новому вікні.
Усі зображення повинні мати максимальну ширину 140 пікселів.
Для елементів з класом bordered добавте червону рамку.
Виділіть слово "Шкарпетки" червоним жирним шрифтом і жовтим фоном.
Добавте скриптом ховер-ефект для меню першого рівня - рожевий фон, для меню другого рівня - блакитний фон.
Добавте в таблицю про транспортні гілки Хмельниччини в заголовок те, що ця таблиця стосується 2100 року, а в тіло таблиці пропишіть рандомні числа від 0 до 10.
Змініть рік на 2080 та цифри так, щоб 0 в 10 разів зустрічався частіше, ніж 9, в 9 разів частіше ніж 8, в 8 разів частіше, ніж 7 і так далі.
В таблиці множення зробіть ховер-ефект: коли рухаєте мишкою по комірках <td> - повинні підсвітитися рожевим кольором відповідні <th>.
Створіть нове зображення будь-якої тематики, добавте його в кінець div#box
Перенесіть меню на початок сторінки.
Скопіюйте меню в кінець сторінки.
Створіть новий стиль, який до всіх зображень додасть фіолетову рамку товщиною 5 пікселів.
У всіх чекбоксів приберіть галочки.
Пронумеруйте всі абзаци атрибутом data-id.
До кожного другого абзаца добавте клас hey.
У абзаців, в яких є клас bordered - заберіть цей клас, а в яких немає - добавте.