Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 <p>Знакомство с DOM-деревом проще всего начать с изучения структуры этого дерева.</p>

2 <p>Если коротко, DOM-дерево состоит из узлов (нод, node). Вместе узлы образуют иерархию, аналогичную HTML. При этом узлы делятся на два типа:</p>

3 <ul><li>Листовые - не содержат внутри себя других узлов</li>

4 <li>Внутренние - у них есть узлы</li>

5 </ul><p>Чаще всего конкретные узлы описывают конкретные теги из HTML и содержат их атрибуты внутри себя. У узлов есть тип, который определяет набор свойств и методов узла. В этом уроке мы с ними познакомимся.</p>

6 <p>Корневой элемент в DOM-дереве соответствует тегу <html>. Доступ к нему можно получить так:</p>

7 <p>Теги <body> и <head> всегда присутствуют внутри документа, поэтому можно вынести их на уровень объекта document для более простого доступа:</p>

8 <p>По дереву можно не только спускаться, но и подниматься:</p>

9 <p>Если представить дерево, то по нему можно двигаться как вверх-вниз, так и влево-вправо. Картинка ниже это демонстрирует:</p>

10 <h2>childNodes</h2>

11 <p>Далее мы рассмотрим childNodes - свойство, с помощью которого можно получить<strong>дочерние узлы</strong>- это узлы, вложенные в текущий узел на один уровень вложенности. Еще говорят, что это потомки первого уровня.</p>

12 <p>В работе с childNodes есть несколько интересных моментов:</p>

13 <ol><li><p>Это свойство доступно только для чтения. Попытка что-то записать в конкретный элемент не приведет к успеху:</p>

14 <p>Изменить DOM-дерево можно с помощью специальных методов, которые мы изучим в соответствующем уроке.</p>

15 </li>

16 <li><p>Хотя childNodes и возвращает набор элементов, это все же не массив. В нем отсутствуют привычные методы map(), filter() и другие. Но зато есть forEach():</p>

17 <p>Если очень хочется, то его можно преобразовать в массив, и затем уже работать привычным способом:</p>

18 </li>

19 </ol><h2>Иерархия</h2>

20 <p>Узлы DOM-дерева не просто так делятся на типы. Эти типы выстраиваются в иерархию от общего к частному. В иерархии подтипы наследуют свойства и методы родительских типов и добавляют свои:</p>

21 <p>Узлы с типами Text и Comment являются листовыми, то есть они не могут иметь потомков. А вот элементы или производные типы от Element - это то, с чем приходится иметь дело чаще всего. К элементам относятся все типы, представленные тегами в HTML.</p>

22 <p>При работе с деревом естественным образом возникает понятие<strong>потомки</strong>. Применительно к DOM-дереву это означает, что тег с содержимым имеет потомков.</p>

23 <p>Посмотрите на пример кода:</p>

24 <p>В этом примере тег <div> (с id parent-div) содержит 14 потомков, в том числе три<strong>дочерних узла</strong>. Разберемся, в чем разница между этими понятиями.</p>

25 <p><strong>Дочерними</strong>называют только те узлы, которые находятся на первом уровне вложенности. То есть дочерними будут считаться:</p>

26 <ul><li><h1></li>

27 <li>Текст "Привет!"</li>

28 <li><div> с классом child-div</li>

29 </ul><p><strong>Потомками</strong>называют все вложенные узлы на всех уровнях вложенности. Потомками тега <div> (с id parent-div) будут не только три вышеупомянутых дочерних тега, но и все узлы внутри них:</p>

30 <p>Дочерние узлы одновременно являются потомками. Обратное утверждение неверно - потомок необязательно является дочерним элементом. В нашем примере тег <span> приходится потомком, но не дочерним элементом по отношению к тегу <div> с id parent-div.</p>

31 <h2>Элементы</h2>

32 <p>На практике чаще всего нас интересуют не любые узлы, а элементы. Именно ими мы манипулируем, перемещаемся сквозь них. Это настолько важно, что в DOM есть альтернативный способ обхода дерева, который построен только на элементах:</p>

33 <p>Все эти свойства возвращают объекты типа Element и пропускают объекты Text или Comment. Это видно в примере ниже, где свойство children возвращает только теги.</p>

34 <p>Этим children отличается от childNodes, который возвращает все узлы, включая листовые:</p>

35 <p>Между children и childNodes есть еще одно довольно важное отличие. Они возвращают не только разный набор узлов, но и сам тип коллекции в первом и втором случае разный:</p>

36 <ul><li>childNodes возвращает NodeList</li>

37 <li>children - HTMLCollection</li>

38 </ul><p>Они немного по-разному работают, но рассматривать эту разницу мы будем позже, когда познакомимся с селекторами.</p>

39 <h2>Специальная навигация</h2>

40 <p>Некоторые элементы обладают специальными свойствами для навигации по ним, к таким элементам относятся, например, формы и таблицы:</p>

41 <p>В примере выше table имеет специальные свойства для навигации rows и cells.</p>

42 <p>Этот способ навигации не заменяет основные способы. Он сделан исключительно для удобства в тех местах, где это имеет смысл. Например, таблица имеет ячейки в строках. Поэтому гораздо удобнее обращаться к строкам(англ. rows) и ячейкам(англ. cells) через индексы.</p>

43 <h2>Заключение</h2>

44 <p>Нужно ли все эти методы знать наизусть? В реальности - нет. Важно понимать общие принципы устройства DOM-дерева, знать иерархию типов и то, как принципиально происходит обход элементов. Конкретные методы и свойства всегда можно прочитать в документации. Наизусть их мало кто помнит, и в этом нет практического смысла.</p>

45 <p>Кроме того, обход дерева данными способами - это низкоуровневый способ работы. На практике для выборки нужных элементов используют селекторы, которые изучаются далее.</p>