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

 

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

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);    

               

 

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

console.log(document.body.childNodes);	Получить все узлы body
console.log(document.body.firstChild);	Первый ребёнок
console.log(document.body.lastChild);	Последний ребёнок
(document.querySelector('#current').parentNode);	Give parent #current
(document.querySelector('[data-current="3"]').nextSibling);	Следующий сосед
(document.querySelector('[data-current="3"]').previousSibling);	Предидущий сосед

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

childNodes – for element not. Do it with for of	Нет свойства для ел-ов
.firstElementChild	Первый элемент
.lastElementChild	Последний элемент
.parentElement	Give parent #current
.nextElementSibling	Следующий сосед
.previousElementSibling	Предидущий сосед

 

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

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

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

continue;

}

console.log(node);

}

 

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

 

КОМАДНЫ

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