The Document Object Model (DOM) is a programming interface that browsers use to represent and interact with HTML documents. It provides a structured representation of the document as a tree of objects, enabling dynamic access and modification of content, structure, and styles of web pages.
HTML Document Object Model (DOM) Overview Syntax
Explanation of Syntax:
document: Refers to the current HTML document.getElementById("elementID"): This method retrieves the element with the specified ID. If the element is found, it can be manipulated through JavaScript.
While the DOM itself is not part of HTML syntax, it allows you to manipulate the HTML structure using JavaScript. Here’s a basic example of how to access an element in the DOM using JavaScript:
document.getElementById("elementID");HTML Document Object Model (DOM) Overview Example Code
Explanation of Code:
- The HTML document contains a heading (
<h1>) with the ID oftitleand a button. - When the button is clicked, the
changeText()JavaScript function is executed. - Inside the function,
document.getElementById("title").innerHTML = "Text Changed!";changes the content of the heading from “Hello, World!” to “Text Changed!”.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM Example</title>
</head>
<body>
<h1 id="title">Hello, World!</h1>
<button onclick="changeText()">Click Me!</button>
<script>
function changeText() {
document.getElementById("title").innerHTML = "Text Changed!";
}
</script>
</body>
</html>