PassFront
  1. PassFront
  2. База знаний
  3. Основы языка

Как получить доступ к узлу с помощью JS?

Основы языка

Доступ к узлу (элементу) получают методами: `querySelector`/`querySelectorAll` (по CSS-селектору, универсально), `getElementById`, `getElementsByClassName`/`TagName`, а также навигацией по дереву.

Основные методы

querySelector / querySelectorAll (рекомендуется)

По CSS-селектору — самый гибкий способ:

document.querySelector('.card');           // первый совпавший
document.querySelector('#main .item');     // сложный селектор
document.querySelectorAll('li');           // все (NodeList)

getElementById

По id (быстрый):

document.getElementById('app');

getElementsByClassName / getElementsByTagName

По классу/тегу (живые HTMLCollection):

document.getElementsByClassName('item');
document.getElementsByTagName('div');

Поиск внутри элемента

const card = document.querySelector('.card');
card.querySelector('.title'); // искать внутри card

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

element.parentElement;       // родитель
element.children;            // дочерние элементы
element.firstElementChild;
element.nextElementSibling;  // следующий сосед
element.closest('.parent');  // ближайший предок по селектору

NodeList vs HTMLCollection

  • querySelectorAll → NodeList (статичный, есть forEach).
  • getElementsBy... → HTMLCollection (живая, обновляется, нет forEach).

В React

Обычно через refs (useRef), а не getElementById:

const ref = useRef(null);
<div ref={ref} />
ref.current; // доступ к узлу

Коротко для собеседования

Доступ к узлу: querySelector/querySelectorAll (по CSS-селектору — универсально, рекомендуется), getElementById (по id, быстро), getElementsByClassName/TagName (живые коллекции). Поиск внутри — element.querySelector. Навигация — parentElement/children/closest. В React — через useRef, а не getElementById.

Другие вопросы раздела