Как получить доступ к узлу с помощью 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.