What is the DOM?
The Document Object Model (DOM) connects web pages to scripts or programming languages, allowing dynamic interaction between JavaScript and HTML/CSS. As the name suggests, it represents the document as an object, enabling us to modify the content, structure, and styles of the page.
DOM Tree
The DOM represents the document as a tree of nodes and objects. The root of the tree is the document itself, while the child nodes represent elements, text content, and other parts of the document. Tags are represented as element nodes that form the tree structure, while the texts inside elements become text nodes. Even comments are represented as comment nodes in the DOM.
Navigating the DOM
As mentioned above, the document is the root node, so we always start with document.~ to access the nodes.
document
document.documentElement => <html>
document.body => <body>
document.head => <head>
Node Relationships
Child nodes or children: The direct children of a parent node.
Descendants: All elements nested within a given node (including children, grandchildren, etc.).
Siblings: Nodes that share the same parent.
All Nodes:
The childNodes property collects all types of child nodes, including Text and Comment.
<html>
<body>
<div>Begin</div>
<ul>
<li>Information</li>
</ul>
<!-- some comment here -- >
<div>End</div>
<script>
for (let i = 0; i < document.body.childNodes.length; i++) {
alert( document.body.childNodes[i] ); // Text, DIV, Text, UL, Comment ..., SCRIPT
}
</script>
</body>
</html>
The Modern JavaScript Tutorial
(The code is slightly modified for explanation purposes.)
Notes:
childNodes accesses all the child nodes, including Text and Comment nodes.
Other properties include:
parentNode, childNodes, firstChild, lastChild, previousSibling, nextSibling
Elements Only:
The childen property collects only child nodes that are elements.
<html>
<body>
<div>Begin</div>
<ul>
<li>Information</li>
</ul>
<!-- some comment here -- >
<div>End</div>
<script>
for (let elem of document.body.children) {
alert(elem); // DIV, UL, DIV, SCRIPT
}
</script>
</body>
</html>
Notes:
children accesses only the child elements.
Other properties include:
parentElement, children, firstElementChild, lastElementChild, previousElementSibling, nextElementSibling
Searching the DOM
The properties mentioned above can find elements in the DOM. However, they are not very convenient for locating more specific elements. This is where getElement(s)By* and querySelector(All) become useful. These methods are straightforward to use, so I won't go into much detail about them or when to use one over the other. Here's a brief explanation:
getElementById(id)
Since an id should be unique, the DOM can locate it quickly. However, if there are multiple elements with the same id (e.g., due to a mistake), the method may return one of them arbitrarily, leading to issues.
querySelectorAll(css)
This method returns all the elements that match the given CSS selector.
querySelector(css)
This method returns the first element that matches the given CSS selector. It is similar to querySelectorAll(css)[0], but querySelectorAll() first collects all matching elements, while querySelector() directly retrieves the first match.
Key Difference:
One of the main differences between these methods is that getElement(s)By* returns a live collection, while querySelector and querySelectorAll return a static collection.
Attributes and Properties
When the browser loads a page, the HTML is parsed, and the DOM is generated.
In HTML, attributes are strings, but in the DOM, they are represented as properties of objects.
Example:
If the tag is <body id="page">, then the DOM object has body.id="page".
The Modern JavaScript Tutorial
data-* attributes
When working with custom attributes, we can use data-*, which is accessible via the dataset property.
Example:
<body data-about="Elephants">
<script>
alert(document.body.dataset.about); // Elephants
</script>
The Modern JavaScript Tutorial
The DOM is powerful because it enables interactivity in a way similar to Object-Oriented Programming (OOP). We can use dot notation or bracket notation to access its properties and methods.
Top comments (0)