Walking the DOM
The DOM allows us to do anything with elements and their contents, but first we need to reach the corresponding DOM object. All operations on the DOM start with the document object. That’s the main “entry point” to DOM. From it we can access any node. Here’s a picture of links that allow for travel between DOM nodes: Let’s discuss them in more detail.
On top: documentElement and body
- = document.documentElement
The topmost document node is document.documentElement. That’s the DOM node of the tag.
= document.bodyAnother widely used DOM node is the
element – document.body. = document.headThe
tag is available as document.head.Children: childNodes, firstChild, lastChild
There are two terms that we’ll use from now on:
Child nodes (or children) – elements that are direct children. In other words, they are nested exactly in the given one. For instance,
and are children of element.Descendants – all elements that are nested in the given one, including children, their children and so on. For instance, here
has childrenand- (and few blank text nodes):
…And descendants of are not only direct children
- (a child of
- ) and (a child of
- ) – the entire subtree.
The childNodes collection lists all child nodes, including text nodes.
The example below shows children of document.body:
Please note an interesting detail here. If we run the example above, the last element shown is
……
// parent of is
alert( document.body.parentNode === document.documentElement ); // true
// after goes
alert( document.head.nextSibling ); // HTMLBodyElement
// before goes
alert( document.body.previousSibling ); // HTMLHeadElement
The parentElement property returns the “element” parent, while parentNode returns “any node” parent. These properties are usually the same: they both get the parent.
With the one exception of document.documentElement:
The reason is that the root node document.documentElement () has document as its parent. But document is not an element node, so parentNode returns it and parentElement does not.
This detail may be useful when we want to travel up from an arbitrary element elem to , but not to the document:
Begin
- Information
End…one two three four A script cannot access an element that doesn't exist at the moment of running. In particular, if a script is inside `<head>`, then `document.body` is unavailable, because the browser did not read it yet. So, in the example below the first `alert` shows `null`:
Example:Follow the lesson from Microsoft Web-Dev-For-Beginners course
- ) – the entire subtree.
The childNodes collection lists all child nodes, including text nodes.
The example below shows children of document.body:
Please note an interesting detail here. If we run the example above, the last element shown is
……
// parent of is
alert( document.body.parentNode === document.documentElement ); // true
// after goes
alert( document.head.nextSibling ); // HTMLBodyElement
// before goes
alert( document.body.previousSibling ); // HTMLHeadElement
The parentElement property returns the “element” parent, while parentNode returns “any node” parent. These properties are usually the same: they both get the parent.
With the one exception of document.documentElement:
The reason is that the root node document.documentElement () has document as its parent. But document is not an element node, so parentNode returns it and parentElement does not.
This detail may be useful when we want to travel up from an arbitrary element elem to , but not to the document:
,- but also more deeply nested elements, such as
- (a child of