The Document Object Model (DOM) is an application programming interface (API) for manipulating HTML documents. It represents the structure of a document as a tree-like structure, where each element in the HTML file is a node in the tree.
DOM manipulation
DOM (Document Object Model) manipulation refers to the process of dynamically altering the structure, content, or styling of a web page using JavaScript. Simply process of interacting with the DOM to change or modify an HTML document and CSS document.
The DOM represents the structured representation of a web document, and it allows developers to interact with and modify the content of a webpage in real-time.
Here’s a basic overview of how DOM manipulation works:
1. Selecting Elements: You start by selecting the HTML elements you want to manipulate using JavaScript. You can do this using various methods like getElementById, getElementsByClassName, getElementsByTagName, querySelector, and querySelectorAll.
2. Modifying Content: After selecting elements, you can change their content using properties like innerHTML or textContent. For example:
const element = document.getElementById('myElement');
element.innerHTML = 'New content';
Instead of use getElementById, getElementsByClassName, getElementsByTagName use querySelector
previous example using querySelector
const element = document.querySelector('#myElement');
element.innerHTML = 'New content';
3. Changing Attributes: You can modify attributes of elements using methods like getAttribute, setAttribute, and removeAttribute. For instance:
Ex: Changing attribute of `tag a`
const link = document.querySelector('a');
link.setAttribute('href', 'https://www.example.com');
4. Styling Elements: You can change CSS styles of elements using the style property. For example:
const element = document.querySelector('.myClass');
element.style.backgroundColor = 'blue';
5. Creating and Appending Elements: You can create new elements using document.createElement and then append them to the DOM using methods like appendChild or insertBefore. For instance:
const newParagraph = document.createElement('p');
newParagraph.textContent = 'This is a new paragraph.';
document.body.appendChild(newParagraph);
6. Event Handling: DOM manipulation often involves handling events like clicks, input changes, etc. You can attach event listeners to elements using methods like addEventListener. For example:
more about Event Handling….
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
console.log('Button clicked');
});
7. Removing Elements: You can remove elements from the DOM using the remove method or by manipulating their parent elements. For instance:
const elementToRemove = document.getElementById('toBeRemoved');
elementToRemove.remove();
