Skip to main content

DOM Tree

Browser Document: DOM Tree

What is the DOM tree?​

View Answer:
Interview Response: The DOM tree is a hierarchical, tree-like representation of an HTML document, with each element represented as a node. It allows easier interaction and manipulation of the webpage using JavaScript.

What is an HTML tag considered in the Document Object Model?​

View Answer:
Interview Response: Every HTML tag is an object, according to the Document Object Model (DOM). Nested tags are "children" of the one that contains them, and the text included within a tag is also an object. These objects are available via JavaScript and may be used to alter the page. Document.body, for example, is the object that represents the ‹body› tag.

Code Example:

document.body.style.background = 'red'; // make the background red

setTimeout(() => (document.body.style.background = ''), 3000); // return back

console.log(document.body); // console.logs [object HTMLBodyElement]

How does the Document Object Model represent HTML?​

View Answer:
Interview Response: The DOM represents HTML as a tree structure of tags.

Code Example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- Parent DIV -->
    <div id="parent">
      <!-- Child DIV -->
      <div id="child"></div>
    </div>
  </body>
</html>

If the browser encounters malformed HTML, what happens?​

View Answer:
Interview Response: If the browser encounters malformed HTML, it automatically corrects it when making the DOM.

Technical Response: When the browser creates the DOM, it immediately corrects any erroneous HTML. The top tag, for example, is always ‹html›. Even though it does not exist in the document, it exists in the DOM since it is created by the browser. The same is true for ‹body›. Browsers automatically process mistakes in the document and close tags when producing the DOM.

Code Example:

<!-- Malformed HTML before DOM generation -->
<!DOCTYPE html>
<html>
<head>
  <title>Test Page</title>
</head>
<body>
  <div>
    <h1>Heading</h1>
    <p>This is a paragraph without a closing tag
  </div>
</body>
</html>

<!-- Fixed, After DOM generation -->
<!DOCTYPE html>
<html>
<head>
  <title>Test Page</title>
</head>
<body>
  <div>
    <h1>Heading</h1>
    <!-- paragraph tag fixed after dom generation -->
    <p>This is a paragraph without a closing tag</p> 
  </div>
</body>
</html>

Do HTML tables always have a <tbody> in the DOM?​

View Answer:
Interview Response: Yes, that is an intriguing "unique case" when we use tables. They must have the ‹tbody› element according to DOM specifications, however HTML content may omit it. The browser will then immediately generate ‹tbody› in the DOM.

Code Example:

<!-- Before DOM generation -->
<table id="table">
  <tr>
    <td>1</td>
  </tr>
</table>

<!-- Now, After DOM generation -->
<table id="table">
  <tbody>
    <tr>
      <td>1</td>
    </tr>
  </tbody>
</table>

What are the different types of DOM nodes?​

View Answer:
Interview Response: The main types of DOM nodes include Element nodes, Text nodes, Comment nodes, Document nodes, and DocumentType nodes. These nodes allow for various interactions with the HTML structure.

Technical Response: There are 12 different types of nodes. We usually work with four of them in practice. The four major node types are document, element, text, and comment nodes. The document node is the DOM's starting point. The makeup of element nodes include all HTML tags, which we use as the tree's building blocks. We use the comment node to display information in our code, but it does not show in the browser, but JS can read it from the DOM.

Code Example: Comment Node

<!DOCTYPE html>
<html>

  <head>
    <title>Learning About Nodes</title>
  </head>

  <body>
    <h1>An element node</h1>
    <!-- a comment node -->
    A text node.
  </body>

</html>

What is event propagation in the context of the DOM?​

View Answer:
Interview Response: Event propagation is the process through which events travel through the DOM tree, allowing multiple event handlers to be triggered. It consists of three phases: capturing, target, and bubbling.

Code Example:

// This will trigger during the bubbling phase (default behavior)
element.addEventListener('click', function() {
  console.log('Bubble phase');
}, false);

// This will trigger during the capturing phase
element.addEventListener('click', function() {
  console.log('Capture phase');
}, true);

Can you explain the Shadow DOM?​

View Answer:
Interview Response: Yes, the Shadow DOM is a Web Components feature allowing encapsulation of DOM trees and styles within a custom element, keeping them separate from the main DOM, avoiding conflicts, and promoting reusability.

What is the Light DOM?​

View Answer:
Interview Response: The Light DOM refers to the normal HTML content inside an element. It's visible to the end user and can be manipulated by both the developer and user-facing scripts like JavaScript.

Code Example:

Here's an example of Light DOM content...

<my-web-component>
  <p>This is light DOM content</p>
</my-web-component>

The paragraph (<p>) is a Light DOM child of the <my-web-component> custom element.

Shadow DOM, on the other hand, is a way of creating an encapsulated tree of DOM nodes that are separate from the main (light) DOM tree. This means the structure, styles, and behavior inside the Shadow DOM are scoped to the Shadow DOM and do not bleed out to the main document, and vice versa. This feature is very useful for building self-contained, reusable components without worrying about style or script conflicts with the rest of the document.

Here's an example of how you might add some Shadow DOM content to a custom element:

class MyWebComponent extends HTMLElement {
  connectedCallback() {
    let shadowRoot = this.attachShadow({ mode: 'open' });
    shadowRoot.innerHTML = `<p>This is shadow DOM content</p>`;
  }
}

customElements.define('my-web-component', MyWebComponent);

In this example, the Shadow DOM content is not directly accessible through the main DOM tree, and it's not affected by styles and scripts outside its shadow tree. This is in contrast to the Light DOM content, which is directly part of the main DOM tree and fully exposed to its styles and scripts.

note

In web development, the term "Light DOM" is often used in contrast to the "Shadow DOM" when discussing Web Components.