Concept Notes: JavaScript – DOM & Events
🔹 1. What is DOM?
DOM (Document Object Model) is a programming interface that allows JavaScript to access and modify HTML and CSS content dynamically.
Think of it as a tree-like structure where every tag becomes a node.
Example:
<html>
<body>
<h1>Hello</h1>
<button>Click Me</button>
</body>
</html>The browser converts this into a DOM tree, and JS can access each node like:
document.querySelector("h1").innerText = "Hi!";🔹 2. DOM Methods
| Method | Purpose |
|---|---|
getElementById() | Select by ID |
getElementsByClassName() | Select elements by class |
querySelector() | Select first match of any CSS selector |
createElement(), appendChild() | Add new elements dynamically |
Example:
document.getElementById("title").innerText = "Updated!";🔹 3. Events in JavaScript
Events are actions that happen in the browser — like clicks, mouse movement, form submission, etc.
🔹 4. Common Events
| Event Type | Trigger Example |
|---|---|
onclick | When user clicks an element |
onmouseover | Hover over an element |
onkeyup | Keyboard key is released |
onsubmit | Form is submitted |
Example:
<button onclick="alert('Button clicked!')">Click Me</button>🔹 5. Event Listeners (Modern Way)
document.querySelector("button").addEventListener("click", function() {
alert("Clicked using listener!");
});🔹 6. DOM vs HTML
- HTML is static content.
- DOM is the live, interactive version JS can manipulate.
- Changes in DOM using JS don’t change original HTML file but affect user experience.
🔹 7. Real-World Example
Form validation, interactive quiz, dynamic popups — all powered by DOM + Events.
🧠 10 MCQs – JavaScript DOM & Events
1️⃣ What does DOM stand for?
A) Data Object Mode
B) Document Object Model
C) Digital Order Map
D) Document Orientation Management
2️⃣ Which method is used to select an element by ID?
A) getId()
B) queryId()
C) getElementById()
D) selectById()
3️⃣ What is the output of:
document.querySelector("h1").innerText = "Hi";A) Changes all h1
B) Changes first h1
C) Adds a new h1
D) Deletes h1
4️⃣ Which of the following is a valid event?
A) onrun
B) onclick
C) onprint
D) ondata
5️⃣ What is used to add an event listener?
A) onClick()
B) attachEvent()
C) addEventListener()
D) eventBind()
6️⃣ What is the DOM structure like?
A) Grid
B) Stack
C) Tree
D) Linked List
7️⃣ The method createElement() is used to:
A) Remove elements
B) Edit text
C) Create new elements
D) Delete CSS
8️⃣ DOM allows JS to:
A) Change server settings
B) Edit HTML/CSS dynamically
C) Compress files
D) Store in local DB
9️⃣ Which method selects an element using a CSS selector?
A) getCSS()
B) querySelector()
C) selectStyle()
D) cssSelect()
🔟 appendChild() is used to:
A) Delete an element
B) Add new child element
C) Style an element
D) Clone element
✅ Answer Key
| Q.No | Answer |
|---|---|
| 1 | B |
| 2 | C |
| 3 | B |
| 4 | B |
| 5 | C |
| 6 | C |
| 7 | C |
| 8 | B |
| 9 | B |
| 10 | B |
📖 Explanations
- Q1: DOM = Document Object Model.
- Q2:
getElementById()selects element by ID. - Q3:
querySelectorchanges the first matching element. - Q4:
onclickis a valid JS event. - Q5:
addEventListener()is the modern method. - Q6: DOM is tree-structured.
- Q7:
createElement()makes a new node. - Q8: DOM lets JS edit page dynamically.
- Q9:
querySelector()selects via CSS. - Q10:
appendChild()adds a node.
📥 Download Full Notes + MCQs
📲 Telegram – @learnnewthingsoffcial
PDF with examples + browser preview code.
💬 Comment Challenge
💬 Write a one-line JS code that changes an image’s
srcusing DOM.
