Back to Course

Learn JavaScript

0% Complete
0/0 Steps
  1. Introduction to JavaScript
    What is JavaScript and Why is it Important?
  2. Setting Up a Development Environment
  3. Basic JavaScript Syntax
    Variables and Data Types
  4. Operators and Expressions
  5. Control Structures (if/else, for and while loops)
  6. Functions and Objects
    Defining and Calling Functions
  7. Working with Objects and Object-Oriented Programming
  8. DOM Manipulation and Events
    Understanding the Document Object Model (DOM)
  9. Manipulating HTML Elements with JavaScript
  10. Responding to User Events (click, hover, etc.)
  11. Advanced JavaScript Techniques
    Working with Arrays and Collections
  12. Asynchronous Programming with Promises and Async/Await
  13. Working with APIs and AJAX Requests
  14. Project: Building a Simple Web Application
    Putting Everything Together to Build a Web App Using JavaScript
  15. Bonus Topics
    Working with Libraries and Frameworks (jQuery, React, etc.)
  16. Debugging and Troubleshooting JavaScript Code

Participants 676

Show more
Home Learn JavaScript Understanding the Document Object Model (DOM)
Lesson 8 of 16
In Progress

Understanding the Document Object Model (DOM)

Yasin Cakal

The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the structure of a document as a tree of objects, with each object representing an element in the document.

The DOM allows you to manipulate the content and structure of a document using JavaScript. This enables you to create dynamic and interactive web pages that can respond to user input and changing data.

In this article, we’ll go over the basics of the DOM and how to use it in JavaScript.

The DOM Tree

The DOM represents a document as a tree of objects, with the document itself at the root of the tree. Each object in the tree represents an element in the document, such as a paragraph, a link, or a form.

The tree structure of the DOM is called the “DOM tree”. The DOM tree consists of “nodes”, with each node representing an object in the tree. There are several types of nodes in the DOM, including element nodes, attribute nodes, and text nodes.

Here’s an example of a simple HTML document and its corresponding DOM tree:

<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>Welcome to My Page</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

            root node
              |
          html node
       /          \
head node     body node
             /         \
        h1 node      p node

Accessing DOM Elements

To access DOM elements in JavaScript, you can use the document object and various methods and properties.

The document.getElementById method allows you to access an element by its unique id attribute. Here’s an example of how to use document.getElementById:

var header = document.getElementById("header");

The document.getElementsByTagName method allows you to access a collection of elements by their tag name. Here’s an example of how to use document.getElementsByTagName:

var paragraphs = document.getElementsByTagName("p");

The document.getElementsByClassName method allows you to access a collection of elements by their class name. Here’s an example of how to use document.getElementsByClassName:

var highlighted = document.getElementsByClassName("highlighted");

You can also use the document.querySelector and document.querySelectorAll methods to access elements using CSS selectors. Here’s an example of how to use document.querySelector:

var header = document.querySelector("#header");

And here’s an example of how to use document.querySelectorAll:

var highlighted = 
document.querySelectorAll(".highlighted");

Modifying DOM Elements

Once you have access to a DOM element, you can modify its content and attributes using various methods and properties.

To modify the content of an element, you can use the innerHTML property. Here’s an example of how to use innerHTML:

header.innerHTML = "Welcome to My New Page";

To modify the attributes of an element, you can use the setAttribute method. Here’s an example of how to use setAttribute:

header.setAttribute("class", "new-class");

You can also use the style property to modify the CSS styles of an element. Here’s an example of how to use the style property:

header.style.color = "red";

Adding and Removing DOM Elements

The DOM allows you to add and remove elements from the document using various methods.

To add an element to the document, you can use the createElement method to create a new element and the appendChild method to append the element to an existing element. Here’s an example of how to add an element to the document:

var newParagraph = document.createElement("p"); 
newParagraph.innerHTML = "This is a new paragraph."; 
document.body.appendChild(newParagraph);

To remove an element from the document, you can use the removeChild method. Here’s an example of how to remove an element from the document:

document.body.removeChild(newParagraph);

Conclusion

The DOM is an essential part of JavaScript and enables you to create dynamic and interactive web pages. By understanding how to access and modify DOM elements, you’ll have the skills you need to create powerful and engaging web applications.

Exercises

To review these concepts, we will go through a series of exercises designed to test your understanding and apply what you have learned.

Use the document.getElementById method to access the element with the id “header” and change its innerHTML to “Welcome to My New Page”.

var header = document.getElementById("header");
header.innerHTML = "Welcome to My New Page";

Use the document.getElementsByTagName method to access all the p elements in the document and change their innerHTML to “This is a new paragraph.”

var paragraphs = document.getElementsByTagName("p");
for (var i = 0; i < paragraphs.length; i++) {
  paragraphs[i].innerHTML = "This is a new paragraph.";
}

Use the document.createElement and appendChild methods to add a new p element to the end of the body element.

var newParagraph = document.createElement("p");
newParagraph.innerHTML = "This is a new paragraph.";
document.body.appendChild(newParagraph);

Use the document.querySelector method to access the element with the class “highlighted” and change its style.color to “red”.

var highlighted = document.querySelector(".highlighted");
highlighted.style.color = "red";

Use the removeChild method to remove the element created in exercise 3 from the body element.

document.body.removeChild(newParagraph);