10.11 CSS Class Management
10.11.1 Using classList.add
10.11.2 Using classList.remove
This is a highlighted paragraph.
10.11.3 Using classList.toggle
10.11.4 The className method
Example 1. Change the class of an element.
Example 2. Toggle between multiple classes based on certain conditions
10.12 window.onresize Method
Example 1. Modification of a DOM element
10.13 Form Handling
10.13.1 Accessing and manipulating Contact Form elements
10.13.2 Advanced sample of Accessing and Manipulating data in a Registration Form
Example 1. Accessing and Manipulating data from a Registration Form
Example 2. Accessing, Manipulating and validating Registration Form data in real-time
10.14 Events
10.14.1 Events that modify the DOM such as click, submit, mouseover and others.
Example 1. Events on Access Form fields when hovering the mouse over the fields
Example 2. Button that changes color and text when clicked and after 2 seconds, the change disappears
Example 3. Button that changes color and text once when clicked and remains changed
10.14.1.1 A modal window
Example 1. Remove the event that opens the modal window
10.14.2 Event propagation (capturing and bubbling)
10.14.2.1 Capturing event propagation (capture phase)
Example 1. Applied to a simple DOM structure
10.14.2.2 Bubbling event propagation (bubbling phase)
Example 1. Adding event handlers in the bubbling phase.
Example 2. Task list. Event delegation with bubbling
10.14.3 Prevention of default behavior
The preventDefault() function
10.14.4 Stopping event propagation
The stopPropagation() function
Example 1. Stop the propagation of an event.
Click the button:
10.15 DOM Traversing.
10.15.1 parentElement
Example 1. parentElement method. Accessing the parent element
10.15.2 children
Example 1. Accessing a collection of child elements
10.15.3 nextElementSibling
Example 1. Finding the next sibling of the current element
10.15.4 previousElementSibling
Exercise 1 Returns the previous sibling of the current element
10.16 Node comparison (compareDocumentPosition, contains)
10.16.1 compareDocumentPosition
Example 1. Comparing the position of two elements
This is the first paragraph.
This is the second paragraph.
10.16.2 The contains method
Example 1. Verify if an element is contained within another
This is the first paragraph.
This is the second paragraph.
10.17 Creation and Deletion of DOM Elements
10.17.1 Node Cloning
10.17.1.1 Creating New Elements and Text Nodes.
Example 1. Creating a new paragraph with text
Example 2. Cloning a list of elements
Original List
Cloned List
Example 3. Inserting an element at the beginning of a list
List Before
Cloned List
10.17.1.2 Inserting nodes (appendChild, insertBefore)
Example 1. Add a node as the last child of a parent node
Example 2. Insert a node before a child node of a parent node
10.17.1.3 Removing/Replacing nodes (removeChild, replaceChild)
Example 1. Select the last element of a list and delete it
List Before
List After
Example 2. Replace an element with a new element
Container Before
Element 1
Old Element_177
Element 3
Container After
Element 1
Old Element_177
Element 3
Example 3. Insert an element before the last one
List Before
List After
Example 4. Replace the content of an element
Container Before
Element 1
Element 2
Element 3
Container After
Element 1
Element 2
Element 3