Browser Document: DOM Tree
What is an HTML tag considered in the Document Object Model?
document.body.style.background = 'red'; // make the background red
setTimeout(() => (document.body.style.background = ''), 3000); // return back
alert(document.body); // alerts [object HTMLBodyElement]
How does the Document Object Model represent HTML?
Interview Response: The DOM represents HTML as a tree structure of tags.
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Parent DIV -->
<!-- Child DIV -->
If the browser encounters malformed HTML, what happens?
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.
<!-- Malformed HTML before DOM generation -->
<!-- Fixed, After DOM generation -->
Do HTML tables always have a
<tbody> in the DOM?
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.
<!-- Before DOM generation -->
<!-- Now, After DOM generation -->
What are the four most regularly utilized node types?
Interview Response: The four main node types include document, element, text, and comment nodes.
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.