In ECET 2026 Web Technologies, DOM (Document Object Model) and JavaScript Events are guaranteed topics. Questions are mostly conceptual with small code snippets.
📘 Concept Notes
🌐 What is DOM?
- DOM (Document Object Model): A programming interface for HTML/XML documents.
- It represents the document as a tree structure (nodes and objects).
- Every HTML element is a node in the DOM.
Example DOM Tree:
<html>
<body>
<h1>Hello</h1>
<p>Welcome</p>
</body>
</html><html>→ Root Node<body>→ Child Node<h1>,<p>→ Leaf Nodes
⚙️ DOM Methods in JavaScript
Some important DOM methods:
document.getElementById("id")→ Access element by IDdocument.getElementsByClassName("class")→ Access elements by classdocument.querySelector("selector")→ Access first matching elementelement.innerHTML→ Get/Set HTML contentelement.style.property→ Change CSS style
🎛 JavaScript Events
Events: Actions that occur in the browser (user interaction or system-generated).
Common Events:
onclick→ when user clicks an elementonmouseover→ when mouse hoversonkeydown→ when key is pressedonchange→ when input changesonload→ when page is loaded
Example – Button Click Event:
<button onclick="greet()">Click Me</button>
<script>
function greet() {
alert("Hello, ECET Aspirant!");
}
</script>📐 Example – DOM + Event Combined
<input type="text" id="uname" placeholder="Enter name">
<button onclick="showName()">Submit</button>
<p id="output"></p>
<script>
function showName() {
let name = document.getElementById("uname").value;
document.getElementById("output").innerHTML = "Welcome " + name;
}
</script>👉 When user types name and clicks Submit, the text updates dynamically.
🔋 Formula Representation (Generalized)
For DOM traversals, tree nodes conceptually follow:
🔟 10 Expected MCQs – ECET 2026
Q1. DOM stands for:
A) Document Object Model
B) Data Object Method
C) Document Oriented Module
D) Digital Object Model
Q2. In DOM, HTML is represented as:
A) List
B) Array
C) Tree
D) Table
Q3. Which DOM method selects element by ID?
A) getElementByName()
B) getElementById()
C) querySelectorAll()
D) getById()
Q4. Which property is used to change element content?
A) innerHTML
B) text
C) value
D) write()
Q5. Which event triggers when a button is clicked?
A) onhover
B) onclick
C) onchange
D) onpress
Q6. The root of DOM tree is:
A) body
B) html
C) head
D) document
Q7. Which event is fired when page is loaded?
A) onopen
B) onload
C) onenter
D) onstart
Q8. Which DOM method selects first matching CSS selector?
A) querySelector()
B) getElementsByClassName()
C) getElementByTagName()
D) getElement()
Q9. In DOM, attributes are also considered as:
A) Elements
B) Nodes
C) Properties
D) Classes
Q10. Which event fires when user presses a key?
A) onkeypress
B) onkeydown
C) onkeyup
D) All of the above
✅ Answer Key
| Q.No | Answer |
|---|---|
| Q1 | A |
| Q2 | C |
| Q3 | B |
| Q4 | A |
| Q5 | B |
| Q6 | B |
| Q7 | B |
| Q8 | A |
| Q9 | B |
| Q10 | D |
🧠 Explanations
- Q1 → A: DOM = Document Object Model.
- Q2 → C: DOM structure = tree.
- Q3 → B:
getElementById("id")is correct. - Q4 → A:
innerHTMLmodifies content. - Q5 → B:
onclickevent used for clicks. - Q6 → B: Root node is
<html>. - Q7 → B:
onloadfires on page load. - Q8 → A:
querySelector()selects first match. - Q9 → B: In DOM, attributes are nodes.
- Q10 → D: Key events include keydown, keyup, keypress.
🎯 Why Practice Matters
- DOM and Event-based questions are directly asked in Web Tech part.
- Easy to secure 2–3 marks by remembering common methods and event names.
- Practicing small code snippets gives confidence in both theory + lab exam.
