1. JavaScript DOM Manipulation

In JavaScript, functionsThe Document Object Model (DOM) represents the structure of an HTML document as a tree of objects, where each node is an HTML element, attribute, or text. JavaScript provides powerful ways to manipulate the DOM, allowing you to dynamically modify, add, or remove content from a web page. This is a key feature for making web pages interactive. can be stored as properties in an object, which is a powerful feature that allows for more dynamic behavior within objects. When a function is stored in an object, it is referred to as a method. Methods allow objects to perform actions related to their data.


2. Key Concepts of DOM Manipulation

1. Accessing DOM Elements

JavaScript allows you to access elements in the DOM using various methods:

  • getElementById(id): Selects an element by its id.
  • getElementsByClassName(className): Selects elements by their class name.
  • getElementsByTagName(tagName): Selects elements by their tag name.
  • querySelector(selector): Selects the first element that matches a CSS selector.
  • querySelectorAll(selector): Selects all elements that match a CSS selector.

Example:

				
					<div id="myDiv" class="myClass">Hello World</div> <script defer src="data:text/javascript;base64,DQogICAgY29uc3QgZWxlbWVudEJ5SWQgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnbXlEaXYnKTsNCiAgICBjb25zdCBlbGVtZW50QnlDbGFzcyA9IGRvY3VtZW50LmdldEVsZW1lbnRzQnlDbGFzc05hbWUoJ215Q2xhc3MnKTsNCiAgICBjb25zdCBlbGVtZW50QnlUYWcgPSBkb2N1bWVudC5nZXRFbGVtZW50c0J5VGFnTmFtZSgnZGl2Jyk7DQogICAgY29uc3QgZWxlbWVudEJ5UXVlcnkgPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCcjbXlEaXYnKTsNCg=="></script> 
				
			

2. Modifying DOM Elements

You can modify the content and attributes of HTML elements using JavaScript:

  • innerHTML: Change the HTML content of an element.
  • textContent: Change the text content of an element.
  • setAttribute(): Set an attribute on an element (e.g., src, href, etc.).
  • style: Directly modify the inline CSS styles of an element.
Example:
				
					<div id="message">Hello World</div> <script defer src="data:text/javascript;base64,DQogICAgY29uc3QgbWVzc2FnZURpdiA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdtZXNzYWdlJyk7DQogICAgLy8gQ2hhbmdlIHRleHQgY29udGVudA0KICAgIG1lc3NhZ2VEaXYudGV4dENvbnRlbnQgPSAnSGVsbG8gSmF2YVNjcmlwdCc7DQogICAgLy8gQ2hhbmdlIHRoZSBzdHlsZQ0KICAgIG1lc3NhZ2VEaXYuc3R5bGUuY29sb3IgPSAnYmx1ZSc7DQo="></script> 
				
			

3. Creating and Removing Elements

JavaScript can create new DOM elements, append them to the document, or remove existing elements.

  • createElement(tagName): Create a new element.
  • appendChild(): Append a new child element to a parent element.
  • removeChild(): Remove an element from its parent.
  • Example:

    				
    					<div id="list"></div> <script defer src="data:text/javascript;base64,DQogICAgY29uc3QgbGlzdERpdiA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdsaXN0Jyk7DQogICAgDQogICAgLy8gQ3JlYXRlIGEgbmV3IHBhcmFncmFwaCBlbGVtZW50DQogICAgY29uc3QgbmV3UGFyYWdyYXBoID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgncCcpOw0KICAgIG5ld1BhcmFncmFwaC50ZXh0Q29udGVudCA9ICdUaGlzIGlzIGEgbmV3IHBhcmFncmFwaCEnOw0KICAgIA0KICAgIC8vIEFwcGVuZCBpdCB0byB0aGUgbGlzdCBkaXYNCiAgICBsaXN0RGl2LmFwcGVuZENoaWxkKG5ld1BhcmFncmFwaCk7DQogICAgDQogICAgLy8gUmVtb3ZlIHRoZSBwYXJhZ3JhcGggYWZ0ZXIgMyBzZWNvbmRzDQogICAgc2V0VGltZW91dCgoKSA9PiB7DQogICAgICAgIGxpc3REaXYucmVtb3ZlQ2hpbGQobmV3UGFyYWdyYXBoKTsNCiAgICB9LCAzMDAwKTsNCg=="></script> 
    				
    			

    4. Event Handling

    DOM manipulation becomes more interactive with event handling. You can listen for user events such as clicks, key presses, form submissions, and more.

    • addEventListener(event, function): Attaches an event listener to an element.
    • Inline event handling using HTML attributes like onclick, though it is generally discouraged for maintainability.

    Example:

    				
    					<button id="btn">Click me</button>
    <div id="output"></div> <script defer src="data:text/javascript;base64,DQogICAgY29uc3QgYnV0dG9uID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2J0bicpOw0KICAgIGNvbnN0IG91dHB1dCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdvdXRwdXQnKTsNCiAgICANCiAgICAvLyBBZGQgYSBjbGljayBldmVudCBsaXN0ZW5lciB0byB0aGUgYnV0dG9uDQogICAgYnV0dG9uLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgZnVuY3Rpb24oKSB7DQogICAgICAgIG91dHB1dC50ZXh0Q29udGVudCA9ICdCdXR0b24gY2xpY2tlZCEnOw0KICAgIH0pOw0K"></script> 
    				
    			

    5. Traversing the DOM

    You can navigate through the DOM tree to find elements relative to other elements:

    • parentNode: Selects the parent node.
    • children: Gets the child elements.
    • nextSibling: Selects the next sibling node.
    • previousSibling: Selects the previous sibling node.

    Example:

    Example: Dynamic Content Update

    Here’s an example where clicking a button dynamically changes the content of a web page.
    				
    					<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>DOM Manipulation</title>
    </head>
    <body>
        <h1 id="title">Welcome!</h1>
        <button id="changeTitle">Change Title</button> <script defer src="data:text/javascript;base64,DQogICAgICAgIGNvbnN0IHRpdGxlID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3RpdGxlJyk7DQogICAgICAgIGNvbnN0IGJ1dHRvbiA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdjaGFuZ2VUaXRsZScpOw0KICAgICAgICANCiAgICAgICAgYnV0dG9uLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgZnVuY3Rpb24oKSB7DQogICAgICAgICAgICB0aXRsZS50ZXh0Q29udGVudCA9ICdUaXRsZSBDaGFuZ2VkISc7DQogICAgICAgICAgICB0aXRsZS5zdHlsZS5jb2xvciA9ICdyZWQnOw0KICAgICAgICB9KTsNCiAgICA="></script> </body>
    </html>
    
    				
    			

    In this example:

    • The button has an event listener that changes the text and style of the <h1> element when clicked.

    Conclusion

    DOM manipulation in JavaScript allows developers to dynamically interact with HTML content, create rich user interfaces, and make websites more responsive and interactive. By using methods like getElementById, createElement, and addEventListener, you can access, modify, and update elements on the fly, enabling real-time interaction on your web pages.
    ×