The DOM (Document Object Model) is a programming interface for web documents, representing the structure of a webpage as a tree of objects. When a web page is loaded, the browser parses the HTML and creates a DOM. The DOM allows JavaScript to interact with the webpage, modifying its content, structure, and style dynamically.
Think of the DOM as a live representation of the HTML document. Every HTML element (like a <div>
, <p>
, or <h1>
) becomes a node in the tree, and attributes (like id
or class
) become properties of those nodes.
In the DOM:
- The entire document is the root node (usually
<html>
). - HTML elements (tags) are the child nodes of the root.
- Text inside HTML elements is a text node (child of the element node).
Structure of the DOM Tree:
phpCopy code<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id="content">
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
</div>
</body>
</html>
The above HTML will be represented in the DOM as a tree of nodes, with each tag and content as a node that JavaScript can access and manipulate.
How to Manipulate the DOM in JavaScript
JavaScript provides various methods to access and manipulate the DOM. Here are some of the most common operations:
1. Accessing Elements
document.getElementById(id)
: Retrieves the element with the specifiedid
.javascriptconst element = document.getElementById('content');
document.getElementsByClassName(class)
: Retrieves a collection of elements with the specified class.javascriptconst elements = document.getElementsByClassName('my-class');
-
document.getElementsByTagName(tag)
: Retrieves all elements of a specific tag (e.g., all<p>
tags).javascriptCopy codeconst paragraphs = document.getElementsByTagName('p');
document.querySelector(selector)
: Retrieves the first element that matches a CSS selector.javascripconst firstParagraph = document.querySelector('p');
document.querySelectorAll(selector)
: Retrieves all elements that match a CSS selector.javascriptconst allDivs = document.querySelectorAll('div');
2. Modifying Content and Attributes
- Changing inner HTML: You can directly modify the content of an element.javascript e
const element = document.getElementById('content'); element.innerHTML = '<h2>New Heading</h2><p>New paragraph content.</p>';
- Changing text content: Use
textContent
to change only the text, not the HTML structure.javascriptconst heading = document.querySelector('h1'); heading.textContent = 'Updated Heading';
- Changing attributes: Use
.setAttribute()
or direct properties to modify an element’s attributes.javascriptconst img = document.querySelector('img'); img.setAttribute('src', 'new-image.jpg'); img.alt = 'Updated alt text';
3. Adding and Removing Elements
- Create new elements: Use
document.createElement()
to create new HTML elements.javascriptconst newDiv = document.createElement('div'); newDiv.textContent = 'This is a new div';
- Appending elements: Use
appendChild()
to add new elements to the DOM.javascriptconst container = document.getElementById('content'); container.appendChild(newDiv);
- Removing elements: Use
removeChild()
or.remove()
to delete elements from the DOM.javascriptconst paragraph = document.querySelector('p'); paragraph.remove(); // Removes the first paragraph
4. Modifying Styles
- Inline styles: You can directly modify the
style
property of an element.javascriptconst div = document.getElementById('content'); div.style.backgroundColor = 'lightblue'; div.style.color = 'white';
- Adding/Removing CSS classes: Use
classList
to add or remove CSS classes.javascriptconst div = document.getElementById('content'); div.classList.add('active'); // Adds 'active' class div.classList.remove('inactive'); // Removes 'inactive' class
5. Event Handling
You can attach event listeners to DOM elements so that they react to user interactions.
- Adding an event listener:javascript
const button = document.querySelector('button'); button.addEventListener('click', () => { alert('Button was clicked!'); });
- Removing an event listener:javascript
const handleClick = () => { alert('Button was clicked!'); }; button.removeEventListener('click', handleClick);
6. Traversing the DOM
You can navigate between nodes using properties like parentNode
, childNodes
, firstChild
, lastChild
, nextSibling
, etc.
- Example:
const parent = document.getElementById('content').parentNode; // Access parent node const firstChild = document.getElementById('content').firstChild; // Access first child
Leave a Reply