The Document Object Model (DOM) is a representation of an HTML document in nodes and objects. It is the browser’s internal structure that allows developers to interact with and manipulate the web page. Modern JavaScript frameworks heavily rely on the DOM API to control the elements displayed on the page.
When a browser retrieves an HTML document from a server, it analyzes the structure of the code and creates a model of it known as the DOM. Based on this model, the browser renders the page on the screen.
The DOM provides an API that allows developers to interact with and modify the web page. JavaScript is the preferred language for working with the DOM since it is the only language that browsers can run.
In Single Page Applications, the DOM dynamically changes to reflect the content displayed on the screen. Developers can inspect the DOM using the Browser Developer Tools.
Here are some key concepts and techniques related to the DOM:
The Window Object
The window
object represents the browser window that contains the DOM document. It has several useful properties and methods that you can access directly without referencing window
explicitly.
Some of the important properties of the window
object are:
console
: points to the browser’s debugging consoledocument
: points to thedocument
object, which is key for DOM interactionshistory
: gives access to the History APIlocation
: gives access to the Location interface, which provides information about the URLlocalStorage
: a reference to the Web Storage API’s localStorage objectsessionStorage
: a reference to the Web Storage API’s sessionStorage object
The window
object also exposes methods such as alert()
, postMessage()
, requestAnimationFrame()
, setInterval()
, clearInterval()
, setTimeout()
, setImmediate()
, addEventListener()
, and removeEventListener()
. These methods allow you to perform various tasks, such as displaying alert dialogs, executing code at specific intervals, and adding event listeners to the document.
The Document Object
The document
object represents the DOM tree loaded in a window. It can be accessed from window.document
or simply document
.
The document
object provides a wide range of properties and methods. One of the most commonly used methods is the Selectors API, which includes methods like getElementById()
, querySelector()
, querySelectorAll()
, getElementsByTagName()
, and getElementsByClassName()
. These methods allow you to select elements from the DOM based on their ID, class name, or tag name.
Other useful properties of the document
object include title
, which gives you access to the document title, URL
, which gives you the current URL, and cookie
, which allows you to access document cookies.
The document
object also provides access to the head
and body
element nodes of the DOM.
Types of Nodes
Nodes are the building blocks of the DOM. There are several types of nodes that you will encounter:
- Document: The root node of the DOM tree.
- Element: HTML tags are represented as element nodes.
- Attr: Attributes of HTML tags.
- Text: The text content of an element or attribute node.
- Comment: HTML comments.
- DocumentType: The Doctype declaration.
Understanding these node types is essential when traversing and manipulating the DOM.
Traversing the DOM
The DOM is a tree-like structure with the Document node as the root. You can navigate through the DOM tree by accessing different nodes.
To get the parent of an element, you can use the parentNode
property or the parentElement
property. These properties return the parent node of the specified node in the DOM tree.
To access the children of an element, you can use the childNodes
property, which returns a list of all child nodes, including text nodes and white space. The children
property is also available but excludes text nodes and white space.
You can also navigate the siblings of an element using the previousElementSibling
and nextElementSibling
properties.
Editing the DOM
The DOM provides various methods to edit and modify the nodes of a web page. You can create new elements using the createElement()
method and add them to the DOM using the appendChild()
method.
Other methods for editing the DOM include removeChild()
, insertBefore()
, replaceChild()
, insertAdjacentElement()
, and textContent
.
In addition to these methods, you can also modify element attributes using the setAttribute()
and getAttribute()
methods.
By understanding how to navigate and manipulate the DOM, developers can create dynamic and interactive web pages.
These are just some of the basics of working with the DOM in JavaScript. The DOM API offers a wide range of capabilities for manipulating web pages. By using the DOM effectively, developers can build rich and interactive web applications.