JavaScript HTML DOM
The HTML DOM serves as a blueprint for webpages, outlining their structure and individual elements, using JavaScript it can dynamically access and modify the content, structure, and style of a webpage. We can access, modify, and delete the HTML elements via JavaScript.
Table of Content
- What is DOM?
- Features of JavaScript DOM
- What is HTML DOM?
What is DOM?
The DOM ( Document Object Model) is a universal language for web documents such as HTML, XML, and SVG. The JavaScript HTML DOM represents an HTML document as a tree-like structure, where elements, attributes, and text are nodes. Through the DOM, It allows developers to interact with individual document parts, enabling dynamic updates and manipulation.
Features of JavaScript DOM
- Tree Structure: The DOM is organized like a family tree, with elements having parent and child relationships, it is easy to find and change things based on their positions.
- Element Access: You can use different methods like getElementById, getElementsByTagName, and querySelector to access specific elements on a webpage.
What is HTML DOM?
- HTML DOM stands for HTML Document Object Model.
- It is a programming interface for web documents.
- It represents the structure of an HTML document as a tree of objects.
- With the HTML DOM, JavaScript can access and manipulate all elements of an HTML document.
Example: This example shows the accessing the JavaScript HTML DOM by id.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Accessing the JavaScript
HTML DOM by id
</title>
</head>
<body>
<h1 id="demo">This is some text.</h1>
<button onclick="changeText()">
Change Text
</button>
<script>
function changeText() {
let element = document.getElementById("demo");
element.textContent = "Text changed by JavaScript!";
}
</script>
</body>
</html>
Output:
Contact Us