Understanding The DOM

Understanding The DOM

Glover Olaoluwa's photo
Glover Olaoluwa
·

7 min read

The Document Object Model (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. MDN

A Web page is a document. This document can be either displayed in the browser window or as the HTML source. But it is the same document in both cases. The Document Object Model (DOM) represents that same document so it can be manipulated. The DOM is an object-oriented representation of the web page, which can be modified with a scripting language such as JavaScript.

The DOM is not a programming language, but without it, the JavaScript language wouldn't have any model or notion of web pages, HTML documents, XML documents, and their component parts.

Accessing the DOM

When we create a script, whether it's an inline <script> element or included in the web page from an external file, we can immediately begin using the API for the document or window elements to manipulate the document itself or to get at the children of that document, which are the various elements in the web page.

With the DOM we can carry out the following actions;

  • Change/Remove HTML elements in the DOM.
  • Change and add CSS styles to elements
  • Read and change attributes.
  • Create new elements and insert them into the DOM.
  • Attach event listeners to elements e.g click, keypress, submit.

Querying the DOM in JavaScript

Querying is simply grabbing, when we grab an HTML element we are simply querying it.

Let's create a simple HTML file below

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Understanding The DOM</title>
</head>
<body>
   <h1 id="title">JavaScript and The DOM</h1>

    <script src="./script.js"></script>
  </body>
</html>

Now let's grab our h1 element by referencing its id in our JavaScript code.

// grab hold of heading
const heading = document.getElementById("title");

// changing the text content
heading.textContent = "We are learning the DOM";

Here, we just grabbed the H1 tag with an id of “title” using the document.getElementById(“ ”); and changed its content using the .textContent property.

Creating HTML Elements

New HTML elements can be created by using document.createElement(), and passing the tag name as the value. E.g. document.createElement(“div”).

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Understanding The DOM</title>
</head>
  <body>

    <div id="div1"></div>

    <script src="./script.js"></script>
  </body>
</html>

const div = document.getElementById("div1");

// creating new H1 tag
const H1 = document.createElement("h1");

// add some text to H1
H1.textContent = "Do you understand the DOM?";

// appendig H1 to the div
div.appendChild(H1);

In the above code, we got hold of the div with an id of “div1” and stored it in a variable div. We then created a new HTML H1 tag using .createElement(“h1”) on the document object and appended it to the div as a child using div.appendChild().

Styling

We can also manipulate the DOM to change our CSS styling.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Understanding The DOM</title>
  </head>
  <body id="body">

    <h1 id="title">Watch me go Blue!</h1>

    <script src="./script.js"></script>
</body>
</html>

const title = document.getElementById("title");
// change color to blue
title.style.color = "blue"

const body = document.getElementById("body")

// changing the background color to black
body.style.backgroundColor = "black"

We changed the text color of the title from black to blue using JavaScript. We achieved this using the .style property then changed the value of color to equal to blue.

We also change the background color of the body element to black.

Listening to Events

We can as well listen and react to events on the web page. Whatever the user does to interact with the webpage is called an event. Like:

  • A button clicked,
  • Form Submit,
  • Scrolling, etc. JavaScript is known for user interactivity and behavior!
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Undrstanding The DOM</title>
</head>
  <body>

    <h1 id="title">I Love JavaScript</h1>
    <button id="btn">CLICK ME</button>

    <script src="./script.js"></script>
  </body>
</html>

// grab hold of button
const button= document.getElementById("btn");

// add the event listener
button.addEventListener("click", () => {
//call back function
const title = document.getElementById("title");

// changing the text content
title.textContent = "Learning it is fun";
}

We changed the title of our webpage using a button click, Cool!

First, we grab hold of the button using the document.getElementById(“ ”) and then adding an event listener to that button using the addEventListener() method, which takes in 2 parameters – the name of the event and a callback function in which we have to specify what action to perform. Like we changed the title of the webpage.

With JavaScript and through the help of the DOM we can manipulate and interact with any element on our web page, as a front end developer, it's very important to understand the DOM.

Do good to read more and practice the following APIs in XML and how they work in the DOM

  • document.querySelector(selector)
  • document.querySelectorAll(name)
  • document.createElement(name)
  • parentNode.appendChild(node)
  • element.innerHTML
  • element.style.left
  • element.setAttribute()
  • element.getAttribute()
  • element.addEventListener()
  • window.content
  • window.onload
  • window.scrollTo()

Refrence - MDN

Thanks for reading.

DOMJavaScript