Table of Contents
The Document Object Model (DOM) is a programming interface that provides a way for JavaScript to interact with HTML and XML documents. It represents the structure of the document as a tree-like model, where each element in the document is represented as a node in the tree. This allows JavaScript to access and manipulate the content and structure of a document dynamically.
What is the DOM?
The DOM stands for Document Object Model, which is a programming interface that represents an HTML or XML document as a tree-like model. In other words, the DOM is a structured representation of a web page, where each element of the page is represented as a node in a tree structure.
When a web page is loaded into a web browser, the browser creates a DOM tree that represents the document. Each HTML element, such as headings, paragraphs, images, and links, becomes a node in the tree. The root of the tree is the document object, which represents the entire HTML or XML document.
The DOM provides a way for web developers to access and manipulate the content and structure of a web page using programming languages like JavaScript. By using the DOM, developers can dynamically modify the content of a web page, add or remove elements, or respond to user interactions such as clicks and keyboard input.
The Document Object Model (DOM) is a programming interface that provides a way for JavaScript to interact with HTML and XML documents. It represents the structure of the document as a tree-like model, where each element in the document is represented as a node in the tree. This allows JavaScript to access and manipulate the content and structure of a document dynamically.
DOM tree
The root of the DOM tree is the document object, which represents the entire HTML document. The document object has child nodes, which represent the various elements in the HTML document such as the <html>, <head>, and <body> elements.
Each element in the HTML document is represented by an Element object in the DOM tree. An Element object has properties such as tagName, id, className, and innerHTML, which can be accessed and modified using JavaScript.
Elements can have child nodes, which can be other elements, text nodes, or comment nodes. Text nodes represent the text within an element, while comment nodes represent HTML comments.
For example, consider the following HTML code:
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<h1>Welcome to my webpage!</h1>
<p>This is my first paragraph.</p>
<p>This is my second paragraph.</p>
</body>
</html>The corresponding DOM tree for this HTML code would look something like this:
Document
└── html
├── head
│ └── title
│ └── "My Webpage"
└── body
├── h1
│ └── "Welcome to my webpage!"
├── p
│ └── "This is my first paragraph."
└── p
└── "This is my second paragraph."In this tree, the root node is the Document object, which has a single child node representing the <html> element. The <html> element has two child nodes, one representing the <head> element and one representing the <body> element. The <head> element has a single child node representing the <title> element, which in turn has a single child node representing the text “My Webpage”. The <body> element has three child nodes, one representing the <h1> element and two representing the <p> elements, each of which have a single child node representing the text within the element.
Properties of document object
The document object is a global object in JavaScript that represents the current HTML or XML document loaded in a web browser. It provides a variety of properties that allow developers to access and manipulate different aspects of the document.
Some of the most commonly used properties of the document object include:
- document.title: Gets or sets the title of the document.
- document.body: Gets the body element of the document.
- document.head: Gets the head element of the document.
- document.URL: Gets the URL of the current document.
- document.domain: Gets the domain of the current document.
- document.documentElement: Gets the root element of the document.
- document.forms: Gets a collection of all the forms in the document.
- document.images: Gets a collection of all the images in the document.
- document.links: Gets a collection of all the links in the document.
- document.styleSheets: Gets a collection of all the stylesheets in the document.
These properties can be used to access and manipulate different parts of the document, such as changing the title, adding or removing elements, or modifying the stylesheets.
Methods of document object
The document object in JavaScript provides a variety of methods that allow developers to interact with and manipulate the content and structure of an HTML or XML document loaded in a web browser. Some of the most commonly used methods of the document object include:
- getElementById(): Retrieves an element with the specified ID attribute.
- getElementsByClassName(): Retrieves a collection of elements with the specified class name.
- getElementsByTagName(): Retrieves a collection of elements with the specified tag name.
- createElement(): Creates a new HTML element with the specified tag name.
- appendChild(): Adds a new child node to an existing element.
- removeChild(): Removes a child node from an existing element.
- setAttribute(): Sets the value of a specified attribute for an element.
- getAttribute(): Gets the value of a specified attribute for an element.
- querySelector(): Retrieves the first element that matches a specified CSS selector.
- querySelectorAll(): Retrieves all elements that match a specified CSS selector.
These methods can be used to perform a wide range of tasks, such as dynamically adding or removing elements from the document, changing the attributes of existing elements, or selecting elements based on their ID, class, or tag name.
The Basics of JavaScript DOM
The DOM is a hierarchical structure that represents the web page in a tree-like manner. Each element in the DOM can have child elements, attributes, and text. The root element of the DOM is the HTML element, followed by the head and body elements.
To access the DOM, JavaScript provides the global object document. The document object is a representation of the current web page and provides methods and properties to manipulate the DOM. For example, to get the HTML element, we can use the following code:
const htmlElement = document.documentElement;Manipulating the DOM
One of the most common tasks when working with the DOM is manipulating its elements. We can use JavaScript to add, remove, or modify elements in the DOM.
To add an element to the DOM, we can use the createElement method to create a new element and the appendChild method to add it as a child of an existing element. For example, to add a new paragraph element to the body of the page, we can use the following code:
const newParagraph = document.createElement("p");
const textNode = document.createTextNode("Hello World!");
newParagraph.appendChild(textNode);
document.body.appendChild(newParagraph);To remove an element from the DOM, we can use the removeChild method to remove it from its parent element. For example, to remove a paragraph element with the ID “my-paragraph”, we can use the following code:
const myParagraph = document.getElementById("my-paragraph");
myParagraph.parentNode.removeChild(myParagraph);To modify an element in the DOM, we can use its properties to change its attributes or text. For example, to change the text of a paragraph element with the ID “my-paragraph”, we can use the following code:
const myParagraph = document.getElementById("my-paragraph");
myParagraph.textContent = "New text content";Event Handling in DOM
Event handling is an important part of working with the DOM. Events are actions or occurrences that happen in the browser, such as a user clicking a button or a page finishing loading. JavaScript can be used to detect and respond to events.
To handle an event, we can use the addEventListener method to register a function to be called when the event occurs. For example, to handle a click event on a button element with the ID “my-button”, we can use the following code:
const myButton = document.getElementById("my-button");
myButton.addEventListener("click", function() {
console.log("Button clicked");
});How to use JavaScript HTML DOM?
To use JavaScript HTML DOM, you need to have a basic understanding of JavaScript and HTML. Here are the steps to get started with JavaScript HTML DOM:
- Create an HTML document: First, create an HTML document that contains the elements you want to manipulate using JavaScript. You can create the document using any text editor or integrated development environment (IDE) such as Visual Studio Code, Sublime Text, or Atom.
- Link the JavaScript file: Next, link the JavaScript file to your HTML document using the script tag. The script tag should be placed in the head or body section of the HTML document.
- Write JavaScript code: Finally, write the JavaScript code to manipulate the HTML elements. You can use HTML DOM methods and properties to access and modify the elements.
Here is an example of JavaScript code that changes the text color of a button when a user hovers over it:
var button = document.getElementById("myButton");
button.addEventListener("mouseover", function() {
button.style.color = "red";
});Document Object Model Example
Let’s say we have the following HTML code:
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<h1>Welcome to my webpage!</h1>
<p>This is my first paragraph.</p>
<p>This is my second paragraph.</p>
<button>Click me!</button>
<script src="script.js"></script>
</body>
</html>We can use JavaScript to manipulate the elements in the HTML document. For example, we can add a new paragraph to the document using the DOM API:
// Get the body element
const body = document.querySelector('body');
// Create a new paragraph element
const newParagraph = document.createElement('p');
// Set the text content of the new paragraph
newParagraph.textContent = 'This is my third paragraph.';
// Append the new paragraph to the body element
body.appendChild(newParagraph);This code uses the DOM API to create a new paragraph element, set its text content, and append it to the body element of the HTML document. When this code is executed, a new paragraph will be added to the webpage.
We can also modify the text content of an existing element using the DOM API:
// Get the first paragraph element
const firstParagraph = document.querySelector('p');
// Change the text content of the first paragraph
firstParagraph.textContent = 'This is my updated first paragraph.';This code uses the DOM API to select the first paragraph element and change its text content. When this code is executed, the text of the first paragraph will be updated.
In summary, the DOM API allows us to manipulate the elements in an HTML document using JavaScript. We can create, modify, and delete elements as well as access and modify their properties.
Conclusion
In conclusion, the JavaScript DOM is a powerful tool for manipulating web pages. By understanding its basics, manipulating the DOM, and event handling, we can create dynamic and interactive web pages. We hope this article has provided you with a comprehensive overview of the JavaScript DOM and its capabilities.
