1. Hero Section Update (getElementById)
Scenario
Homepage headline must change dynamically.
Code
<!DOCTYPE html>
<html>
<body>
<h1 id="hero-title">Old Title</h1>
<script>
document.getElementById("hero-title").innerText = "Build Your Future Today";
</script>
</body>
</html>
Explanation
getElementById directly grabs one element. Fast and precise.
2. Change Background Color
<div id="main-container">Content</div>
<script>
document.getElementById("main-container").style.backgroundColor = "lightblue";
</script>
Changes style using .style
3. Select All Product Cards (Class)
<div class="product-card">A</div>
<div class="product-card">B</div>
<script>
let products = document.getElementsByClassName("product-card");
console.log(products);
</script>
👉 Returns HTMLCollection (live list)
4. Highlight First Product
<script>
let items = document.getElementsByClassName("product-card");
items[0].style.border = "2px solid red";
</script>
5. Style All Paragraphs
<p>One</p><p>Two</p>
<script>
let p = document.getElementsByTagName("p");
for(let i=0;i<p.length;i++){
p[i].style.color = "gray";
}
</script>
6. Count Sections
<section></section>
<section></section>
<script>
console.log(document.getElementsByTagName("section").length);
</script>
7. querySelector (First Match)
<div class="card">Card</div>
<script>
document.querySelector(".card").style.border = "3px solid blue";
</script>
8. Update Navbar Title
<h2 id="navbar-title">Old</h2>
<script>
document.querySelector("#navbar-title").innerText = "New Brand";
</script>
9. Select All Messages
<div class="message">Hi</div>
<div class="message">Hello</div>
<script>
let msgs = document.querySelectorAll(".message");
msgs.forEach(m => console.log(m.innerText));
</script>
10. Highlight Notifications
<div class="notification">1</div>
<script>
document.querySelectorAll(".notification").forEach(n=>{
n.style.background="yellow";
});
</script>
11. Add ✔ to List
<ul>
<li>Item1</li>
<li>Item2</li>
</ul>
<script>
document.querySelectorAll("ul li").forEach(li=>{
li.innerText = "✔ " + li.innerText;
});
</script>
12. Resize Widget
<div class="dashboard">
<div class="widget">Box</div>
</div>
<script>
document.querySelector(".dashboard .widget").style.width="200px";
</script>
13. Input Placeholder Change
<input type="text">
<script>
document.querySelector('input[type="text"]').placeholder="Enter Name";
</script>
14. Checked Checkbox
<input type="checkbox" checked>
<script>
console.log(document.querySelectorAll("input:checked"));
</script>
15. First Child
<div id="news">
<p>First</p>
<p>Second</p>
</div>
<script>
document.querySelector("#news p:first-child").style.color="red";
</script>
16. Last Item Bold
<ul><li>A</li><li>B</li></ul>
<script>
document.querySelector("li:last-child").style.fontWeight="bold";
</script>
17. nth-child
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
document.querySelector("li:nth-child(3)").style.color="blue";
</script>
18. Data Attribute
<div data-role="admin">
Admin
</div>
<script>
document.querySelector('[data-role="admin"]').style.color="green";
</script>
19. Parent Selection
<div id="parent">
<p id="child">Text</p>
</div>
<script>
document.getElementById("child").parentElement.style.background="pink";
</script>
20. Next Sibling
<p id="one">One</p>
<p>Two</p>
<script>
document.getElementById("one").nextElementSibling.style.color="red";
</script>
21. Previous Sibling
<p>One</p>
<p id="two">Two</p>
<script>
document.getElementById("two").previousElementSibling.style.display="none";
</script>
22. Loop Children
<div id="box">
<p>A</p><p>B</p>
</div>
<script>
let children = document.getElementById("box").children;
for(let c of children){
c.style.color="purple";
}
</script>
23. Count Child Nodes
<div id="form">
<input><input>
</div>
<script>
console.log(document.getElementById("form").childElementCount);
</script>
24. Highlight Even Rows
<table>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
</table>
<script>
document.querySelectorAll("tr:nth-child(even)").forEach(r=>{
r.style.background="lightgray";
});
</script>
25. Open Links New Tab
<a href="#">Link</a>
<script>
document.querySelectorAll("a").forEach(a=>{
a.target="_blank";
});
</script>
26. Disable Buttons
<button onclick="disable()">Pay</button>
<script>
function disable(){
document.querySelectorAll("button").forEach(b=>b.disabled=true);
}
</script>
27. Collect Form Values
<input value="A"><input value="B">
<script>
document.querySelectorAll("input").forEach(i=>{
console.log(i.value);
});
</script>
28. Change Image
<img id="img" src="a.jpg">
<script>
document.getElementById("img").src="b.jpg";
</script>
29. Toggle Menu
<button onclick="toggle()">Menu</button>
<div id="menu">Items</div>
<script>
function toggle(){
document.getElementById("menu").classList.toggle("active");
}
</script>
30. To-Do App
<input id="task">
<button onclick="add()">Add</button>
<ul id="list"></ul>
<script>
function add(){
let text = document.getElementById("task").value;
let li = document.createElement("li");
li.innerText = text;
document.getElementById("list").appendChild(li);
}
</script>
Leave a Reply