JavaScript DOM Elements
Working with individual HTML elements and their properties
🧩 What are DOM Elements?
DOM elements are individual HTML tags that you can access and modify with JavaScript. Each element has properties and methods you can use to change its content, style, and behavior.
// Get an element and work with its properties
let myElement = document.getElementById("demo");
myElement.innerHTML = "New content!";
myElement.style.color = "blue";
Element Properties
innerHTML
Get or set HTML content inside element
element.innerHTML = "<b>Bold text</b>"textContent
Get or set plain text content
element.textContent = "Plain text"style
Change CSS styles
element.style.color = "red"className
Get or set CSS classes
element.className = "highlight"🔹 innerHTML vs textContent
Understanding the difference between innerHTML and textContent:
<p id="demo1">Original text</p>
<p id="demo2">Original text</p>
<button onclick="useInnerHTML()">Use innerHTML</button>
<button onclick="useTextContent()">Use textContent</button>
<script>
function useInnerHTML() {
// innerHTML can add HTML tags
document.getElementById("demo1").innerHTML = "<b>Bold</b> and <i>italic</i> text";
}
function useTextContent() {
// textContent treats everything as plain text
document.getElementById("demo2").textContent = "<b>Bold</b> and <i>italic</i> text";
}
</script>Try it:
Original text
Original text
🔹 Changing Element Styles
You can change any CSS property using the style property:
let element = document.getElementById("myElement");
// Change colors
element.style.color = "red";
element.style.backgroundColor = "yellow";
// Change size
element.style.width = "200px";
element.style.height = "100px";
// Change text
element.style.fontSize = "20px";
element.style.fontWeight = "bold";
// Change position
element.style.margin = "10px";
element.style.padding = "15px";🔸 Interactive Style Changer:
<div id="styleDemo">Change my style!</div>
<button onclick="makeItBig()">Make Big</button>
<button onclick="makeItColorful()">Make Colorful</button>
<button onclick="resetStyle()">Reset</button>
<script>
function makeItBig() {
let element = document.getElementById("styleDemo");
element.style.fontSize = "30px";
element.style.fontWeight = "bold";
element.style.padding = "20px";
}
function makeItColorful() {
let element = document.getElementById("styleDemo");
element.style.color = "white";
element.style.backgroundColor = "purple";
element.style.borderRadius = "10px";
}
function resetStyle() {
let element = document.getElementById("styleDemo");
element.style = ""; // Reset all styles
}
</script>Try it:
🔹 Working with Attributes
Elements have attributes like id, class, src, href that you can get and set:
let element = document.getElementById("myLink");
// Get attribute values
let href = element.getAttribute("href");
let className = element.getAttribute("class");
// Set attribute values
element.setAttribute("href", "https://example.com");
element.setAttribute("class", "highlight");
// Remove attributes
element.removeAttribute("class");🔸 Practical Example:
<img id="myImage" src="image1.jpg" alt="Image 1">
<button onclick="changeImage()">Change Image</button>
<button onclick="changeAlt()">Change Alt Text</button>
<script>
function changeImage() {
let img = document.getElementById("myImage");
img.setAttribute("src", "image2.jpg");
}
function changeAlt() {
let img = document.getElementById("myImage");
img.setAttribute("alt", "This is the new alt text");
alert("Alt text changed to: " + img.getAttribute("alt"));
}
</script>🔹 Adding and Removing CSS Classes
Modern way to work with CSS classes using classList:
let element = document.getElementById("myElement");
// Add a class
element.classList.add("highlight");
// Remove a class
element.classList.remove("old-style");
// Toggle a class (add if not present, remove if present)
element.classList.toggle("active");
// Check if class exists
if (element.classList.contains("highlight")) {
console.log("Element has highlight class");
}🔸 Class Toggle Example:
<style>
.highlight {
background-color: yellow;
padding: 10px;
border: 2px solid orange;
}
</style>
<p id="toggleDemo">Click the button to toggle my style!</p>
<button onclick="toggleHighlight()">Toggle Highlight</button>
<script>
function toggleHighlight() {
let element = document.getElementById("toggleDemo");
element.classList.toggle("highlight");
}
</script>Try it:
Click the button to toggle my style!