Module 30 : Selecting Elements In Javascript
📌 1. Introduction to the DOM
DOM (Document Object Model) is the structured representation of an HTML document. JavaScript can access and manipulate the DOM to:
Change content
Modify structure
Handle events
Example DOM:
html code
<body> <div id="main"> <h1 class="title">Hello JavaScript</h1> <p class="description">Learn how to select elements!</p> </div> </body>
In the above HTML, each tag is a DOM node. JavaScript can select and manipulate these nodes.
📌 2. Selection Methods in JavaScript
🔹 2.1 getElementById()
✅ Use:
Selects a single element by its ID. Returns one element or null.
📘 Syntax:
javascript code
document.getElementById("elementId");
🔍 Example:
javascript code
const heading = document.getElementById("main-heading"); heading.style.color = "blue";
📓 Notes:
ID must be unique.
Fastest selection method.
🔹 2.2 getElementsByClassName()
✅ Use:
Selects all elements with a given class name. Returns an HTMLCollection.
📘 Syntax:
javascript code
document. getElementsByClassName("className");
🔍 Example:
javascript code
const items = document.getElementsByClassName("menu-item"); items[0].style.color = "green";
📓 Notes:
HTMLCollection is array-like, not an actual array.
Use indexing to access elements.
Looping requires for or for...of.
🔹 2.3
getElementsByTagName()
✅ Use:
Selects elements by their tag name.
📘 Syntax:
javascript code
document.getElementsByTagName("tagName");
🔍 Example:
javascript code
const paragraphs = document.getElementsByTagName("p"); for (let p of paragraphs) { p.style.fontWeight = "bold"; }
🔹 2.4 querySelector()
✅ Use:
Returns the first element that matches a CSS selector.
📘 Syntax:
javascript code
document.querySelector("selector");
🔍 Example:
javascript code
const title = document.querySelector(".title"); title.innerText = "Updated Title";
📓 Notes:
Very flexible: Can select by ID, class, attribute, etc.
Returns the first match.
🔹 2.5 querySelectorAll()
✅ Use:
Returns all elements that match a CSS selector. Returns a NodeList.
📘 Syntax:
javascript code
document.querySelectorAll("selector");
🔍 Example:
javascript code
const listItems = document.querySelectorAll("ul li"); listItems.forEach(item => item.style.color = "purple");
📓 Notes:
NodeList supports forEach.
Similar to getElementsByClassName, but more powerful.
🧠 Research & Best Practices
Method
Use Case
Performance
Notes
getElementById
Unique element
Fastest
Use for IDs
getElementsByClassName
Multiple with same class
Fast
Older syntax
querySelector
Any CSS selector
Moderate
Modern, flexible
querySelectorAll
All matches
Moderate
Supports forEach
✅ Use querySelector and querySelectorAll in modern projects for their flexibility.
Exercises
✍️ Exercise 1:
html code
<h1 id="main-heading">Welcome</h1> <button onclick="changeHeading()">Click Me</button> <script> function changeHeading() { const heading = document.getElementById("main-heading"); heading.style.color = "red"; heading.innerText = "You clicked!"; } </script>
📝 Modify heading text and color when button is clicked.
✍️ Exercise 2:
html
code
<ul> <li class="item">Apple</li> <li class="item">Banana</li> <li class="item">Cherry</li> </ul> <script> const items = document.querySelectorAll(".item"); items.forEach(item => item.style.backgroundColor = "lightyellow"); </script>
📝 Change background of all items using querySelectorAll.
Tips:
Start by showing a simple HTML structure.
Explain the purpose of the DOM and JavaScript interaction.
Live code each method.
Emphasize the difference between:
querySelector vs getElementById
HTMLCollection vs NodeList
Encourage using browser dev tools to inspect and test selectors.
Suggested Questions:
What’s the difference between querySelectorAll and getElementsByClassName?
How would you select an element with multiple classes?
What happens if the ID doesn't exist?
🧠 Summary
Selector
Returns
Supports CSS Selector?
Use When
getElementById()
Single element
❌
You know the ID
getElementsByClassName()
HTMLCollection
❌
Many elements share a class
getElementsByTagName()
HTMLCollection
❌
Selecting by tag name
querySelector()
First match
✅
Flexible, modern selection
querySelectorAll()
NodeList
✅
Select all matching elements
🔚 Conclusion
Understanding how to select elements is foundational to DOM manipulation and dynamic web development . web pages and try various selection methods.
No comments:
Post a Comment