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