{ "type": "doc", "content": [ { "type": "heading", "attrs": { "level": 2 }, "content": [{ "type": "text", "text": "Короткий ответ" }] }, { "type": "paragraph", "content": [ { "type": "text", "text": "В контексте HTML/DOM родитель — это узел, внутри которого находится другой узел; потомок — это узел, находящийся внутри другого (не обязательно непосредственный). Непосредственный потомок называется «ребёнок». Связь образует древовидную структуру: корень → родители → дети → потомки." } ] }, { "type": "heading", "attrs": { "level": 2 }, "content": [{ "type": "text", "text": "Подробный разбор" }] }, { "type": "heading", "attrs": { "level": 3 }, "content": [{ "type": "text", "text": "Базовые определения" }] }, { "type": "bulletList", "content": [ { "type": "listItem", "content": [ { "type": "paragraph", "content": [{ "type": "text", "text": "Родитель (parent): узел, который непосредственно содержит другой узел." }] } ] }, { "type": "listItem", "content": [ { "type": "paragraph", "content": [{ "type": "text", "text": "Ребёнок (child): узел, который находится непосредственно внутри родителя." }] } ] }, { "type": "listItem", "content": [ { "type": "paragraph", "content": [{ "type": "text", "text": "Потомок (descendant): любой узел внутри другого узла на любом уровне вложенности (дети, внуки, правнуки и т.д.)." }] } ] }, { "type": "listItem", "content": [ { "type": "paragraph", "content": [{ "type": "text", "text": "Соседи/сиблинги (siblings): узлы, имеющие одного и того же родителя и находящиеся на одном уровне." }] } ] }, { "type": "listItem", "content": [ { "type": "paragraph", "content": [{ "type": "text", "text": "Корневой узел (root): верхний узел дерева (в DOM — document; в дереве элементов — html)." }] } ] } ] }, { "type": "heading", "attrs": { "level": 3 }, "content": [{ "type": "text", "text": "Пример в HTML/DOM" }] }, { "type": "codeBlock", "content": [ { "type": "text", "text": "

Заголовок

Текст абзаца

\n \n

" } ] }, { "type": "paragraph", "content": [ { "type": "text", "text": "div#parent — родитель для section и footer. Узлы section и footer — его дети. strong — потомок p (и section, и div), но не его ребёнок; ребёнок p — это strong и текстовые узлы внутри p." } ] }, { "type": "heading", "attrs": { "level": 3 }, "content": [{ "type": "text", "text": "CSS: выборка по родителям и потомкам" }] }, { "type": "codeBlock", "content": [ { "type": "text", "text": "/* Непосредственные дети */\ndiv > p { margin: 0; }\n\n/* Любые потомки */\nul li { list-style: none; }\n\n/* Практика */\n.card > .title { font-weight: 600; }\n.menu .item { padding: 8px; }" } ] }, { "type": "paragraph", "content": [ { "type": "text", "text": "Комбинатор '>' выбирает только детей. Пробел выбирает любых потомков на любом уровне." } ] }, { "type": "heading", "attrs": { "level": 3 }, "content": [{ "type": "text", "text": "JavaScript: навигация по родителям и потомкам" }] }, { "type": "codeBlock", "content": [ { "type": "text", "text": "const section = document.querySelector('section');\n\n// Родители\nsection.parentElement; // ближайший родитель-элемент\nsection.parentNode; // может быть документом, документ-фрагментом и т.д.\n\n// Дети и потомки\nsection.children; // HTMLCollection только элементов-детей\nsection.childNodes; // NodeList всех узлов-детей (включая текстовые)\nsection.firstElementChild; // первый ребёнок-элемент\nsection.lastElementChild; // последний ребёнок-элемент\n\n// Добавление и проверка связи родитель ↔ ребёнок\nconst newItem = document.createElement('li');\nsection.appendChild(newItem);\nnewItem.parentElement === section; // true\n\n// Перемещение узла сохраняет ссылку родитель ↔ ребёнок\nconst other = document.querySelector('#other');\nother.appendChild(newItem); // теперь родитель newItem — other\n\n// Поиск ближайшего предка по селектору\nconst btn = document.querySelector('.btn');\nbtn.closest('.card'); // ближайший родитель/предок с классом .card" } ] }, { "type": "paragraph", "content": [ { "type": "text", "text": "Важно: children игнорирует текстовые узлы (переводы строк, пробелы), а childNodes — нет. Это часто влияет на подсчёт количества детей." } ] }, { "type": "heading", "attrs": { "level": 3 }, "content": [{ "type": "text", "text": "События: иерархия и всплытие" }] }, { "type": "paragraph", "content": [ { "type": "text", "text": "События проходят по цепочке предков: стадия перехвата (capturing) сверху вниз, затем целевой элемент, затем всплытие (bubbling) снизу вверх к родителям. Это позволяет делегировать обработчики на родительских узлах." } ] }, { "type": "codeBlock", "content": [ { "type": "text", "text": "const parent = document.querySelector('#parent');\nconst child = document.querySelector('#child');\n\nparent.addEventListener('click', () => console.log('parent capture'), true); // capture\nchild.addEventListener('click', () => console.log('child'));\nparent.addEventListener('click', () => console.log('parent bubble')); // bubble\n\n// Клик по #child выведет:\n// parent capture → child → parent bubble" } ] }, { "type": "heading", "attrs": { "level": 3 }, "content": [{ "type": "text", "text": "Типичные вопросы на собеседовании" }] }, { "type": "bulletList", "content": [ { "type": "listItem", "content": [ { "type": "paragraph", "content": [{ "type": "text", "text": "Разница между ребёнком и потомком; пример в HTML." }] } ] }, { "type": "listItem", "content": [ { "type": "paragraph", "content": [{ "type": "text", "text": "CSS: отличие комбинаторов '>' и пробела." }] } ] }, { "type": "listItem", "content": [ { "type": "paragraph", "content": [{ "type": "text", "text": "JS: parentElement vs parentNode; children vs childNodes." }] } ] }, { "type": "listItem", "content": [ { "type": "paragraph", "content": [{ "type": "text", "text": "Как работает делегирование событий на родителе." }] } ] }, { "type": "listItem", "content": [ { "type": "paragraph", "content": [{ "type": "text", "text": "Почему пробелы/переводы строк могут считаться детьми (text nodes) и как этого избежать." }] } ] } ] }, { "type": "heading", "attrs": { "level": 3 }, "content": [{ "type": "text", "text": "Ключевые тезисы" }] }, { "type": "bulletList", "content": [ { "type": "listItem", "content": [ { "type": "paragraph", "content": [{ "type": "text", "text": "Родитель содержит детей; потомок — любой узел внутри (не только ребёнок)." }] } ] }, { "type": "listItem", "content": [ { "type": "paragraph", "content": [{ "type": "text", "text": "CSS: '>' — дети; пробел — потомки." }] } ] }, { "type": "listItem", "content": [ { "type": "paragraph", "content": [{ "type": "text", "text": "JS: используйте children для элементов, childNodes — для всех узлов; closest — для поиска предков по селектору." }] } ] }, { "type": "listItem", "content": [ { "type": "paragraph", "content": [{ "type": "text", "text": "События идут по цепочке родительских узлов (перехват → цель → всплытие)." }] } ] } ] } ] }

Что такое родитель и потомок?

Комментарии