Docs
/
Cohort 2
/
Week 4
/
DOM

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 and objects.
  • 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.

Last updated on February 12, 2024