DOM
--> The DOM (Document Object Model) is a programming interface for web documents.
--> It represents the structure of an HTML or XML document as a tree of objects.
--> With the DOM, developers can interact with and manipulate web pages dynamically using JavaScript.
--> The HTML DOM allows JavaScript to change the content of HTML elements.
How to find and access HTML elements in an HTML page?
- Finding HTML elements by id
Ex: id="intro"
const element = document.getElementById("intro");
- Finding HTML elements by tag name
Ex: <p>
const element = document.getElementsByTagName("p");
- Finding HTML elements by class name
Ex: class="intro"
const x = document.getElementsByClassName("intro");
- Finding HTML elements by CSS selectors
--> To find all HTML elements that match a specified CSS selector (id, class names, types, attributes, values of attributes, etc), use the querySelectorAll() method.
Ex:<p> elements with class="intro"
const x = document.querySelectorAll("p.intro");
- Finding HTML elements by HTML object collections
Nodes
Everything in the DOM is a node.For example-element, text, attribute.
Element Nodes:
--> Represents an HTML or XML element.
--> Examples: <div>, <p>, <h1>, <ul>, etc.
<h1>Hello, World!</h1>
In above example <h1> is an element node.
Text Node:
--> Represents the text content inside an element.
<h1>Hello, World!</h1>
The text Hello, World! inside the <h1> is a text node.
Creating New HTML Elements (Nodes):
1. Create an Element: Use the document.createElement() method to create an HTML element.
2. Create a Text Node: Use the document.createTextNode() method to create a text node.
3. Append Text to the Element: Use the appendChild() method to attach the text node to the created element.
4. Create a div Element: Use document.createElement() again to create a <div> element.
5. Insert the Element into the div: Use appendChild() to place the previously created element into the div.
6. Insert the div into the Document: Finally, append the div to the document body (or any other desired parent element).
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="para">
</div>
<script>
const elem = document.createElement("h1");
const text = document.createTextNode("payilagam");
elem.appendChild(text);
document.getElementById("para").appendChild(elem);
</script>
</body>
</html>
Output:
Changing HTML Style:
Syntax:
document.getElementById(id).style.property = new style
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body:hover{
cursor: pointer;
}
</style>
</head>
<body>
<div id="para" onclick="change()">
<h1>Payilagam</h1>
</div>
<script>
function change(){
para.style.color="red";
}
</script>
</body>
</html>
Output:
- Before click
- After click
Project: Random color generator
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<button id="btn" onclick="color()">Click</button>
<script>
function color(){
const colorchange = "rgb(" + Math.round(Math.random() * 255) + ", " + Math.round(Math.random() * 255) + ", " + Math.round(Math.random() * 255) + ")";
document.body.style.background = colorchange;
}
</script>
</body>
</html>
Output:
Top comments (0)