Далее на странице...
Продолжается тема "Навигация по веб-странице". В прошлой статье были рассмотрены основные методы для получения доступа к узлам DOM-дерева.
Здесь будут рассмотрены аналогичные методы - которые позволяют получить доступ именно к элементам страницы. О DOM-элементах и DOM-узлах читайте здесь.
Для работы будет использоваться тестовая html-страница - та, с которой проводилась работа в прошлой статье. Что удобно, так как мы наглядно увидим различия в работе методов для получения доступа к узлам и к элементам веб-страницы.
HTML-код
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<div class="first">
<button></button>
<button id="current"></button>
<button></button>
</div>
<div class="second">
<ul>
<li>1</li>
<li>2</li>
<li data-current="3">3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<div class="third"></div>
</div>
<!-- renernh -->
<script src="script.js"></script>
</body>
</html>
Результат в Браузере
Свойства nextElementSibling и previousElementSibling
Свойства nextElementSibling и previousElementSibling - это аналоги методов nextSibling и previousSibling, которые позволяют получить доступ к следующему и предыдущему элементу находящемуся в этом же родителе.
Если такого элемента нет - возвращается null.
JavaScript-код
'use strict';
console.log(document.querySelector('[data-current="3"]').nextElementSibling);
console.log(document.querySelector('[data-current="3"]').previousElementSibling);
Результат в консоли
<li>4</li>
<li>2</li>
Результат в Браузере
В аналогичном примере №5 из прошлой заметки мы получили узлы. Сейчас мы получили элементы страницы.
Метод parentElement
Аналогом метода parentNode из примера Пример №4.1 прошлой статьи является метод parentElement, который возвращает родительский элемент.
JavaScript-код
'use strict';
console.log(document.querySelector('#current').parentElement);
Результат в Браузере
Хотя здесь мы видим тот же результат, что и в примере №4.1 прошлой статьи. Но при этом мы точно знаем, что получили именно элемент страницы.
Методы firstElementChild и lastElementChild
У методов firstChild и lastChild так же есть аналоги - это методы firstElementChild и lastElementChild.
Вернемся к примеру №3 из прошлой статьи.
JavaScript-код
'use strict';
console.log(document.body.firstElementChild);
console.log(document.body.lastElementChild);
Результат в Браузере
Результат в консоли
<div class="wrapper">...</div>
<script src="script.js"></script>
В консоли мы видим первый и последний дочерние элементы страницы. В то время, как в примере №3 из прошлой статьи (при использовании метода firstChild) мы увидели первый текстовый узел (перенос строки).
Метод childNodes - Нет аналогов?
Мы увидели, что у всех методов, рассмотренных в прошлой статье есть аналоги - кроме метода childNodes. Но иногда, для метода childNodes аналог создается вручную. Как это сделать?
Учитывая, что метод childNodes возвращает псевдомассив и, используя метод перебора for of, мы получаем возможность перебрать все дочерние элементы и избавиться от текстовых узлов - здесь нам помогут операторы break и continue, которые позволяют прервать цикл.
Пример №1 - Метод перебора for of
JavaScript-код
'use strict';
for(let node of document.body.childNodes){
console.log(node);
}
Результат в Браузере
Результат в консоли
#text
div.wrapper
#text
#comment
#text
script
В этом примере, используя метод перебора for of, мы перебрали массив, который вернул метод childNodes - см. Пример №2 из прошлой статьи.
Теперь следует избавиться от текстовых узлов. Как это сделать?
Если взглянуть на свойства любого из узлов, и обратить внимание на свойство nodeName (имя узла), то мы увидим, что для текстовых узлов это свойство имеет значение "#text".
#text
assignedSlot: null
.
.
.
nodeName: "#text"
nodeType: 3
.
.
.
Свойством nodeName следует воспользоваться, чтобы исключить текстовые узлы.
Пример №2 - Избавляемся от текстовых узлов
JavaScript-код
for(let node of document.body.childNodes){
if(node.nodeName == '#text'){
continue;
}
console.log(node);
}
Результат в Браузере
Результат в консоли
div.wrapper
#comment
script
В примере было составлено условие, при котором вывод текстовых узлов исключается. То есть благодаря оператору continue цикл прерывается, если свойство nodeName текущего узла имеет значение "#text".
Итак, здесь были рассмотрены методы JS, которые позволяют получить доступ к элементам страницы.
