Introduction #
DOM stands for Document Object Model, and it’s the tree-like structure that a browser creates from an HTML document. This structure can be manipulated using JavaScript. For example:
Given this HTML:
<body>
<h1>I am a heading</h1>
<p>This is a paragraph.</p>
</body>
The browser turns it into the following DOM:
<body>
├─ <h1>
└─ <p>
This DOM Tree is what JavaScript interacts with. You can use it to find, modify, delete, or add elements on the screen.
Example: Manipulating Elements with the DOM #
<button onclick="changeText()">Click me!</button>
<script>
function changeText() {
document.querySelector("button").innerText = "You clicked me!";
}
</script>
This code changes the button’s text when clicked, demonstrating how JavaScript can modify the DOM dynamically.