Topic
DOM ( Document Object Model )
1. Introduction
• DOM (Document Object Model) is an interface that represents the
structure of an HTML document as a tree of objects.
• Each HTML element is created as an object, allowing JavaScript to
access, modify, and manipulate webpage content dynamically.
• DOM is a tree-like structure with a root node (document).
• JavaScript interacts with the DOM to dynamically update content,
structure, and style.
2. Selector
• DOM provides multiple methods to select elements from an HTML
document.
a. getElementById() – Selects an element by its id.
b. getElementsByClassName() – Selects elements by class.
c. getElementsByTagName() – Selects elements by their tag.
d. querySelector() – Selects the first matching element using a CSS
selector.
e. querySelectorAll() – Selects all matching elements using a CSS
selector.
3. Change Content
a. Change Text
• innerText: Changes only the visible text of an element.
• textContent: Changes all text content, including hidden text.
b. Change HTML
• innerHTML: Changes the HTML content of an element.
4. Change Style
• The style property allows JavaScript to dynamically change CSS
properties of an element.
5. Change Attribute
• Set Attribute
o Definition: Adds a new attribute or changes the value of an
existing attribute of an element.
o Syntax: [Link](attributeName, value)
• Change Attribute
o Definition: Changing an existing attribute's value directly.
o Syntax: [Link] = value
• Get Attribute
o Definition: Retrieves the value of a specified attribute of an
element.
o Syntax: [Link](attributeName)
• Remove Attribute
o Definition: Removes a specified attribute from an element.
o Syntax: [Link](attributeName)
6. Events
a. Mouse Event
i. Click
• Definition: Triggered when the user clicks on an
element.
• Syntax: [Link]('click', callback)
ii. Mouse Down
• Definition: Triggered when the mouse button is pressed
down on an element.
• Syntax: [Link]('mousedown',
callback)
iii. Mouse Up
• Definition: Triggered when the mouse button is
released.
• Syntax: [Link]('mouseup', callback)
iv. Mouse Over
• Definition: Triggered when the mouse enters the
boundaries of an element.
• Syntax: [Link]('mouseover',
callback)
v. Mouse Out
• Definition: Triggered when the mouse leaves the
boundaries of an element.
• Syntax: [Link]('mouseout',
callback)
vi. Scroll
• Definition: Triggered when the user scrolls an element.
• Syntax: [Link]('scroll', callback)
b. Keyboard Event
i. Key Down
• Definition: Triggered when a key is pressed down.
• Behavior: Fires repeatedly if the key is held down.
• Syntax: [Link]('keydown', callback)
ii. Key Press ( Deprecated in Modern Browsers )
• Definition: Triggered when a key is pressed and
produces a character value.
• Behavior: Does not capture non-character keys (e.g.,
Shift, Ctrl).
• Syntax: [Link]('keypress', callback)
iii. Key Up
• Definition: Triggered when a key is released.
• Behavior: Fires once after the key is released.
• Syntax: [Link]('keyup', callback)
c. Browser Event
i. Load
• Definition: Triggered when the entire page, including all
resources (images, scripts, stylesheets), has fully
loaded.
• Behavior: Ensures that everything on the page is ready
for interaction.
• Syntax: [Link]('load', callback)
ii. DOMContentLoaded
• Definition: Triggered when the initial HTML document
has been fully loaded and parsed, but before images,
styles, and subresources are fully loaded.
• Behavior: Fires earlier than load and is used when you
only need the DOM to be ready.
• Syntax:
[Link]('DOMContentLoaded',
callback)
iii. Unload
• Definition: Triggered when the user is leaving the page
(e.g., navigating away or closing the tab).
• Behavior: Used to clean up resources or warn users
about unsaved changes.
• Syntax: [Link]('unload', callback)
7. Manipulate Element
a. Create Element
• Definition: Creates a new HTML element in the DOM.
• Syntax: [Link]('tagName')
Example
• Before Script
• Script
• After Script Applying
b. Set/Add Element
i. Append ()
• Definition: Adds an element as the last child of a parent
element.
• Syntax: [Link](element)
Example
• Before Script
• Script
• After Script Applying
ii. Prepend ()
• Definition: Adds an element as the first child of a parent
element.
• Syntax: [Link](element)
Example
• Before Script
• Script
• After Script Applying
iii. After ()
• Definition: Inserts a new element immediately after a
reference element.
• Syntax: [Link](newElement)
Example
• Before Script
• Script
• After Script Applying
iv. InsertAdjacentHTML ()
• Definition: Inserts an HTML string at a specified position
relative to an element.
• Syntax: [Link]('position', 'HTML')
Example
• Before Script
• Script
• After Script Applying
c. Remove/Change Element
i. RemoveChild ()
• Definition: Removes a child element from its parent.
• Syntax: [Link](childElement)
Example
• Before Script
• Script
• After Script Applying
ii. ReplaceChild ()
• Definition: Replaces a child element with a new one.
• Syntax: [Link](newElement, oldElement)
Example
• Before Script
• Script
• After Script Applying
d. Element With Class
i. [Link]()
• Definition: Adds one or more class names to an
element.
• Syntax: [Link]('className')
ii. [Link]()
• Definition: Removes one or more class names from an
element.
• Syntax: [Link]('className')
iii. [Link]()
• Definition: Replaces an existing class with a new class.
• Syntax: [Link]('oldClass',
'newClass')
Example
• Before Script
• Script
• After Script Applying
Task
1. Create To Do List
