MOYED

Posted on Feb 5, 2022

13. DOM and Layout Trees

#javascript #webdev #beginners #programming

Articles

How To Understand and Modify the DOM in JavaScript — Tania Rascia 100%
What’s the Document Object Model, and why you should know how to use it — Leonardo Maldonado 100%
DOM Tree 100%
How to traverse the DOM in Javascript — Vojislav Grujić 100%
Render Tree Construction — Ilya Grigorik 100%
What exactly is the DOM? explain differences with similar concepts * 100%

Window Object

Window object is the global ojbect when we run Javascript in web browser. Every objects are stored under window object. There are DOM, BOM, and Javascript under window object.

Document Object Model (DOM)

Represents all page content as objects, so that we can access and modify with Javascript. document object is the main entry point of page.

Browser Object Model (BOM)

Represents additional objects provide by browser.

Process of Render Tree

Combine DOM & CSSOM.
Exclude invisible nodes.
(<script>, <meta>, nodes with display: none;)
Layout; Comput exact position and size of each objects.
Paint; Renders pixels to the screen.

DOM

Everything in HTML source code in included in DOM and represented as an node(object).

element node : HTML tags
text node
comment node

Manipulating DOM

Methods

Methods connects between nodes and events.

querySelector()
Returns first element that has specific CSS selector passed.
querySelectorAll()
Returns all elements that has specific CSS selector passed.
creatElement()
Creates new element.
setAttribute()
Set new attributes for element.

Events

Allows us to interact with page.
addEventListner()

Trasversing DOM

We can walk through nodes of DOM using specific methods.

General methods

childNodes
Returns nodelist of child nodes of given elements. Nodelist are live list of nodes, so if we add or remove elements, it automatically updates.
firstChild
Returns first child of given element
nodeName
Returns name of element ex) "div"
nodeVale
Specific for text & comment nodes, returns value of given node.

Element specified methods

Following methods only considers element nodes, which can be useful in certain circumstances.

children Returns nodelist of child element nodes of given element
parentNode
Returns parent element node of given element. It is read-only property, which cannot be assigned.
firstElementChild
Element node version of firstChild
closest
Returns closest ancestor element node which has given CSS selector

DOM VS ?

DOM vs HTML source code

1. DOM is modified by client-side Javascript

document.body.style.background = "green";

If we write above snippet in console, the background color changes to green. It means that DOM has changed. But if we check the HTML source code, it hasn't changed. If we refresh the page, change disappears.

2. Browser automatically fixes error in source code

<html>
  Hello.world!
</html>

Above snippet is wrong, because it doesn't have head & body tag. However, DOM automatically fixes it like this.

DOM vs Render Tree

As I mentioned above, render tree is combination of DOM & CSSOM. Also, it excludes element visually hidden, while DOM includes it.

DOM vs What in DevTools

These two are quite similar, but minor difference is that DevTools include additional information plus DOM like CSS pseudo-elements.

DEV Community