Получение предков элемента

Введение

В этом практическом занятии мы изучим, как использовать JavaScript для получения всех предков элемента от корня документа до данного элемента. Для этого потребуется использовать Node.parentNode и цикл while для перемещения по дереву предков, а также Array.prototype.unshift(), чтобы добавить каждого нового предка в начало массива. В конце практического занятия вы должны хорошо понять, как получать предков элемента с использованием JavaScript.

Skills Graph

Получение предков элемента

Для получения предков элемента от корня документа до указанного элемента следуйте шагам:

1. Откройте Терминал/SSH и введите node, чтобы начать практиковаться в написании кода.
2. Используйте Node.parentNode и цикл while, чтобы перемещаться по дереву предков элемента.
3. Используйте Array.prototype.unshift(), чтобы добавить каждого нового предка в начало массива.

Вот пример кода, который реализует вышеперечисленные шаги:

const getAncestors = (el) => {
  let ancestors = [];
  while (el) {
    ancestors.unshift(el);
    el = el.parentNode;
  }
  return ancestors;
};

Для получения предков определенного элемента используйте метод querySelector() для выбора элемента и передайте его в качестве аргумента функции getAncestors(). Например:

getAncestors(document.querySelector("nav"));
// [document, html, body, header, nav]

Это вернет массив всех предков указанного элемента в порядке от корня документа до самого элемента.

Резюме

Поздравляем! Вы завершили практическое занятие "Получение предков элемента". Вы можете выполнить больше практических занятий в LabEx, чтобы улучшить свои навыки.