This content originally appeared on DEV Community and was authored by swetha palani
DOM (Document Object Model) is a programming interface for web documents.
It represents an HTML page as a tree structure where each node is an object.
WHAT IS HTML ELEMENT:
An HTML Element is everything between an opening tag < > and a closing tag </ >.
<p>Hello World</p>
DOM ELEMENT CHARACTERISTICS:
Properties → info about the element (example: id, className, innerHTML).
Methods → actions that can be performed (example: .click(), .appendChild()).
Events → reactions to user actions (example: onclick, onmouseover).
TYPES OF HTML ELEMENT:
Block-level elements – start on a new line, take full width => div, h1, p tags
Inline elements – stay in the same line, take only needed space => span , a, img tags
ACCESSING ELEMENT IN THE DOM :
getElementById() → by unique ID
getElementsByClassName() → by class name
getElementsByTagName() → by tag name
querySelector() → by CSS selector (first match)
querySelectorAll() → by CSS selector (all matches)
id Attribute
Used to give a unique name to an HTML element, No two elements should have the same id, Mainly used when we want to select a single specific element in JavaScript or CSS.
<h1 id="idclass"> DOM JS</h1>
<script>
document.getElementById("idclass").style.color="blue"
</script>
class attribute
Class attribute used group elements, you can using an same class name for multiple element.Manipulating class in javascript ,We usually use classList to work with classes.
<p class="para">HELLO</p>
<p class="para">WELCOME</p>
<script>
const a=document.getElementsByclassName("para");
console.log(a[0])
</script>
4 methods in class element for JS
- Add a class
- Remove a class
- Toggle a class (if present → remove, if absent → add)
Check if a class exists
Add a class
<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<p id="myText">Hello Swetha</p>
<button onclick="addClass()">Add Class</button>
<script>
function addClass(){
document.getElementById("myText").classList.add("highlight");
}
</script>
</body>
</html>
2 . Remove a Class
<!DOCTYPE html>
<html>
<head>
<style>
.big {
font-size: 30px;
}
</style>
</head>
<body>
<p id="myText" class="big">Hello Palani</p>
<button onclick="removeClass()">Remove Class</button>
<script>
function removeClass(){
document.getElementById("myText").classList.remove("big");
}
</script>
</body>
</html>
3 . Toggle a Class
<!DOCTYPE html>
<html>
<head>
<style>
.blue {
color: blue;
}
</style>
</head>
<body>
<p id="myText">Toggle Me!</p>
<button onclick="toggleClass()">Toggle Class</button>
<script>
function toggleClass(){
document.getElementById("myText").classList.toggle("blue");
}
</script>
</body>
</html>
2. getElementsByClassName() → by class name
document.getElementsByClassName(“className”) is a DOM method used to select all elements that have a specific class name.
<!DOCTYPE html>
<html>
<body>
<p class="mypara">This is first paragraph</p>
<p class="mypara">This is second paragraph</p>
<script>
let para = document.getElementsByClassName("mypara");
para[0].innerHTML = "Changed first paragraph";
para[1].innerHTML = "Changed second paragraph";
</script>
</body>
</html>
3. getElementsByTagName() → by tag name
document.getElementsByTagName(“tagname”) is a DOM method used to select all elements with the given HTML tag name.
Example tags: “p”, “h1”, “div”, “li”, etc.
<!DOCTYPE html>
<html>
<body>
<h1>Heading One</h1>
<h1>Heading Two</h1>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
<script>
let headings = document.getElementsByTagName("h1");
headings[0].style.color = "red"; // first h1 becomes red
headings[1].style.color = "blue"; // second h1 becomes blue
let paras = document.getElementsByTagName("p");
paras[0].innerHTML = "Changed first paragraph";
paras[1].innerHTML = "Changed second paragraph";
</script>
</body>
</html>
4. querySelector() → by CSS selector (first match)
document.querySelector(“CSS selector”)
Selects the first element that matches the given CSS selector.
If multiple elements match, it only picks the first one.
Very flexible → you can use id (#), class (.), or tag name just like CSS.
<!DOCTYPE html>
<html>
<body>
<h1 id="main">Main Heading</h1>
<p class="para">First paragraph</p>
<p class="para">Second paragraph</p>
<script>
document.querySelector("#main").style.color = "red";
document.querySelector(".para").innerHTML = "Changed only first paragraph";
document.querySelector("p").style.fontWeight = "bold";
</script>
</body>
</html>
This content originally appeared on DEV Community and was authored by swetha palani