Главная » Навигация по элементам DOM-дерева. Data-атрибуты и их использование при выборке.

Навигация по элементам DOM-дерева. Data-атрибуты и их использование при выборке.


07.04.2021, 09:23
Получение главных элементов DOM-дерева

Код

console.log(document.body);
console.log(document.head); // => можно динамически добавить стили или что-то еще

Получаем главный элемент страницы, тег html:

Код

console.log(document.documentElement);

Получение узлов родительского элемента с помощью свойства childNodes:

Код

console.log(document.body.childNodes);

Допустим, в body такая html-структура:

Код

  <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="js/script.js"></script>

И вот что мы получим в консоли:


Мы получили псевдомассив, содержащий все узлы, включая текстовые ноды(узлы) переноса строк

Каждый элемент является узлом, но не каждый узел является элементом

Получаем первого "ребенка" внутри родителя (в нашем случае это body):

Код

console.log(document.body.firstChild); // => #text получили текстовую ноду

Получаем последнего "ребенка" внутри родителя (в нашем случае это body):

Код

console.log(document.body.lastChild); /* => <script src="js/script.js"></script> */

Получаем родительский элемент для выбранного элемента с id = "current":

Код

console.log(document.querySelector('#current').parentNode); /* => <div class="first">...</div> */

а так можно получить элемент с классом wrapper:

Код

console.log(document.querySelector('#current').parentNode.parentNode); /* => <div class="wrapper">...</div> */

Data-атрибуты

Синтаксис data-атрибута:

Код

data-название = "значение"
/* Примеры */
data-current
data-modal
data-close

Допустим, в вёрстке есть элемент с data-атрибутом

Код

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

Получаем его:

Код

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

Получаем следующий за ним элемент при помощи свойства nextSibling:

Код

console.log(document.querySelector('[data-current = "3"]').nextSibling); // => #text получили текстовую ноду переноса строки

Получаем стоящий перед ним элемент при помощи свойства previousSibling:

Код

console.log(document.querySelector('[data-current = "3"]').previousSibling); // => #text получили также текстовую ноду переноса строки

Мы рассмотрели свойства, которые ориентируются на ноды (узлы). Рассмотрим аналоги, работающие только с элементами.

Код

console.log(document.querySelector('[data-current = "3"]').nextElementSibling); /* => <li>4</li> */

Код

console.log(document.querySelector('[data-current = "3"]').previousElementSibling); /* => <li>2</li> */

Код

console.log(document.querySelector('[data-current = "3"]').parentElement); // аналог parentNode

Код

console.log(document.body.firstElementChild); /* => <div class="wrapper">...</div> */

Код

console.log(document.body.lastElementChild); /* => <script src="js/script.js"></script> */

Код

console.log(document.body.children); // аналог childNodes

Перебор псевдомассива с целью избавления от текстовых нод

Пусть у нас есть выборка, полученная с помощью свойства childNodes

Код

console.log(document.body.childNodes);

Избавиться от текстовых нод можно, используя перебор выборки циклом for/of:

Код

for (let node of document.body.childNodes) {
  if (node.nodeName == "#text") {
  continue;
  }

  console.log(node);
}

Свойство nodeName мы подсмотрели в консоли разработчика:


Смотрим доступные свойства для текстовой ноды

Полезные ссылки:
Про data-атрибуты

КОММЕНТАРИИ (0)

РЕЙТИНГ МАТЕРИАЛА (0.0 / 0)