Навігація по DOM

Ноди та елементи

HTML-код складається з вузлів двох типів: ноди і елементи.

Поексперементуємо на такому шматку кода:


				<h1>Hello</h1>

				<h2>

				  Заголовок

				  <span style="color: red;">з червоним</span>

				  текстом

				</h2>

				<div>

				  <p>Посилання на <a href="http://google.com">google</a>.</p>

				  <p><span>1</span> <span>2</span> <span>3</span></p>

				  <p>

				    <span>1</span>

				    <span>2</span>

				    <span>3</span>

				  </p>

				</div>

Виведіть в консоль дерево нод та дослідіть його:


				console.dir(document.body.childNodes);

Спробуйте змінити nodeValue різних елементів.

Виведіть в консоль дерево елементів та дослідіть його:


				console.dir(document.body.children);

Навігація по DOM

Навигация по DOM-элементам.

Окрім методів .getElement* та .querySelector* пошук елементів можна здійснювати наступним чином:

.parentNode - батьківська нода.

.childNodes - дочірні ноди.

.firstChild - перша дочірня нода.

.lastChild - остання дочірня нода.

.previousSibling - попередня нода-сусід.

.nextSibling - наступна нода-сусід.

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

Для навігації по елементам (тегам) існують такі властивості:

.parentElement - батьківський елемент.

.children - дочірні елементи.

.firstElementChild - перший дочірній елемент.

.lastElementChild - останній дочірній елемент.

.previousElementSibling - попередій сусідній елемент.

.nextElementSibling - наступний сусідній елемент.

Додаткові матеріали

Елегантний спосіб перебрати всі дочірні елементи першого порядку:


				for ( let elem = parent.firstChild; elem; elem = elem.nextSibling ) {
				  ...
				}