Skip to main content

Walking the DOM

Browser Document: Walking the DOM

What does it mean in JavaScript to walk the DOM?​

View Answer:
Interview Response: We can do anything with elements and their contents thanks to the DOM, but first, we must locate the proper DOM object. This step-by-step procedure is known as walking the DOM. All DOM actions begin with the document object. This point is the primary "entry point" into DOM, and we can reach any node from it.

Code Example:

alert(document.documentElement); // alerts [object HTMLHtmlElement] <html> node

What are the topmost tree nodes available direct as document properties?​

View Answer:
Interview Response: The topmost tree nodes are available directly as document properties, including the HTML, body, and head nodes document nodes.

Technical Response: The topmost tree nodes, including the HTML, body, and head nodes, are accessible as document properties right away. document.documentElement The uppermost document node is called an element. That is the DOM node for the ‹HTML› element. Another often used DOM component is the ‹body› element — document.body. The ‹head› tag is also known as document.head. Any node that extends beyond this point is a part of the body node.

Code Example:

alert(document.documentElement); // alerts [object HTMLHtmlElement] <html> node

What does null mean or equate to in the DOM?​

View Answer:
Interview Response: The null value in the DOM implies "doesn't exist" or "no such node". A script can't access an element that doesn't exist when it runs. If we include a script within ‹head›, document.body is inaccessible since the browser has not yet read it.

Code Example:

<html>
  <head>
    <script>
      alert('From HEAD: ' + document.body); // null, there's no <body> yet
    </script>
  </head>

  <body>
    <script>
      alert('From BODY: ' + document.body); // HTMLBodyElement, now it exists
    </script>
  </body>
</html>

What is the difference between Child nodes and Descendants in the DOM?​

View Answer:
Interview Response: A child node in the DOM is a direct child of the provided parent. Descendants include all components nested within the provided one, such as children and their children.

Can you explain what the firstChild and lastChild properties do on elements?​

View Answer:
Interview Response: The firstChild and lastChild element properties give fast access to a parent element's first and last children.

Technical Response: The first and last child element characteristics provide quick access to a parent element's first and last children. The firstChild and lastChild attributes are considered shorthand. We utilize the childNodes property to communicate with nodes using brackets. There is also a specific function elem.hasChildNodes() that we can determine whether or not there are any child nodes.

Code Example:

elem.childNodes[0] === elem.firstChild; // true
elem.childNodes[elem.childNodes.length - 1] === elem.lastChild; // true

What type of object structure are childNodes?​

View Answer:
Interview Response: Child nodes make up a structure like an Array. In simple terms, it's a unique array-like iterable object that we can loop over.

Technical Response: The childNodes looks like an array, but it is not an array but rather a collection (a particular array-like iterable object). This object allows us to iterate over the childNodes using a for…of loop, which is consequential. That is because it is iterable (provides the Symbol.iterator property, as required). Since it's an array-like object we do not get all the benefits of arrays like the filter and map methods. However, there is a solution that we can use by invoking Array.from() and turning the childNodes into an array.

Code Example:

for (let node of document.body.childNodes) {
  alert(node); // shows all nodes from the collection
}

// Doesn't work returns undefined
alert(document.body.childNodes.filter); // undefined (there's no filter method!)

// Solution: turn childNodes into an array
alert(Array.from(document.body.childNodes).filter); // function

Is it possible to loop over node collections with a for…in loop?​

View Answer:
Interview Response: Theoretically, you may use a for...in loop to cycle across collections. However, it is not advised—the for..in loop loops over all enumerable attributes. And collections include several "additional" attributes that seldomly get used, and we usually do not want, such as entries, forEach, and keys.

Code Example:

// shows 0, 1, length, item, values, forEach, and more.
for (let prop in document.body.childNodes) alert(prop);

Can you define what a sibling is in the DOM structure?​

View Answer:
Interview Response:Siblings are nodes that are the same parent's children. The head and body nodes, siblings, and both offspring of the HTML node are an example. The ‹body› is the "next" or "right" sibling of the ‹head›, while the ‹head› is the "previous" or "left" sibling of the ‹body›.

Code Example:

<html>
  <head>
    ...
  </head>
  <body>
    ...
  </body>
</html>

Are there properties that we can use to access any of the following and previous node siblings (Note: including text and comment nodes)? How do you access the parent node?​

View Answer:
Interview Response: Yes, we can access the next sibling via the nextSibling property, and the previous sibling node gets accessed via the previousSibling property. We can access the parent node via the parentNode property. We should note that using these properties allows direct access to all nodes, including the text and comment nodes.

Code Example:

// parent of <body> is <html>
alert(document.body.parentNode === document.documentElement); // true

// after <head> goes <body>
alert(document.head.nextSibling); // HTMLBodyElement

// before <body> goes <head>
alert(document.body.previousSibling); // HTMLHeadElement

There are times when we do not want to access the text and comment nodes. Is there a property we can use to access the next sibling element node?​

View Answer:
Interview Response: Yes, when we are interested in only accessing element nodes. Some properties serve that purpose for the previous and the next sibling element nodes. For the next sibling element node, we can use nextElementSibling property, and for the previous element node, we use previousElementSibling property. Web developers commonly referred to this feature as element-only navigation.

Why parentElement? Can the parent be not an element?​

View Answer:
Interview Response: The parent may not be an element when we call parentElement on the document.documentElement is the first node of the document. It returns null, but we can access it using the parentNode property as an alternative.

Technical Response: ParentElement returns the "element" parent, whereas parentNode returns the "any node" parent. These characteristics are often the same: they both receive the parent. Except for the document.documentElement refers to the document's initial node without a parent element. This characteristic is because of the root node document.documentElement (‹html›) is the child of the document. However, because the document is not an element node, parentNode does not return it, and parentElement does not.

Code Example:

alert(document.documentElement.parentNode); // document
alert(document.documentElement.parentElement); // null

Besides the essential DOM elements, do elements provide additional properties based on their specific type?​

View Answer:
Interview Response: Several DOM elements provide additional properties. For example, the table element provides the row, caption, tBodies, and other properties that we can access.

Technical Response: Certain types of DOM elements may provide additional properties specific to their type for convenience. An excellent example of this is table elements that provide table.rows, table.caption, table.tBodies, and additional properties that we can access. The table.rows property is a collection of ‹tr› elements of a table that we can modify via the DOM and highlight or change the text as an example. There are also additional navigation properties for HTML forms.

Code Example:

<table id="table">
  <tr>
    <td>one</td>
    <td>two</td>
  </tr>
  <tr>
    <td>three</td>
    <td>four</td>
  </tr>
</table>

<script>
  // get td with "two" (first row, second column)
  let td = table.rows[0].cells[1];
  td.style.backgroundColor = 'red'; // highlight it
</script>