DOM-JavaScript-basics

DOM JavaScript Basics

🚀 JavaScript DOM Navigation Practice This project explores the Document Object Model (DOM) tree and demonstrates how to navigate and manipulate HTML elements using parent-child relationships. Instead of selecting elements by ID or Class, this practice focuses on relative traversal.

📂 Files Included Dom.html: A simple webpage containing a navigation bar with five styled "box" elements.

dom.js: JavaScript logic that accesses the DOM tree to change the UI dynamically.

🧠 Core Concepts Covered Node vs. Element Navigation:

Used childNodes to see how browsers treat text (whitespace) and tags as nodes.

Used firstElementChild and lastElementChild to target specific HTML tags while ignoring empty text nodes.

Traversing the Tree:

Accessing the document.body to find the main container.

Drilling down from the parent

to its nested

children.

Dynamic Styling:

Demonstrated how to modify CSS properties through JavaScript by targeting the lastElementChild and changing its backgroundColor to yellow.