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);