Навигация по DOM – элементам


DOM позволяет делать что угодно с элементами и их содержимым, но сначала нужно получить соответствующий DOM – объект.

Все операции с DOM начинаются с объекта document. Получив DOM – узел, можно перейти к его ближайшим соседям используя навигационные ссылки. Есть два основных набора ссылок:

Для всех узлов: parentNode (узел - родитель), childNodes (узел дочерний), firstChild, lastChild (первый и последний дочериной узел), previousSibling, nexSibling (узлы соседи).

Только для узлов – элементов: parentElements (родитель), children (коллекция детей), firstElementChild (первый дочерний элемент), lastElementChild (последний дочерний элемент), previoutsElementSibling, nextElementSibling(элементы – соседи).

Для того, чтобы получить доступ к произвольному элементу страницы используются следующие методы:

Если у элемента есть атрибут id, то можно получить его вызовом document.getElementById(id), где бы он ни находился. Например:

<div id="elem">

<div id="elem-content">Element</div>

</div>

<script>

// получить элемент

let elem = document.getElementById('elem');

// сделать его фон красным

elem.style.background = 'red';

</script>

Другие, альтернативные методы получения произвольного элемента сведены в таблицу:

Метод Ищет по…
querySelectior CSS - selector
querySelectiorAll CSS - selector
getElementById id
getElementsByName name
getElementsByTagName tag or ‘*’
getElementsByClassName class

 

Пример применения метода querySelectorAll:

Создаем запрос на получение всех элементов <li>, которые являются последними потомками в <ul>:

<ul>

<li>Этот</li>

<li>тест</li>

</ul>

<ul>

<li>полностью</li>

<li>пройден</li>

</ul>

<script>

let elements = document.querySelectorAll('ul > li:last-child');

 

for (let elem of elements) {

alert(elem.innerHTML); // "тест", "пройден"

}

</script>

 

Метод querySelectorвозвращает первый элемент, соответствующий данному CSS – селектору.



Дата добавления: 2021-01-26; просмотров: 519;


Поиск по сайту:

Воспользовавшись поиском можно найти нужную информацию на сайте.

Поделитесь с друзьями:

Считаете данную информацию полезной, тогда расскажите друзьям в соц. сетях.
Poznayka.org - Познайка.Орг - 2016-2024 год. Материал предоставляется для ознакомительных и учебных целей.
Генерация страницы за: 0.007 сек.