Выбор первого и последнего элемента с querySelector JS

Быстрый ответ

Первый элемент можно выбрать с помощью: document.querySelector('.your-class'). Чтобы найти последний элемент, используйте :last-of-type: document.querySelector('.your-class:last-of-type'). DOM просматривает каждый узел сверху вниз, отмечая первый или последний элемент, который соответствует заданному селектору.

В двух словах о методах:

• Первый элемент: document.querySelector('.item')
• Последний элемент: document.querySelector('.item:last-of-type')

Теперь давайте ближе познакомимся с возможностями работы с DOM, методом querySelectorAll и методами массивов.

Применение querySelectorAll для выбора элементов

Метод querySelectorAll позволяет получить все элементы, соответствующие указанному селектору, в виде NodeList. Но не стоит путать: NodeList не является массивом. Он может быть преобразован в массив с помощью функции Array.from() или spread оператора. Первый элемент можно выбрать, обратившись к нему по индексу [0]. Чтобы получить последний элемент, JavaScript предоставляет функцию .at(-1) или методы Array:

// Выбираем все элементы
const elements = document.querySelectorAll('.your-class');

// С первым всё просто
const firstElement = elements[0]; // "Моя прелесть" – великие слова Голлума

// Для выбора последнего есть несколько методов
const lastElement = Array.from(elements).pop(); // "Я вернусь" – слова Терминатора
// Или более современный метод, поддерживаемый современными браузерами
const lastElement = elements.at(-1); // "Взгляни на меня, детка" – знаменитое прощание фильма Касабланка

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

Прямой доступ к первому или последнему дочернему элементу можно получить с помощью node.firstElementChild и node.lastElementChild, что очень удобно, когда нет необходимости работать с NodeList и массивами:

const firstChild = parent.firstElementChild; // Родитель: "Ты особенный."
const lastChild = parent.lastElementChild; // Родитель: "А ты не хуже."

Эти свойства широко используются для вертикального обхода DOM.

Использование циклов при работе с наборами элементов

Когда необходимо обработать набор элементов, циклы становятся незаменимым инструментом:

const parentDiv = document.querySelector('.parent-div');

[...parentDiv.querySelectorAll('.child-class')].forEach((child, index, array) => {
  if (index === 0) // "Великое путешествие начинается с первого шага." – Лао-цзы
  if (index === array.length – 1) // "Я есть Железный Человек." – изречение Тони Старка
  // Для всех остальных есть свои действия и цитаты
});

Использование деструктуризации в JavaScript

const [first, ...rest, last] = Array.from(document.querySelectorAll('.your-class')); // "К бесконечности... и дальше!" – великие слова Базза Лайтгод

Деструктуризация из ES6+ обеспечивает эффективную и удобную работу с элементами.

Визуализация

В DOM, как и в путешествии, всегда есть начало и конец:

🏛️: [Экспонат 1, Экспонат 2, Экспонат 3, ... , Экспонат N]

Используя querySelector, мы устанавливаем стартовую точку:

👀🏛️: Экспонат 1
# querySelector выбирает ПЕРВЫЙ экспонат в нашей виртуальной экскурсии по DOM

Через querySelectorAll с :last-child, мы прощаемся с ПОСЛЕДНИМ экспонатом:

👋🏛️: Экспонат N
# Прощание с ПОСЛЕДНИМ экспонатом в зале

DOM ведет нас от начала до конца, сквозь свой уникальный лабиринт:

🚶‍♂️➡️🖼️➡️🗿➡️...➡️🎨
# Мы идем от начала (первый экспонат) до конечной точки (последний экспонат)

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

Обход DOM: путешествие от начала до конца

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

Важность учета совместимости с браузерами

Методы хорошо работают в современных браузерах и широко они поддерживается, но не забывайте о поддержке старых версий. Некоторые из них, например метод .forEach() для NodeList, могут требовать полифиллов для обеспечения комплексной совместимости.

Селекторы: важные примечания

Хотя использование псевдоклассов типа :first и :last может казаться привлекательным, их поддержка не универсальна, поэтому мы рекомендуем избегать их использования с querySelector или querySelectorAll. Наиболее надежными и проверенными являются такие селекторы, как :first-child, :last-child и :last-of-type.

Полезные материалы

1. Метод querySelector() документа – Веб API | MDN
2. Справочник по CSS-селекторам
3. :first-child на CSS-Tricks
4. Selectors API Level 1
5. Узел – Веб API | MDN
6. Поиск: getElement, querySelector
7. Учебник | DigitalOcean