Навигация по DOM - элементам,data-атрибуты, преимущество for/of

↑

▷ Содержание

⇐ ПредыдущаяСтр 9 из 15Следующая ⇒

Задача: взять определённый элемент обратиться к его родителю и поменять у него класс

console.log(document.body); обратился к элементу console.log(document.head); при помощи такого подхода можно чего-то добавить console.log(document.documentElement); - вызывает тег html

Родительский элемент – тот элемент, которые объединяет внутри себя другие элементы. Его тоже можно получить

console.log(document.body.childNodes); получим p[] NodeList

Text node  перенос строки, кроме первых 6 элементов, все динамические, которые поставл LiveServer

Каждая сущность, которая находиться на странице будет по факту узлом, но не каждый узел будет элементом

В тегах – элементы, всё что не видно – узел  <li>1</li>,

<li> </li> - DOMElement

1       - DOMNode

console.log(document.body.firstChild);   console.log(document.body.lastChild);

До этого отталкивались от родителя, теперь будем от любого элемента. Команда которая поможет получить родителей соседей и детей

Если элемент используем один раз, его не нужно помещать в переменную

Хочу получить родителя для элемента кнопки с id current

console.log(document.querySelector('#current').parentNode);

 получил

console.log(document.querySelector('#current').parentNode.parentNode);

поднимаюсь выше ещё на уровень и т.д

 <div class="second">

<ul>

<li>1</li>

<li>2</li>

<li data-current="3">3</li>

B AAD//wMAUEsBAi0AFAAGAAgAAAAhALaDOJL+AAAA4QEAABMAAAAAAAAAAAAAAAAAAAAAAFtDb250 ZW50X1R5cGVzXS54bWxQSwECLQAUAAYACAAAACEAOP0h/9YAAACUAQAACwAAAAAAAAAAAAAAAAAv AQAAX3JlbHMvLnJlbHNQSwECLQAUAAYACAAAACEA52cgMjECAABjBAAADgAAAAAAAAAAAAAAAAAu AgAAZHJzL2Uyb0RvYy54bWxQSwECLQAUAAYACAAAACEAI+cwEt8AAAAHAQAADwAAAAAAAAAAAAAA AACLBAAAZHJzL2Rvd25yZXYueG1sUEsFBgAAAAAEAAQA8wAAAJcFAAAAAA== " adj="-8690" strokecolor="#c0504d [3205]" strokeweight="3pt">

<li>4</li>

<li>5</li>

</ul>

</div>   

data-current="3"

console.log(document.querySelector('[data-current="3"]').nextSibling);  т.к идёт перенос строки

console.log(document.querySelector('[data-current="3"]').previousSibling);    

Таблица команд для узлов

Таблица команд для элементов

Создам перебор элементов вручную. Перебрать все ChildNodes и избавиться от #text

for (let node of document.body.childNodes) {

if (node.nodeName == '#text') {

continue;

}

console.log(node);

}

For of перебрал всех детей и исключил текстовые ноды.Коммент остался, т.к не включон в условие

КОМАДНЫ

 - выводит строку в качестве объекта

Познавательные статьи:



Где возникла философия и почему?

Относительная высота сжатой зоны бетона

Сущность проекции Гаусса-Крюгера и использование ее в геодезии

Тарифы на перевозку пассажиров