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  getElementByIdgetElementsByClassNamegetElementsByTagName    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', '');


4. Styling Elements: You can change CSS styles of elements using the style property. For example:

					const element = document.querySelector('.myClass'); = '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.';


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


Leave a Reply

Your email address will not be published. Required fields are marked *