Scribd
Upload
16 views16 pages

Session 11 DOM Manipulation

This session covers the Document Object Model (DOM) and its significance in web development, including how to select and manipulate HTML elements using JavaScript. It introduces event handling to create interactive web pages and provides hands-on activities to practice these concepts. Key topics include accessing DOM elements, modifying content and attributes, and debugging common mistakes in DOM manipulation.

Uploaded by

Jue Jue
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
16 views16 pages

Session 11 DOM Manipulation

This session covers the Document Object Model (DOM) and its significance in web development, including how to select and manipulate HTML elements using JavaScript. It introduces event handling to create interactive web pages and provides hands-on activities to practice these concepts. Key topics include accessing DOM elements, modifying content and attributes, and debugging common mistakes in DOM manipulation.

Uploaded by

Jue Jue
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 16

DOM Manipulation

Web Development Essentials - Session 11


Session Overview
Learning Goals for Today:

● Understand the Document Object Model (DOM) and its role in web development.
● Learn how to select and modify HTML elements using JavaScript.
● Introduction to event handling (clicks, keypresses, etc.).
What is the DOM?

● Definition: The Document Object Model (DOM) is a programming interface for web documents. It represents the structure of
an HTML document as a tree of objects that can be manipulated using JavaScript.
● Why is the DOM Important?
○ Allows developers to interact with and manipulate the structure, style, and content of a webpage.
○ When the DOM is updated, the changes are reflected on the page instantly.
● Visual Representation:
○ HTML elements (like <div>, <p>, <button>) are nodes in the DOM tree.
○ JavaScript can traverse, add, modify, or remove these nodes.
The Structure of the DOM
Key DOM Objects:

● Document: Represents the entire webpage.


● Element: Represents individual HTML elements (like <p>, <h1>, <div>).
● Text: Represents the text inside an element.

DOM Tree Example:

Corresponding DOM tree:

● <body>
○ <h1> → "Hello, World!"
○ <p> → "This is a paragraph."
Selecting HTML Elements in JavaScript
How to Access DOM Elements:

● Use selectors to find elements in the DOM.

Common Methods:

1. document.getElementById(): Selects an element by its ID

1. document.getElementsByClassName(): Selects elements by class name.


2. document.querySelector(): Selects the first element that matches a CSS selector
3. document.querySelectorAll(): Selects all elements that match a CSS selector.
Modifying HTML Elements

Modifying Text Content:

● Use textContent or innerHTML to change the content of an element.

Changing Element Attributes:

● Use setAttribute() to modify attributes like src, href, or class.

Adding and Removing Classes:

● Use classList.add(), classList.remove(), or classList.toggle() to manipulate an element's CSS classes.


Adding and Removing DOM Elements

Creating New Elements:

● Use document.createElement() to create a new element.

Removing Elements:

● Use remove() to delete an element from the DOM.


Introduction to Event Handling
What is an Event?

● An event is an action that occurs on a webpage, like a button click, keypress, or page load.

Why Use Events?

● Event handling allows developers to create interactive websites, responding to user actions in real-time.

Common Events:

1. Click Event: Fired when an element is clicked.


2. Mouseover Event: Fired when the mouse is moved over an element.
3. Keypress Event: Fired when a key is pressed.
Event Listeners in JavaScript

Adding an Event Listener:

● Use the addEventListener() method to attach a function (called a callback) to an element that executes when the event
occurs.
Example
Handling Different Events
Click Event Example:

Keypress Event Example:

Mouseover Event Example:


Hands-On Activity
Goal: Create a simple webpage with DOM manipulation and event handling.

● Select an element by ID and change its text.


● Add a click event to a button that changes the color of a heading.

Instructions:

1. Use getElementById() to select a heading.


2. Change the heading's text using textContent.
3. Add a button that triggers a color change when clicked.
Common Mistakes in DOM Manipulation
Selecting Non-existent Elements: Make sure the element you are selecting actually exists in the DOM.

Overwriting Existing Content: When using innerHTML, be cautious as it can overwrite existing content.

Forgetting to Attach Event Listeners: Always ensure that event listeners are added after the elements are loaded.
Debugging DOM Manipulation
Using the Console: Use the browser's developer console to inspect the DOM and test JavaScript code.

Check for Errors: Look for common errors like null or undefined when selecting elements.
Summary
What We Learned Today:

● Introduction to the DOM and its structure.


● How to select, modify, and remove HTML elements using JavaScript.
● Event handling (e.g., clicks, keypresses) to add interactivity to webpages.
Questions?
Q&A Session

● Any questions before we wrap up?

Thank You & See You in the Next Class!

You might also like