What is the DOM?
DOM (Document Object Model) represents your HTML page as a tree structure — where
each HTML element becomes an object that you can access and modify using JavaScript.
Example HTML:
<h1 id="title">Welcome!</h1>
You can use JavaScript to access and change this element dynamically.
1️getElementById()
Used to select an element by its id.
<h2 id="msg">Hello World</h2>
<script>
const element = [Link]("msg");
[Link](element); // prints <h2>Hello World</h2>
</script>
Use when: You know the element’s unique id.
2 querySelector()
Selects the first element that matches a CSS selector (id, class, or tag).
<p class="info">This is a paragraph.</p>
<script>
const para = [Link](".info");
[Link]([Link]); // This is a paragraph.
</script>
Use when: You want to select using CSS-style selectors like .class, #id, or tag.
3️innerHTML
Used to get or set the HTML content inside an element.
<div id="container">Old Content</div>
<script>
const div = [Link]("container");
[Link] = "<b>New Content Added!</b>";
</script>
Output on page: New Content Added! (in bold)
4️textContent
Used to get or set text only (no HTML formatting).
<p id="text">Hi <b>Students</b></p>
<script>
const p = [Link]("text");
[Link]([Link]); // Hi Students
[Link] = "Welcome to JavaScript!";
</script>
Output: Welcome to JavaScript!
Difference:
● innerHTML → changes HTML (tags included)
● textContent → plain text only
5 Changing Styles with JavaScript
You can modify CSS styles directly using the .style property.
<h3 id="heading">Change My Color</h3>
<script>
const h3 = [Link]("heading");
[Link] = "blue";
[Link] = "yellow";
[Link] = "24px";
</script>
The text becomes blue with a yellow background.
Summary Table
Method / Property Purpose Example
getElementById Select by ID [Link]("i
() d")
querySelector( Select first match (CSS style) [Link](".c
) lass")
innerHTML Get/set HTML content [Link] = "<b>Hi</b>"
textContent Get/set text only [Link] = "Hi"
.style Change CSS styles [Link] = "red"
What are DOM Events?
An event is an action that happens in the browser — like a click, typing, or form
submission.
We can use JavaScript to listen and respond to these events.
1️click Event
Triggered when the user clicks a button or element.
<button id="btn">Click Me</button>
<script>
const button = [Link]("btn");
[Link]("click", () => {
alert("Button clicked!");
});
</script>
When you click the button → shows an alert.
Used for: Buttons, menus, toggles, etc.
2️input Event
Triggered when the value of an input field changes (as user types).
<input type="text" id="nameInput" placeholder="Type your name">
<p id="output"></p>
<script>
const input = [Link]("nameInput");
const output = [Link]("output");
[Link]("input", () => {
[Link] = "Hello, " + [Link];
});
</script>
Output updates live as the user types.
Used for: Live previews, search boxes, validations.
3️submit Event
Triggered when a form is submitted.
<form id="loginForm">
<input type="text" placeholder="Username"><br>
<button type="submit">Submit</button>
</form>
<script>
const form = [Link]("loginForm");
[Link]("submit", (e) => {
[Link](); // stops page refresh
alert("Form submitted!");
});
</script>
Shows alert when form is submitted (without reloading).
Used for: Login, signup, feedback forms.
4 addEventListener()
Used to attach events to elements (instead of using inline HTML like onclick).
Syntax:
[Link]("eventName", function);
Example:
<h3 id="title">Hover over me!</h3>
<script>
const title = [Link]("title");
[Link]("mouseover", () => {
[Link] = "red";
});
[Link]("mouseout", () => {
[Link] = "black";
});
</script>
You can attach multiple events to the same element using addEventListener.
Summary Table
Event Triggered When Common Use
click User clicks an Buttons, links
element
input User types in a field Live typing, search
submit Form is submitted Form handling
addEventListen Adds event listener Attach multiple events
er()
