What is getElementById()?
- It is used to select a single HTML element using its unique id attribute.
- Returns an Element object if a match is found; otherwise, it returns null.
<h1 id="title">Hello</h1>
let el = document.getElementById("title");
console.log(el);
Output :
<h1 id="title">Hello</h1>
Changing content :
el.textContent = "Hello, JavaScript!";
el.innerText = "Hi!";
el.innerHTML = "<b>How</b>";
Changing Style :
el.style.color ="red";
el.style.backgroundColor ="yellow";
document.body.style.backgroundColor = "black";
Adding Event :
<body>
<h1 id="title">Hello</h1>
<button id="btn">click</button>
<script>
let el = document.getElementById("title");
let btn = document.getElementById("btn");
btn.addEventListener("click", () => {
el.innerText ="Wecome!";
});
</script>
</body>
What is getElementByClassName?
- It selects all elements that have a given class name.
- Return HTMLCollection (array-like collection).
<body>
<h1 class="title">Hello</h1>
<h1 class="title">Welcome</h1>
<script>
let el = document.getElementsByClassName("title");
console.log(el);
console.log(el[0]);
console.log(el[1]);
</script>
</body>
Output :
HTMLCollection(2) [h1.title, h1.title]
<h1 class="title">Hello</h1>
<h1 class="title">Welcome</h1>
<body>
<h1 class="title">Hello</h1>
<h1 class="title">Welcome</h1>
<h1 class="title">GoodMorning</h1>
<script>
let el = document.getElementsByClassName("title");
for(let i=0; i<el.length; i++)
{
console.log(el[i].innerText);
}
</script>
</body>
Output :
Hello
Welcome
GoodMorning
Changing content :
el[0].innerText = "Hi";
el[1].innerText = "GoodMorning";
Changing Style :
- It returns multiple elements so it cannot be styled directly,It has to be updated using loop.
<body>
<button id="btn">Change Style</button>
<p class="box">Hello</p>
<p class="box">World</p>
<script>
const btn = document.getElementById("btn");
const items = document.getElementsByClassName("box");
btn.addEventListener("click", () => {
for (let item of items) {
item.style.color = "green";
}
});
</script>
</body>
What is getElementsByTagName?
- It selects all elements with a given HTML tag.
- It returns HTMLCollection (array-like).
<body>
<p>Hello</p>
<p>World</p>
<script>
let items = document.getElementsByTagName("p");
console.log(items);
</script>
</body>
Output:
HTMLCollection(2) [p, p]
<body>
<p>Hello</p>
<p>World</p>
<script>
let items = document.getElementsByTagName("p");
for(let item of items)
{
console.log(item.innerText);
}
</script>
</body>
Changing Style :
<body>
<p>Hello</p>
<p>World</p>
<script>
let items = document.getElementsByTagName("p");
for (let item of items) {
item.style.backgroundColor = "yellow";
}
</script>
</body>
- Cannot directly attach events to collection:
- This is wrong
const btn = document.getElementsByTagName("button");
btn.addEventListener("click", () => {
console.log("clicked");
});
Fix 1: Access a Single Button
const btn = document.getElementsByTagName("button")[0];
btn.addEventListener("click", () => {
console.log("clicked");
});
Fix 2: Loop Through All Buttons
const btns = document.getElementsByTagName("button");
for (let btn of btns) {
btn.addEventListener("click", () => {
console.log("clicked");
});
}
What is querySelector()?
- It selects the first element that matches a CSS selector.
- It returns single element. Null if not found.
- If multiple elements match, It returns ONLY the first one.
<body>
<h1 id="title">Hello</h1>
<p class="text">World</p>
<script>
const el = document.querySelector("#title")
const ele = document.querySelector(".text")
const elem = document.querySelector("p")
console.log(el.innerText)
console.log(ele.innerText)
console.log(elem.innerText)
</script>
</body>
Select by ID:
const el = document.querySelector("#title")
Select by Class:
const ele = document.querySelector(".text")
Select by Tag:
const elem = document.querySelector("p")
Changing Style :
ele.style.color = "red"
Adding Event :
<body>
<button>click</button>
<script>
const btn = document.querySelector("button");
btn.addEventListener("click", () => {
alert("Clicked!");
});
</script>
</body>
Top comments (0)