- What’s the Document Object Model, and why you should know how to use it — Leonardo Maldonado 100%
- DOM Tree 100%
- Render Tree Construction — Ilya Grigorik 100%
- What exactly is the DOM? explain differences with similar concepts * 100%
Document Object Model (DOM)
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.
<meta>, nodes with
Layout; Comput exact position and size of each objects.
Paint; Renders pixels to the screen.
Everything in HTML source code in included in DOM and represented as an node(object).
element node : HTML tags
Methods connects between nodes and events.
Returns first element that has specific CSS selector passed.
Returns all elements that has specific CSS selector passed.
Creates new element.
Set new attributes for element.
Allows us to interact with page.
We can walk through nodes of DOM using specific methods.
Returns nodelist of child nodes of given elements. Nodelist are live list of nodes, so if we add or remove elements, it automatically updates.
Returns first child of given element
Returns name of element ex) "div"
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
Returns parent element node of given element. It is read-only property, which cannot be assigned.
Element node version of
Returns closest ancestor element node which has given CSS selector
DOM VS ?
DOM vs HTML source code
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.
Top comments (0)