JavaScript
DOM and Events
CS200: Web Development
Tunis Business School - 2023/2024
Outline
Browser
The DOM
events
The DOM
What is DOM?
Document Object Model
DOM is an interface that represents the structure of a
document in a tree-like format, allowing programming
languages like JavaScript to manipulate its elements..
Structure of DOM
Tree-like • HTML documents are represented
as a tree structure with nodes.
Structure
• Elements, attributes, and text
Nodes within the HTML document are
nodes in the DOM tree.
Structure of DOM
<!DOCTYPE html>
<html>
<head>
<title>
DOM Example
</title>
</head>
<body>
<h1>Hello, DOM!</h1>
<p>This is a paragraph.</p>
</body>
</html>
https://fritscher.ch/dom-css/
Structure of DOM
Each document can have only one
document element.
In an HTML document, the document
element is the <html> element.
Node Types in DOM
Element Nodes • Represent HTML elements like <div>, <p>, etc.
Attribute Nodes • Represent HTML attributes within elements.
Text Nodes • Contain the text within elements.
Comment Nodes • Represent comments within HTML.
Accessing DOM elements
getElementById • Returns an element with a specific ID.
• Returns a collection of elements with a specific class
getElementsByClassName
name.
• Returns the first element that matches a specified
querySelector
CSS selector.
• Returns a collection of elements that match a
querySelectorAll
specified CSS selector.
Techniques for DOM Manipulation
Changing Text Content • Altering the text content of elements.
Modifying Attributes • Changing or setting attributes of elements.
Adding and Removing • Dynamically adding or removing elements from the
Elements DOM.
Styling Elements • Changing CSS styles and classes
Techniques for DOM Manipulation
Creating new var newDiv = document.createElement("div");
Elements
Adding text to newDiv.textContent = "Newly added div";
elements
Adding HTML newDiv.innerHTML = '<p>Created new element
Snippets to elements with innerHTML</p>';
Techniques for DOM Manipulation
Adding element to parentNode.appendChild(childNode);
the parent node
Removing document.body.removeChild(newDiv);
Elements
newDiv.style.backgroundColor =
Updating Styles "lightblue";
Examples of DOM
Manipulation
Browser Events
Introduction to Browser Events
Browser events are user or browser-generated
occurrences (e.g., clicks, keystrokes, page loads)
that JavaScript can detect and respond to.
Enable interactivity and responsiveness in web
applications.
Common Event Types
UI Events • load, unload, resize, scroll, etc.
Keyboard Events • keydown, keyup, keypress, etc.
Mouse Events • click, mouseover, mouseout, etc.
Form Events • submit, reset, change, etc.
Common Input Field Events
input event: • Fired when the value of an input field changes.
• Triggered when the value of an input field changes
change event: and focus moves away.
focus event: • Occurs when an input field gets focus.
blur event: • Fired when an input field loses focus
Handling Events
Inline Event • Event handlers specified within HTML
Handling attributes.
Using • Preferred method for attaching events
addEventListener dynamically.
Event Handler • Directly assigning functions to event
Properties handler properties.
Inline Event Handling
<button onclick="console.log('Clicked!')">Click Me</button>
Using addEventListener
const myElement =
document.getElementById('myElement');
myElement.addEventListener('mouseover', () => {
console.log('Mouse Over Element!');
});
Handling Multiple Events
const inputField =
document.getElementById('textInput');
inputField.addEventListener('input', () => {
console.log('Text Changed!');
});
inputField.addEventListener('focus', () => {
console.log('Input Field Focused!');
});
Event Handler Properties
const myButton =
document.getElementById('myButton');
myButton.onclick = function() {
console.log('Button Clicked!');
};
Pros and Cons of Each Method
Inline Event • Simple but not recommended for
Handling maintainability and separation of concerns.
• Provides flexibility and better separation of
addEventListener JavaScript and HTML.
Event Handler • Limited to one handler per event and can be
Properties overwritten
Best Practices for Event Handling
Prefer • Use for better code organization and
addEventListener scalability.
Separation of • Keep JavaScript separate from HTML
Concerns for maintainability.
Avoid Event • Due to limitations and overwrite
Handler Properties issues.
Examples of Event Handling
