DOM (Document Object Model)
Understanding the DOM structure
Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the structure of a document as a tree-like object, with each node in the tree representing a different element of the document. The DOM provides a way for developers to access and manipulate the content, structure, and style of a document.
When a web page is loaded, the browser creates a DOM tree by parsing the HTML and XML code. Each element in the code is represented as a node in the tree, with parent and child relationships between nodes. For example, an HTML document might have a node for the entire document, a node for the head element, and a node for each of the body’s elements.
The DOM is used to create dynamic web pages. With the DOM, developers can use JavaScript to access and manipulate the elements of a web page. For example, you can use the DOM to change the text of a heading element, add a new element to the page, or change the style of an element.
The DOM provides a way for developers to access and manipulate the elements of a web page using a programming language like JavaScript. This is done through the use of DOM methods and properties.
For example, the “getElementById” method is used to access an element on the page by its id attribute, the “querySelector” method is used to access an element on the page by its CSS selector, and the “innerHTML” property is used to change the content of an element.
Additionally, the DOM provides events that can be used to respond to user actions. For example, the “on click” event can be used to respond to a user clicking on a button, and the “on mouseover” event can be used to respond to a user moving their mouse over an element.
The DOM also allows developers to create new elements and add them to the page. For example, you can use the “createElement” method to create a new element and the “appendChild” method to add it to the page.
The DOM also provides a way for developers to change the style of elements on the page. This is done using the “style” property of an element. For example, you can use the “style.color” property to change the color of text, and the “style. display” property to hide or show an element.
The DOM is important for creating dynamic web pages because it provides a way for developers to access and manipulate the elements of a web page using a programming language like JavaScript. This allows for the creation of interactive and dynamic web pages that respond to user actions and provide a more engaging user experience.
Here is an example of an HTML document and its corresponding DOM tree structure:
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to my website</h1>
<p>This is my personal website.</p>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</body>
</html>DOM Tree Structure
- html
- head
- title (text node: "My Web Page")
- body
- h1 (text node: "Welcome to my website")
- p (text node: "This is my personal website.")
- ul
- li (text node: "Home")
- li (text node: "About")
- li (text node: "Contact")In the above example, the HTML element is the root node of the tree. It has two child nodes, the head and body elements. The head element has a single child node, the title element. The body element has three child nodes, the h1, p, and ul elements. The ul element has three child nodes, the li elements.
The DOM allows developers to access and manipulate the elements of an HTML or XML document using a programming language like JavaScript. For example, you can use the DOM to change the text of a heading element, add a new element to the page, or change the style of an element.
DOM manipulation
This can be demonstrated by using JavaScript code to create new elements in the DOM, add or remove elements from the DOM, and modify their attributes and styles.
// Get a reference to an element on the page
const list = document.getElementById("list");
// Create a new list item
const newItem = document.createElement("li");
newItem.textContent = "Item 4";
// Add the new item to the list
list.appendChild(newItem);
// Remove the first item from the list
list.removeChild(list.firstChild);
// Modify the text content of the second item
const secondItem = list.children[1];
secondItem.textContent = "Item 2 (modified)";In this example, we use the getElementById method to get a reference to an unordered list with an id of “list”. Then, we use the createElement method to create a new li element, set its text content, and use the appendChild method to add it to the end of the list.
We then use the removeChild method to remove the first item from the list, and use the children property to get a reference to the second item and modify its text content.
Event handling
This can be demonstrated by using JavaScript code to attach event listeners to elements in the DOM and respond to events such as mouse clicks, key presses, and form submissions.
// Get a reference to a button element on the page
const button = document.getElementById("myButton");
// Define an event handler function
const handleClick = function() {
alert("Button was clicked!");
};
// Attach the event handler to the button
button.addEventListener("click", handleClick);In this example, we use the getElementById method to get a reference to a button with an id of “myButton”. Then, we define a function handleClick which displays an alert when called. Finally, we use the addEventListener method to attach the handleClick function to the click event on the button.
Every time the button is clicked, the handleClick function will be called and display an alert message to the user.
Traversing the DOM
This can be demonstrated by using JavaScript code to move up and down the DOM tree and select elements based on their position in the tree.
// Get a reference to an element on the page
const list = document.getElementById("list");
// Traverse the parent elements of the list
let current = list;
while (current.nodeName !== "BODY") {
console.log(current.nodeName);
current = current.parentNode;
}
// Traverse the children elements of the list
for (const child of list.children) {
console.log(child.textContent);
}In this example, we use the getElementById method to get a reference to an unordered list with an id of “list”. Then, we use a while loop to traverse the parent elements of the list and log the node name of each element.
We then use a for loop to traverse the children elements of the list and log the text content of each child element. This demonstrates how to traverse both the parent and child elements of an element in the DOM.
