Ресурсы: Про data-атрибуты
Представим, что есть задача: взять определённый элемент и обратиться к его родителю, или к следующему элементу и у них поменять класс.
Для теста используем такую структуру:
Код
<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>
<script src="script.js"></script>
Так можно получить главные элементы DOM-дерева:
Код
console.log(document.body);
console.log(document.head);
console.log(document.documentElement); // html
console.log(document.body.childNodes); // получить дочерние узлы для body
Результатом последней команды будет псевдомассив
Цитата
NodeList(4) [text, div.wrapper, text, script]
Первая
текстовая нода (
text) расположена между родительской оболочкой (
body) и элементом
wrapper, это обычный перенос строки и он считается текстовой нодой.
Дальше в псевдомассиве идёт элемент
wrapper, после этого опять текстовая нода переноса строки и дальше
script Каждая сущность на странице по факту является узлом,но не каждый узел будет элементом. Всё, что заключено в теги - это элементы.
Код
console.log(document.body.firstChild); // получить первого ребенка для родителя
console.log(document.body.lastChild); // получить последнего ребенка для родителя
Рассмотрим как получить родителя, соседей и детей:
Код
console.log(document.querySelector('#current').parentNode);
В консоли получаем родительский элемент с классом
first Цитата
<div class="first">...</div>
Если же продублировать команду дважды:
Код
console.log(document.querySelector('#current').parentNode.parentNode);
то получим уже элемент с классом
wrapper Data-атрибуты
Название атрибута всегда начинаем с ключевого слова
data, затем идёт произвольное название и значение, как булиновое, так и физическое.
Код
data-current = '3'
data-modal
data-close
Как их получать в коде:
Код
console.log(document.querySelector('[data-current="3"]'));
Получить следующий за ним элемент:
Код
console.log(document.querySelector('[data-current="3"]').nextSibling);
В консоли мы получим текстовую ноду переноса строки.
А так можно получить элемент, который стоит перед ним:
Код
console.log(document.querySelector('[data-current="3"]').previousSibling);
И это тоже будет текстовая нода переноса строки.
А как же получать именно элементы, минуя ноды? Код
console.log(document.querySelector('#current').parentElement);
console.log(document.body.firstElementChild);
console.log(document.body.lastElementChild);
console.log(document.querySelector('[data-current="3"]').nextElementSibling);
console.log(document.querySelector('[data-current="3"]').previousElementSibling);
Аналогичного метода для
childNodes нет, но можно использовать метод перебора
for/of, за счёт которого мы переберём все сущности в
body и избавимся от текстовых нод
Код
for (let node of document.body.childNodes) {
if (node.nodeName == '#text') {
continue; // пропускаем текстовую ноду
}
console.log(node);
}
Добавлять комментарии могут только зарегистрированные пользователи.
