Обход DOM для удовольствия и прибыли

Во время моего времяпрепровождения, когда я пишу забавные слова в IDE, чтобы заставить компьютер делать то, что я хочу, я немного занимался парсингом веб-страниц для заработка денег.

Я все время забывал, как нацеливаться на определенные части страницы, которые я хотел спарсить и организовать в своей программе.

Поэтому ниже я собираю несколько заметок, чтобы поделиться ими со своим будущим "я" и с вами :)

Давайте начнем с небольшого шаблонного HTML, с которым мы можем работать.

На странице должно быть только одно уникальное имя ID. Поэтому мы используем getElement (в единственном числе).

const grandparent = document.getElementById("grandparent-id")

Вызов get elements (во множественном числе) возвращает HTMLCollection элементов из DOM (оба родителя в приведенном выше HTML). Однако, при попытке использовать методы массива для этой коллекции, вы получите ошибку.

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

const parent = Array.from(document.getElementsByClassName("parent"))

Это дает нам один элемент (первый, который появляется в дереве DOM), нацеливая DOM с помощью CSS-селекторов.

Аналогично getElement по ID, это возвращает все элементы, которые соответствуют нашему запросу. Однако, это возвращает NodeList, который позволяет нам использовать методы массива.

Сначала мы хотим нацелиться на верхний родительский узел. Оттуда мы можем получить всех детей под ним.

Несмотря на то, что мы используем QuerySelector, который обычно дает нам NodeList, при вызове детей мы получаем обратно HTMLCollection!! Неприятно.

Поэтому нам нужно создать массив из возвращенных детей.

Мы также можем проникнуть в детей родителя

const children = parentOne.children

Мы можем использовать QuerySelector на NodeList, который мы уже захватили, чтобы перейти прямо к уровню детей и пропустить родителей.

const childFour = document.querySelector("#child-four") const parent = childFour.parent

Это работает очень похоже на QuerySelector, но вместо того, чтобы идти вниз по DOM, он перемещается вверх.

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

const childFour = document.querySelector("#child-four") const grandparent = childFour.closest(".grandparent")

const grandparent = document.querySelector(".grandparent") const childOne = grandparent.querySelector(".child")

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

Оригинально опубликовано на https://calvin.hashnode.dev.