Comprehensive Guide to JavaScript DOM
(Document Object Model)
Comprehensive Guide to JavaScript DOM (Document Object Model) 1
1. Introduction to the DOM 4
What is the DOM? 4
Why Learn DOM Manipulation? 4
Learn more Web Development and Apps Script at https://basescripts.com/ by Laurence Svekis
Prerequisites 4
2. Getting Started with DOM Manipulation 4
Setting Up Your Environment 4
Your First DOM Manipulation 5
3. Selecting DOM Elements 5
1. By ID 5
2. By Class Name 5
3. By Tag Name 6
4. Query Selectors 6
querySelector() 6
querySelectorAll() 6
Examples 6
4. Traversing the DOM 7
Parent, Child, and Sibling Relationships 7
Navigating Element Nodes Only 8
Example: Traversing to a Sibling Element 8
5. Manipulating DOM Elements 8
Changing Content 8
Modifying Attributes 9
Styling Elements 9
Example: Changing an Image Source 10
Example: Adding a Class 10
6. Creating and Removing Elements 10
Creating New Elements 10
Appending Elements 10
Removing Elements 11
Example: Creating and Appending an Element 11
Example: Removing an Element 11
7. Event Handling 11
Adding Event Listeners 12
Common Events 12
Event Object 13
Event Propagation 13
Example: Button Click Event 13
8. Working with Forms and Inputs 13
Accessing Form Elements 13
Retrieving and Setting Values 14
Form Validation 14
Form Submission 14
Example: Simple Form Validation 15
9. Advanced Topics 15
Learn more Web Development and Apps Script at https://basescripts.com/ by Laurence Svekis
DOM Collections 15
Performance Optimization 15
Using Closures in Event Handling 16
10. Practical Examples 16
Example 1: To-Do List Application 16
Example 2: Image Slider 17
11. Coding Exercises 17
Exercise 1: Toggle Visibility 17
Exercise 2: Color Picker 18
Exercise 3: Character Countdown 19
12. Quiz Questions and Answers 19
Question 1 19
Question 2 19
Question 3 20
Question 4 20
Question 5 20
Question 6 20
Question 7 21
Question 8 21
Question 9 21
Question 10 21
13. Tips and Tricks 22
Tip 1: Minimize Reflows and Repaints 22
Tip 2: Use Event Delegation 22
Tip 3: Avoid Using innerHTML for Inserting User Input 23
Tip 4: Check for Browser Compatibility 23
Tip 5: Use const and let 23
Tip 6: Use Arrow Functions for Short Callbacks 24
Tip 7: Understand the Difference Between NodeList and HTMLCollection 24
Tip 8: Utilize Browser Developer Tools 24
14. Conclusion 24
Key Takeaways 24
Welcome to this extensive guide on the JavaScript Document Object Model (DOM). Whether
you're a beginner or looking to deepen your understanding, this guide is designed to help you
master DOM manipulation using JavaScript. We'll cover everything from the basics to advanced
topics, complete with practical examples, coding exercises, quizzes, and valuable tips and
tricks.
Learn more Web Development and Apps Script at https://basescripts.com/ by Laurence Svekis
1. Introduction to the DOM
What is the DOM?
The Document Object Model (DOM) is a programming interface for web documents. It
represents the page structure as a hierarchical tree of nodes, allowing programs and scripts to
dynamically access and update the content, structure, and style of a document.
Why Learn DOM Manipulation?
Dynamic Content: Change content on the fly without reloading the page.
Interactive Web Pages: Enhance user experience with interactive elements.
Control Over HTML and CSS: Programmatically alter HTML elements and styles.
Event Handling: Respond to user actions like clicks, mouse movements, and key presses.
Prerequisites
Basic understanding of HTML and CSS.
Fundamental knowledge of JavaScript.
2. Getting Started with DOM Manipulation
Setting Up Your Environment
Text Editor or IDE:
Visual Studio Code
Atom
Sublime Text
Web Browser:
Google Chrome (with Developer Tools)
Mozilla Firefox
Microsoft Edge
Learn more Web Development and Apps Script at https://basescripts.com/ by Laurence Svekis
Your First DOM Manipulation
Create an index. file with the following content:
<!DOCTYPE html>
< lang="en">
<head>
<meta charset="UTF-8">
<title>DOM Manipulation Example</title>
</head>
<body>
<h1 id="main-heading">Hello, World!</h1>
<button id="change-text">Change Text</button>
<script src="script.js"></script>
</body>
</>
Create a script.js file:
document.getElementById('change-text').addEventListener('click', function() {
document.getElementById('main-heading').textContent = 'Text Changed!';
});
Explanation:
We select the button by its ID and add a click event listener.
When the button is clicked, we change the text content of the <h1> element.
3. Selecting DOM Elements
Selecting elements is the first step in manipulating the DOM.
1. By ID
var element = document.getElementById('myId');
Usage: Fastest method to select a single element with a unique ID.
Returns: A single DOM element or null if not found.
2. By Class Name
var elements = document.getElementsByClassName('myClass');
Learn more Web Development and Apps Script at https://basescripts.com/ by Laurence Svekis
Usage: Selects all elements with the specified class.
Returns: A live HTMLCollection of elements.
3. By Tag Name
var elements = document.getElementsByTagName('p');
Usage: Selects all <p> elements in the document.
Returns: A live HTMLCollection of elements.
4. Query Selectors
querySelector()
var element = document.querySelector('.myClass');
Usage: Selects the first element that matches the CSS selector.
Supports: Complex CSS selectors.
querySelectorAll()
var elements = document.querySelectorAll('.myClass');
Usage: Selects all elements matching the CSS selector.
Returns: A static NodeList.
Examples
Select an element with ID 'header':
var header = document.getElementById('header');
Select all elements with class 'active':
var activeElements = document.getElementsByClassName('active');
Select all <div> elements:
Learn more Web Development and Apps Script at https://basescripts.com/ by Laurence Svekis
var divs = document.getElementsByTagName('div');
Select the first element with class 'nav-item':
var navItem = document.querySelector('.nav-item');
Select all elements with attribute 'data-role':
var dataRoleElements = document.querySelectorAll('[data-role]');
4. Traversing the DOM
DOM traversal allows you to navigate between elements in the DOM tree.
Parent, Child, and Sibling Relationships
parentNode
var parent = element.parentNode;
childNodes
var children = element.childNodes;
firstChild and lastChild
var firstChild = element.firstChild;
var lastChild = element.lastChild;
nextSibling and previousSibling
var nextSibling = element.nextSibling;
var prevSibling = element.previousSibling;
Learn more Web Development and Apps Script at https://basescripts.com/ by Laurence Svekis
Navigating Element Nodes Only
Text nodes, comments, and other non-element nodes can interfere with traversal. To navigate
element nodes only, use:
children
var children = element.children;
firstElementChild and lastElementChild
var firstElement = element.firstElementChild;
var lastElement = element.lastElementChild;
nextElementSibling and previousElementSibling
var nextElement = element.nextElementSibling;
var prevElement = element.previousElementSibling;
Example: Traversing to a Sibling Element
var item = document.querySelector('.list-item');
var nextItem = item.nextElementSibling;
5. Manipulating DOM Elements
After selecting elements, you can manipulate them.
Changing Content
textContent
Sets or returns the text content of an element.
element.textContent = 'New Text';
Learn more Web Development and Apps Script at https://basescripts.com/ by Laurence Svekis
innerHTML
Gets or sets the HTML content inside an element.
element.innerHTML = '<strong>Bold Text</strong>';
innerText (Not standard across all browsers)
Similar to textContent but may render text differently.
Modifying Attributes
getAttribute() and setAttribute()
var src = image.getAttribute('src');
image.setAttribute('alt', 'Description');
Direct Property Access
element.id = 'newId';
element.className = 'newClass';
Styling Elements
Inline Styles
element.style.color = 'blue';
element.style.fontSize = '16px';
Adding and Removing Classes
element.classList.add('active');
element.classList.remove('active');
element.classList.toggle('active');
Learn more Web Development and Apps Script at https://basescripts.com/ by Laurence Svekis
Example: Changing an Image Source
var image = document.getElementById('myImage');
image.src = 'newImage.jpg';
Example: Adding a Class
var button = document.querySelector('.btn');
button.classList.add('btn-primary');
6. Creating and Removing Elements
You can dynamically create and remove elements from the DOM.
Creating New Elements
document.createElement()
var newDiv = document.createElement('div');
Setting Content and Attributes
newDiv.textContent = 'Hello!';
newDiv.className = 'greeting';
Appending Elements
appendChild()
parentElement.appendChild(newDiv);
insertBefore()
parentElement.insertBefore(newDiv, referenceElement);
Learn more Web Development and Apps Script at https://basescripts.com/ by Laurence Svekis
append() and prepend() (Modern browsers)
parentElement.append(newDiv); // Adds to the end
parentElement.prepend(newDiv); // Adds to the beginning
Removing Elements
removeChild()
parentElement.removeChild(childElement);
remove() (Modern browsers)
element.remove();
Example: Creating and Appending an Element
var list = document.getElementById('myList');
var newItem = document.createElement('li');
newItem.textContent = 'New Item';
list.appendChild(newItem);
Example: Removing an Element
var item = document.getElementById('itemToRemove');
item.parentNode.removeChild(item);
7. Event Handling
Events allow you to respond to user interactions.
Learn more Web Development and Apps Script at https://basescripts.com/ by Laurence Svekis
Adding Event Listeners
addEventListener()
element.addEventListener('click', function(event) {
// Event handling code
});
Removing Event Listeners
element.removeEventListener('click', eventHandlerFunction);
Common Events
Mouse Events:
click
dblclick
mouseenter
mouseleave
mousemove
Keyboard Events:
keydown
keyup
keypress
Form Events:
submit
change
focus
blur
Window Events:
load
resize
scroll
Learn more Web Development and Apps Script at https://basescripts.com/ by Laurence Svekis
Event Object
Provides information about the event.
element.addEventListener('click', function(event) {
console.log(event.type); // 'click'
console.log(event.target); // The clicked element
});
Event Propagation
Capturing Phase: Event moves from the window down to the target element.
Bubbling Phase: Event bubbles up from the target element to the window.
Stopping Propagation:
event.stopPropagation()
event.stopPropagation();
Example: Button Click Event
var button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('Button Clicked!');
});
8. Working with Forms and Inputs
Handling user input is crucial for interactive applications.
Accessing Form Elements
By Name:
var form = document.forms['myForm'];
var input = form.elements['username'];
Learn more Web Development and Apps Script at https://basescripts.com/ by Laurence Svekis
By ID:
var input = document.getElementById('username');
Retrieving and Setting Values
Getting Value:
var value = input.value;
Setting Value:
input.value = 'New Value';
Form Validation
Checking Required Fields:
if (input.value === '') {
alert('Field is required');
}
Form Submission
Prevent Default Submission:
form.addEventListener('submit', function(event) {
event.preventDefault();
// Custom submission logic
});
Learn more Web Development and Apps Script at https://basescripts.com/ by Laurence Svekis
Example: Simple Form Validation
var form = document.getElementById('contactForm');
form.addEventListener('submit', function(event) {
var name = document.getElementById('name').value;
if (name === '') {
alert('Please enter your name');
event.preventDefault();
}
});
9. Advanced Topics
DOM Collections
HTMLCollection: Live collection of elements (e.g., getElementsByClassName).
NodeList: Static or live collection depending on the method (e.g., querySelectorAll returns a
static NodeList).
Converting to an Array:
var elementsArray = Array.from(elements);
Performance Optimization
Minimize Reflows and Repaints:
Batch DOM updates.
Use Document Fragments.
Caching Selectors:
var myElement = document.getElementById('myElement');
// Use myElement multiple times
Event Delegation:
Attach a single event listener to a parent element to handle events from multiple child elements.
Learn more Web Development and Apps Script at https://basescripts.com/ by Laurence Svekis
document.getElementById('parent').addEventListener('click', function(event) {
if (event.target && event.target.matches('li.item')) {
// Handle item click
}
});
Using Closures in Event Handling
Preserve the value of variables within event handlers.
for (var i = 0; i < buttons.length; i++) {
(function(index) {
buttons[index].addEventListener('click', function() {
console.log('Button ' + index + ' clicked');
});
})(i);
}
10. Practical Examples
Example 1: To-Do List Application
HTML:
<input type="text" id="new-task" placeholder="Add a new task">
<button id="add-task">Add Task</button>
<ul id="task-list"></ul>
JavaScript:
var addTaskButton = document.getElementById('add-task');
var taskInput = document.getElementById('new-task');
var taskList = document.getElementById('task-list');
addTaskButton.addEventListener('click', function() {
var taskText = taskInput.value;
if (taskText !== '') {
var listItem = document.createElement('li');
Learn more Web Development and Apps Script at https://basescripts.com/ by Laurence Svekis
listItem.textContent = taskText;
taskList.appendChild(listItem);
taskInput.value = '';
}
});
Example 2: Image Slider
HTML:
<div id="slider">
<img src="image1.jpg" id="slide" alt="Slider Image">
<button id="prev">Previous</button>
<button id="next">Next</button>
</div>
JavaScript:
var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
var index = 0;
var slide = document.getElementById('slide');
document.getElementById('next').addEventListener('click', function() {
index = (index + 1) % images.length;
slide.src = images[index];
});
document.getElementById('prev').addEventListener('click', function() {
index = (index - 1 + images.length) % images.length;
slide.src = images[index];
});
11. Coding Exercises
Exercise 1: Toggle Visibility
Objective: Create a button that toggles the visibility of a paragraph.
Instructions:
Use a button with the text "Show/Hide".
Learn more Web Development and Apps Script at https://basescripts.com/ by Laurence Svekis
When clicked, the paragraph should be shown or hidden.
Solution:
HTML:
<button id="toggle-button">Show/Hide</button>
<p id="text">This is a toggleable paragraph.</p>
JavaScript:
var toggleButton = document.getElementById('toggle-button');
var text = document.getElementById('text');
toggleButton.addEventListener('click', function() {
if (text.style.display === 'none' || text.style.display === '') {
text.style.display = 'block';
} else {
text.style.display = 'none';
}
});
Exercise 2: Color Picker
Objective: Change the background color of a div based on user input.
Instructions:
Provide an input field for the color value.
When the user types a color name or hex value, change the div's background.
Solution:
HTML:
<input type="text" id="color-input" placeholder="Enter a color">
<div id="color-box" style="width:100px; height:100px;"></div>
JavaScript:
var colorInput = document.getElementById('color-input');
var colorBox = document.getElementById('color-box');
colorInput.addEventListener('input', function() {
colorBox.style.backgroundColor = colorInput.value;
});
Learn more Web Development and Apps Script at https://basescripts.com/ by Laurence Svekis
Exercise 3: Character Countdown
Objective: Display the remaining character count for a textarea.
Instructions:
Limit the textarea to 100 characters.
Display the remaining character count as the user types.
Solution:
HTML:
<textarea id="message" maxlength="100"></textarea>
<p>Characters left: <span id="char-count">100</span></p>
JavaScript:
var message = document.getElementById('message');
var charCount = document.getElementById('char-count');
message.addEventListener('input', function() {
var remaining = 100 - message.value.length;
charCount.textContent = remaining;
});
12. Quiz Questions and Answers
Question 1
Which method is used to select an element by its ID?
A) document.querySelector()
B) document.getElementById()
C) document.getElementsByClassName()
D) document.getElementsByTagName()
Answer: B) document.getElementById()
Question 2
What does element.childNodes return?
A) An array of child elements
B) A live NodeList of all child nodes, including text and comment nodes
Learn more Web Development and Apps Script at https://basescripts.com/ by Laurence Svekis
C) A live HTMLCollection of child elements
D) The first child element
Answer: B) A live NodeList of all child nodes, including text and comment nodes
Question 3
How do you add a click event listener to a button with the ID 'submitBtn'?
A) document.getElementById('submitBtn').onClick = function() {}
B) document.getElementById('submitBtn').addEventListener('click', function() {})
C) document.getElementById('submitBtn').onclick(function() {})
D) document.getElementById('submitBtn').addEvent('click', function() {})
Answer: B) document.getElementById('submitBtn').addEventListener('click', function() {})
Question 4
Which property is used to change the text content of an element?
A) innerHTML
B) textContent
C) value
D) text
Answer: B) textContent
Question 5
What is the correct way to create a new <div> element?
A) document.createElement('<div>')
B) document.createElement('div')
C) document.newElement('div')
D) document.makeElement('div')
Answer: B) document.createElement('div')
Question 6
Which method removes an element from the DOM?
A) element.delete()
B) element.removeNode()
Learn more Web Development and Apps Script at https://basescripts.com/ by Laurence Svekis
C) element.removeChild()
D) element.remove()
Answer: D) element.remove() (Note: element.remove() is modern and may not work in older
browsers. Alternatively, use parent.removeChild(element);)
Question 7
How do you prevent the default action of an event?
A) event.stopPropagation()
B) event.preventDefault()
C) return false
D) event.stopDefault()
Answer: B) event.preventDefault()
Question 8
Which of the following is NOT a valid way to select elements?
A) document.querySelectorAll('.class')
B) document.getElementsByClassName('class')
C) document.getElementsByAttribute('data-attr')
D) document.getElementsByTagName('div')
Answer: C) document.getElementsByAttribute('data-attr')
Question 9
What does event.target refer to in an event handler function?
A) The element that initiated the event
B) The element that the event handler is attached to
C) The parent of the element that initiated the event
D) The default action of the event
Answer: A) The element that initiated the event
Question 10
How do you access the value of an input field with ID 'email'?
Learn more Web Development and Apps Script at https://basescripts.com/ by Laurence Svekis
A) document.getElementById('email').textContent
B) document.getElementById('email').value
C) document.getElementById('email').innerHTML
D) document.getElementById('email').content
Answer: B) document.getElementById('email').value
13. Tips and Tricks
Tip 1: Minimize Reflows and Repaints
Batch DOM Updates:
Modify the DOM as little as possible.
var fragment = document.createDocumentFragment();
for (var i = 0; i < 1000; i++) {
var newElement = document.createElement('div');
fragment.appendChild(newElement);
}
document.body.appendChild(fragment);
Tip 2: Use Event Delegation
Efficient Event Handling:
Attach a single event listener to a parent element.
document.getElementById('list').addEventListener('click', function(event) {
if (event.target && event.target.nodeName === 'LI') {
// Handle click on <li>
}
});
Learn more Web Development and Apps Script at https://basescripts.com/ by Laurence Svekis
Tip 3: Avoid Using innerHTML for Inserting User Input
Security Risk:
Using innerHTML can lead to Cross-Site Scripting (XSS) attacks.
// Unsafe
element.innerHTML = userInput;
Use textContent Instead:
element.textContent = userInput;
Tip 4: Check for Browser Compatibility
Modern Methods May Not Be Supported in Older Browsers:
Use polyfills or alternative methods.
if (!Element.prototype.matches) {
Element.prototype.matches = Element.prototype.msMatchesSelector ||
Element.prototype.webkitMatchesSelector;
}
Tip 5: Use const and let
ES6 Variables:
Use const for variables that won't change and let for those that will.
const button = document.getElementById('myButton');
let count = 0;
Learn more Web Development and Apps Script at https://basescripts.com/ by Laurence Svekis
Tip 6: Use Arrow Functions for Short Callbacks
Simplify Your Code:
button.addEventListener('click', () => {
console.log('Clicked!');
});
Tip 7: Understand the Difference Between NodeList and HTMLCollection
Conversion to Array:
var elements = document.querySelectorAll('div');
var elementsArray = Array.from(elements);
Tip 8: Utilize Browser Developer Tools
Inspect Elements and Test Scripts:
Use the console and debugging tools to test and debug your code.
14. Conclusion
Congratulations on completing this comprehensive guide to JavaScript DOM manipulation!
You've learned how to select, traverse, and manipulate elements, handle events, and much
more.
Key Takeaways
DOM Manipulation: Central to creating dynamic and interactive web pages.
Event Handling: Essential for responding to user interactions.
Performance: Write efficient code to optimize web page performance.
Learn more Web Development and Apps Script at https://basescripts.com/ by Laurence Svekis
