DOM - Document Object Model
What is the DOM?
The DOM is a tree-like structure
that represents the HTML of a webpage. It is a representation of the HTML that can be manipulated with JavaScript. The DOM is a part of the browser, and is not a part of JavaScript.
DOM is a programming interface
for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes
and objects
. That way, programming languages can connect to the page.
Lets jot down some important points about DOM:
- It is a
programming interface
for Web Documents. - DOM is not a programming language, it provides a model of a web page.
- Represents the page so that programs can change the document structure, style, and content.
- The DOM is a
tree-like structure
that gets loaded into the browser when a web page is loaded. - The DOM represents the document as
nodes
andobjects
. - Without it the JavaScript language wouldn't have any model or notion of web pages, HTML documents, XML documents, SVG documents and their component parts (e.g. elements).
Web APIs
that are used to build websites.
Aceessing the DOM
When you create a script, weather it is inline or external, the browser will automatically create a document object
for you. The document
or the window
object is the root node of the DOM tree. It represents the web page loaded into the current browser window or tab. The document object provides access to all elements in the DOM tree makes it easy for manipulation of all elements.
The DOM was designed to be independent of any particular programming language, making the structural representation of the document available from a single, consistent API. Though, the DOM is not a part of the JavaScript language, it is made available through the Document Object Model API
exposed by the browser runtime environment
.
Lets look at an example of accessing the DOM:
<!DOCTYPE html>
<html>
<head>
<title>DOM</title>
<script>
// run this function when DOM is loaded
window.onload = function () {
console.log(document);
const heading = document.createElement("h1");
const headingText = document.createTextNode("DOM");
heading.appendChild(headingText);
document.body.appendChild(heading);
};
</script>
</head>
<body></body>
</html>
As you might have noticed the document log spits the whole html of the page in the console. The document
object is the root node of the DOM tree. It represents the web page loaded into the current browser window or tab. The document object provides access to all elements in the DOM tree makes it easy for manipulation of all elements.
It represents the web page using series of objects, root object being document
object which in turn houses other objects like forms
, links
, images
etc. These objects are called nodes
.
DOM Tree
DOM is a tree-like structure that represents the HTML of a webpage. It is a representation of the HTML that can be manipulated with JavaScript. The DOM is a part of the browser, and is not a part of JavaScript.
When a web browser parses an HTML document, it builds a DOM tree and then uses it to display the document.
The Document Object
It is the root node of the DOM tree. It represents the web page loaded into the current browser window or tab. The document object provides access to all elements in the DOM tree makes it easy for manipulation of all elements. It has properties and methods that allow access to and modification of document content which can be done using the dot notation.