Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <p>Studying the structure of DOM trees is the easiest way to get acquainted with them.</p>

2 <p>In short, DOM trees consist of nodes, which form a hierarchy similar to HTML. Some nodes are<strong>leaf</strong>nodes, so they don't contain other nodes inside themselves. Some nodes are<strong>internal</strong>, so they have children.</p>

3 <p>Specific nodes most often describe specific tags from HTML and contain their attributes inside themselves. Nodes have a type that defines a set of node properties and methods. In this lesson, we will get to know them below.</p>

4 <p>The root element in the DOM tree corresponds to the <html> tag.</p>

5 <p>You can access it like this:</p>

6 <p>Since <body> and <head> are always present inside the document, we can move them to the document object level for easier access:</p>

7 <p>You can go both up and down the tree:</p>

8 <p>Essentially, if you imagine a tree, you can move up to the parent, down to the child, and left and right to the siblings.</p>

9 <h2>childNodes</h2>

10 <p>We can use the property childNodes to get<strong>children</strong>- nodes nested in the current node on one level of nesting. Also, you can use the term<strong>descendants of the first level</strong>.</p>

11 <p>There are several interesting points to note while working with childNodes:</p>

12 <ol><li><p>This property is read-only. Trying to write something to a specific element won't work:</p>

13 <p>To change DOM trees we have to use a specific set of methods. We will discuss them in the corresponding lesson.</p>

14 </li>

15 <li><p>Although childNodes returns a set of elements, it's still not an array. It lacks the usual methods, such as map(), filter(), and others. However, it does have forEach():</p>

16 <p>If you want to, you can convert it into an array and then work with it in the usual way:</p>

17 </li>

18 </ol><h2>Hierarchy</h2>

19 <p>The nodes in the DOM tree not only have types, but they also build a hierarchy.</p>

20 <p>In the hierarchy, subtypes inherit the properties and methods of their parent types and add their specific ones:</p>

21 <p>Nodes with the text and comment types are leaf nodes, meaning they cannot have children. But element types are what we deal with most often. The elements include all types represented by tags in HTML.</p>

22 <p>Whenever you work with a tree, you can expect to see children and descendants. Concerning the DOM tree, this means that the tag has a body, children, and descendants. How do they differ from each other?</p>

23 <p>The<div> tag with id parent-div contains three child nodes and 14 descendants. Why?</p>

24 <p>Child nodes: <h1>, text "Hello!" and <div> with thechild-div class.</p>

25 <p>Concerning the node, children are only those nodes that lie directly in it, at the first level of nesting.</p>

26 <p>Descendants are all nodes nested in it at all levels of nesting. The descendants of the <div> with id parent-div, in addition to the above three child tags, are also all nodes nested in these child tags (as well as nodes nested in these nested nodes and so on, given the recursive nature of trees).</p>

27 <p>Child nodes are also descendants. However, this isn't the same the other way round: the descendant is not necessarily a child element (in the example, the tag <span> is a descendant, but not a child to the <div> with id parent-div).</p>

28 <h2>Elements</h2>

29 <p>Usually, it's elements we're interested in, not just any nodes. It's elements that we want to manipulate and move through. This is so important that the DOM has an alternative way of traversing the tree, built only on elements:</p>

30 <p>All these methods return Element type objects and skip Text and Comment objects. You can see it in the example below, where the children property returns only tags. This is how children differs from childNodes, which returns all nodes, including leaf nodes:</p>

31 <p>There is another difference between children and childNodes. They return not only a different set of nodes but also different types of collections:</p>

32 <ul><li>childNodes returns a NodeList</li>

33 <li>children returns an HTML collection</li>

34 </ul><p>They work a little differently, but we will look at the difference later when we get acquainted with selectors.</p>

35 <h2>Special navigation</h2>

36 <p>Some elements, such as forms and tables, have specific properties for navigating through them:</p>

37 <p>This method of navigation does not replace the main ones. It's made solely for convenience in places where it makes sense.</p>

38 <h2>Conclusion</h2>

39 <p>Do we need to know all these methods by heart? Actually, no. It's important to understand the general principles of DOM tree structure. Also, you should know the hierarchy of types and the basics of traversing through elements. But that's all for now.</p>

40 <p>You can always read about specific methods and properties in the documentation. Not so many people remember them by heart, and there are no practical reasons to do so.</p>

41 <p>In addition, traversing through trees in these ways is a low-level way of working. The main way to select the elements is through selectors, which we will discuss later.</p>