Навигация по DOM

querySelector находит первый элемент по CSS-селектору. querySelectorAll — все подходящие. getElementById — по id. После нахождения элемента можно перемещаться: parentElement, children, nextElementSibling, previousElementSibling.

Три основных способа найти элемент:

• document.querySelector(selector) — ПЕРВЫЙ элемент:

document.querySelector('p') — первый <p> document.querySelector('.card') — первый элемент с классом card document.querySelector('#app') — элемент с id app

• document.querySelectorAll(selector) — ВСЕ элементы:

document.querySelectorAll('p') — NodeList всех <p> Возвращает NodeList (не массив!)

• document.getElementById(id) — по id:

document.getElementById('app') — быстрее querySelector

Навигация по дереву:

Вверх: element.parentElement — родитель (только Element) element.parentNode — родитель (любой узел)

Вниз: element.children — прямые потомки (только Element) element.firstElementChild — первый потомок element.lastElementChild — последний потомок

По горизонтали: element.nextElementSibling — следующий сосед element.previousElementSibling — предыдущий сосед

Важно:

• querySelector возвращает null, если не найден
• querySelectorAll возвращает NodeList (не массив!)
• getElementById возвращает null, если не найден
• children — только Element, childNodes — все узлы

Навигация по DOM — как навигация по карте. querySelector — это «найти адрес по названию». parentElement — «пойти к родителю». children — «посмотреть, кто живёт в доме».

**Самый простой:**

// Найти элемент:
const title = document.querySelector('h1');
console.log(title.textContent); // Текст заголовка

// Найти по id:
const app = document.getElementById('app');
console.log(app);

querySelector и getElementById — основные способы найти элемент.

**Простой:**

// Найти все элементы:
const paragraphs = document.querySelectorAll('p');
console.log(paragraphs.length); // Количество <p>

// Перебрать:
paragraphs.forEach(p => console.log(p.textContent));

// Навигация:
const first = paragraphs[0];
console.log(first.parentElement); // Родитель (div)
console.log(first.nextElementSibling); // Следующий <p>

querySelectorAll + forEach — удобный способ работать с коллекцией элементов.

**Реальный пример:**

// Реальный пример: найти элемент и получить его контекст
const activeItem = document.querySelector('.menu-item.active');

if (activeItem) {
  const menu = activeItem.parentElement;
  const items = menu.children;
  const index = Array.from(items).indexOf(activeItem);

  console.log(`Активный пункт ${index + 1} из ${items.length}`);
  console.log(`Родитель: ${menu.className}`);
}

Комбинация навигации: нашли элемент → нашли родителя → посчитали siblings.

**Неправильно:** Думать, что querySelectorAll возвращает массив

**Почему:** NodeList — не массив. Нет map, filter, reduce (хотя есть forEach).

**Правильно:** Для методов массивов: Array.from(nodeList) или [...nodeList].

**Неправильно:** Забывать, что querySelector возвращает null

**Почему:** querySelector возвращает null, если элемент не найден. Обращение к свойству null вызовет ошибку.

**Правильно:** Всегда проверяйте: if (title) { title.textContent = 'Новый'; }

**Неправильно:** Путать parentElement и parentNode

**Почему:** parentElement — только Element. parentNode — любой узел (включая Text, Comment).

**Правильно:** Используйте parentElement — он возвращает только Element.

**Неправильно:** Путать children и childNodes

**Почему:** children — только Element. childNodes — все узлы (включая текстовые).

**Правильно:** Для элементов используйте children.

• querySelector(selector) — первый элемент по CSS-селектору
• querySelectorAll(selector) — все элементы (NodeList)
• getElementById(id) — по id (быстрее)
• parentElement — родитель
• children — прямые потомки (только Element)
• nextElementSibling / previousElementSibling — соседи

Назад: Вы понимаете структуру DOM-дерева (D2) — теперь вы умеете по нему перемещаться.

Вперёд: Следующий урок (D4) — чтение и запись содержимого элемента: textContent, innerHTML и их различия.