- 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 is the main entry point of page.
Represents additional objects provide by browser.
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.
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
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.
<html> Hello.world! </html>
As I mentioned above, render tree is combination of DOM & CSSOM. Also, it excludes element visually hidden, while DOM includes it.
These two are quite similar, but minor difference is that DevTools include additional information plus DOM like CSS pseudo-elements.