{
  "$type": "site.standard.document",
  "bskyPostRef": {
    "cid": "bafyreiev2u4wafpnjalxdblwiz6uw54omr3vprcjkgu4bpn3jyi3xuu54q",
    "uri": "at://did:plc:25rdn5elo5izoxrmtis34zuk/app.bsky.feed.post/3mokd6iaifcb2"
  },
  "coverImage": {
    "$type": "blob",
    "ref": {
      "$link": "bafkreig3hu2cbrpx7r7rbmcsd374logbxmzbsrvrwu676fzg2j2fndt7au"
    },
    "mimeType": "image/webp",
    "size": 269338
  },
  "path": "/sharique_siddiqui_8242dad/intermediate-dom-manipulation-traversing-and-event-delegation-8pg",
  "publishedAt": "2026-06-18T07:30:00.000Z",
  "site": "https://dev.to",
  "tags": [
    "javascript",
    "intermediate",
    "webdev",
    "frontend",
    "YouTubePlaylist",
    "CodenCloud"
  ],
  "textContent": "The DOM (Document Object Model) is the backbone of modern web development, allowing JavaScript to interact dynamically with HTML documents. While basic DOM manipulation involves simple element selection and modification, intermediate techniques like DOM traversal and event delegation unlock powerful ways to efficiently handle complex user interfaces and interactions.\n\nIn this post, we’ll explore:\n\n  * How to traverse the DOM tree effectively\n  * What event delegation is and why it’s useful\n\n\n\n####  Understanding DOM Traversal\n\nThe DOM is organized as a tree structure, with nodes representing elements, text, and more. Traversing the DOM means navigating through this tree — moving up to parents, down to children, or sideways to siblings — to select or manipulate elements relative to others.\n\n####  Essential Traversal Properties\n\nEvery node in the DOM has relationships defined by properties:\n\n  * **parentNode / parentElement** : Access the node’s parent.\n  * **children** : Returns an HTMLCollection of the node’s child elements (ignores text/comment nodes).\n  * **childNodes** : Returns all child nodes, including text and comments.\n  * **firstChild / lastChild** : Access the first and last child node.\n  * **firstElementChild / lastElementChild** : Get the first and last element child (ignores text nodes).\n  * **nextSibling / previousSibling** : Access adjacent sibling nodes (including text).\n  * **nextElementSibling / previousElementSibling** : Access adjacent sibling elements only.\n\n\n\n####  Example: Traversing Up, Down, and Sideways\n\n\n    js\n    const listItem = document.querySelector('li');\n    const parent = listItem.parentNode;            // Moves up to parent\n    const firstChild = parent.firstElementChild;   // Moves down to first child element\n    const nextSibling = listItem.nextElementSibling; // Moves sideways to next sibling element\n\n    console.log(parent);\n    console.log(firstChild);\n    console.log(nextSibling);\n\n\n####  Why Use DOM Traversal?\n\n  * To find elements relative to another element (e.g., a button inside a card)\n  * To manipulate or extract data dynamically from complex nested HTML\n  * To implement dynamic UIs with reusable patterns without querying the entire document repeatedly\n\n\n\n####  Event Delegation: Efficient Event Handling\n\nWhen you have many similar elements (like list items, buttons, or cards), attaching separate event listeners to each can hurt performance and bloat memory usage.\n\nEvent delegation is a pattern where you attach a single event listener to a common ancestor element. Thanks to event bubbling, events triggered on child elements propagate up the tree, allowing the ancestor to detect and respond to events on any of its descendants.\n\n####  How Event Delegation Works\n\n#####  Instead of:\n\n\n    js\n    document.querySelectorAll('button').forEach(button => {\n      button.addEventListener('click', () => {\n        console.log('Button clicked!');\n      });\n    });\n\n\n#####  Use:\n\n\n    js\n    document.querySelector('#container').addEventListener('click', (event) => {\n      if (event.target.tagName === 'BUTTON') {\n        console.log('Button clicked:', event.target.textContent);\n      }\n    });\n\n\nHere, only one listener on the parent div `#container` handles clicks from any button inside it.\n\n####  Benefits\n\n  * **Improved performance** : fewer event listeners\n  * **Dynamic handling** : works for elements added later after initial page load\n  * **Cleaner code** : central place to handle multiple child elements’ events\n\n\n\n####  Putting It All Together: Example\n\n\n    xml\n    <ul id=\"todo-list\">\n      <li>Task 1 <button class=\"delete-btn\">Delete</button></li>\n      <li>Task 2 <button class=\"delete-btn\">Delete</button></li>\n      <li>Task 3 <button class=\"delete-btn\">Delete</button></li>\n    </ul>\n\n\n\n    js\n    const todoList = document.getElementById('todo-list');\n\n    todoList.addEventListener('click', function(event) {\n      // Check if a delete button was clicked\n      if (event.target.classList.contains('delete-btn')) {\n        const listItem = event.target.parentElement;  // Traverse up to the <li>\n        listItem.remove(); // Remove the entire list item\n      }\n    });\n\n\n#####  In this example:\n\n  * Event delegation handles deleting any item.\n  * DOM traversal (`parentElement`) finds the correct ancestor element to remove.\n\n\n\n####  Final Thoughts\n\nConcept | Description | Example Key Methods/Properties\n---|---|---\nDOM Traversal | Navigate parent, children, siblings in DOM tree |  `parentNode`, `children`, `nextElementSibling`\nEvent Delegation | Use a single listener on a parent to catch child events |  `element.addEventListener()`, `event.target`\n\nMastering these techniques allows you to write more efficient, scalable, and maintainable JavaScript for interactive web apps.\n\nStay tuned for more insights as you continue your journey into the world of web development!\n\nCheck out theYouTubePlaylist for great JavaScript content for basic to advanced topics.\n\nPlease Do Subscribe Our YouTube Channel for clearing programming concept and much more ...CodenCloud",
  "title": "Intermediate DOM Manipulation: Traversing and Event Delegation"
}