Week 6: JavaScript and the DOM
INFO 253A: Front-end Web Architecture
Kay Ashaolu
JavaScript Chapter 7: DOM Manipulation
Introduction to the DOM
- DOM: Document Object Model
- Interface that allows scripts to update content, structure, and style
- Represents the page so that programs can change the document structure, style, and content
Visualizing the DOM
- The DOM is a tree structure of nodes
- Each element, attribute, and text is a node
- Example HTML:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<div id="main">
<h1 class="header">Welcome</h1>
<p>Hello, World!</p>
</div>
</body>
</html>
The Window and Document Objects
- window: The global object representing the browser window
- document: Represents the loaded HTML document
- Accessing the document object:
console.log(window.document);
console.dir(document);
Exploring the Document Object
-
The document object has properties and methods to interact with the DOM
-
Examples:
document.body
document.title
document.URL
-
Methods to select elements, create elements, and more
Selecting Elements by ID
- Use
document.getElementById(id)
to select an element - Returns the element with the specified
id
<h1 id="app-title">Shopping List</h1>
const title = document.getElementById('app-title');
console.log(title.innerText); // Outputs: Shopping List
Modifying Element Content
- Change text content:
title.innerText = 'My Shopping List';
- Change HTML content:
title.innerHTML = '<em>My Shopping List</em>';
Selecting Elements with Query Selectors
-
document.querySelector(selector)
- Selects the first element that matches the CSS selector
const header = document.querySelector('h1');
const mainDiv = document.querySelector('#main');
const items = document.querySelector('.items');
Selecting Multiple Elements
-
document.querySelectorAll(selector)
- Selects all elements that match the CSS selector
- Returns a NodeList
const listItems = document.querySelectorAll('.item');
listItems.forEach((item) => {
console.log(item.innerText);
});
Traversing the DOM: Parent and Children
- Parent Element
const child = document.querySelector('.child');
const parent = child.parentElement;
- Child Elements
const parent = document.querySelector('.parent');
const children = parent.children;
console.log(children); // HTMLCollection of child elements
Traversing the DOM: Siblings
- Next Sibling
const item = document.querySelector('.item');
const nextItem = item.nextElementSibling;
- Previous Sibling
const item = document.querySelector('.item');
const prevItem = item.previousElementSibling;
Creating and Appending Elements
- Create an element
const newDiv = document.createElement('div');
- Add content and attributes
newDiv.id = 'new-id';
newDiv.className = 'new-class';
newDiv.textContent = 'Hello World';
- Append to the DOM
document.body.appendChild(newDiv);
Creating Elements: Best Practices
- Prefer creating text nodes over using
innerText
const textNode = document.createTextNode('Hello World');
newDiv.appendChild(textNode);
- More efficient and avoids potential security risks
Inserting Elements at Specific Positions
-
insertAdjacentElement(position, element)
-
Positions:
'beforebegin'
'afterbegin'
'beforeend'
'afterend'
-
const target = document.querySelector('.target');
target.insertAdjacentElement('beforebegin', newDiv);
Replacing Elements
replaceWith(newElement)
const oldItem = document.querySelector('.old-item');
const newItem = document.createElement('div');
newItem.textContent = 'New Item';
oldItem.replaceWith(newItem);
parent.replaceChild(newChild, oldChild)
const parent = document.querySelector('.parent');
parent.replaceChild(newItem, oldItem);
Removing Elements
remove()
method
const item = document.querySelector('.item');
item.remove();
removeChild()
method
const list = document.querySelector('ul');
const item = document.querySelector('li');
list.removeChild(item);
Manipulating Attributes
- Get an attribute
const link = document.querySelector('a');
const href = link.getAttribute('href');
- Set an attribute
link.setAttribute('href', 'https://www.example.com');
- Remove an attribute
link.removeAttribute('target');
Manipulating Classes
-
classList
property- Add a class
element.classList.add('active');
- Remove a class
element.classList.remove('active');
- Toggle a class
element.classList.toggle('active');
Changing Styles Directly
- Modify inline styles using the
style
property
element.style.color = 'red';
element.style.backgroundColor = '#f4f4f4';
- Remember to use camelCase for multi-word properties
Understanding Node Types
- Element Nodes: Represent HTML elements
- Text Nodes: Contain text content
- Comment Nodes: Represent comments in the HTML
- Accessing All Child Nodes
const parent = document.querySelector('.parent');
const nodes = parent.childNodes; // Includes text and comment nodes
Traversing All Nodes
-
Use properties like:
firstChild
lastChild
nextSibling
previousSibling
-
Includes text and comment nodes, not just elements
Efficient DOM Manipulation
-
Minimize Reflows and Repaints
- Batch DOM updates
- Modify elements off-DOM when possible
-
Use Document Fragments
const fragment = document.createDocumentFragment();
// Add elements to fragment
document.body.appendChild(fragment);
Best Practices
-
Avoid using
innerHTML
when possible- Can lead to security risks (e.g., XSS attacks)
- Use DOM methods instead
-
Use Event Delegation
- Attach events to parent elements to handle events for multiple child elements
The Role of the DOM in Web Architecture
-
Central to Client-Side Scripting
- Enables dynamic content updates
- Forms the basis for modern web applications
-
Interacts with APIs and Frameworks
- Understanding the DOM is crucial for React, Angular, Vue, etc.
Summary
- The DOM allows dynamic interaction with web pages
- You can select, create, modify, and remove elements
- Traversing the DOM helps in navigating between elements
- Manipulating the DOM efficiently is key to performance
JavaScript Chapter 8: Events
What Are Events?
- Events are actions or occurrences detected by the system.
- User interactions: clicks, typing, mouse movements.
- System events: page loading, resource fetching.
Role of Events in Web Architecture
- Events drive interactivity and responsiveness.
- Enable dynamic content updates without page reloads.
- Fundamental to Single Page Applications (SPAs).
Adding Event Listeners
- Event listeners connect code to user actions.
- Syntax:
element.addEventListener('eventType', handlerFunction);
- Example:
document.getElementById('btn').addEventListener('click', handleClick);
The Event Object
- Provides details about the event.
- Accessible within event handler functions.
- Key properties:
-
target
: element that triggered the event. -
type
: type of the event. -
timestamp
: time at which the event occurred.
-
Mouse Events in Web Architecture
- Capture user interactions with pointing devices.
- Common mouse events:
click
dblclick
-
mouseover
/mouseout
-
mousedown
/mouseup
- Example:
element.addEventListener('mouseover', function(event) {
event.target.style.backgroundColor = 'yellow';
});
Keyboard Events and Key Properties
- Capture user input from the keyboard.
- Events:
-
keydown
: when a key is pressed down. -
keyup
: when a key is released. -
keypress
: when a character is generated.
-
- Accessing key information:
-
event.key
: value of the key pressed. -
event.code
: physical key on the keyboard.
-
Handling Input Events
- Respond to changes in input fields.
-
input
event fires when value changes. - Example:
inputField.addEventListener('input', function(event) {
console.log('Current value:', event.target.value);
});
Form Submission and FormData
- Handling form submissions without page reload.
- Use
event.preventDefault()
to stop default behavior. - Access form data using
FormData
object.
form.addEventListener('submit', function(event) {
event.preventDefault();
const data = new FormData(event.target);
console.log('Form data:', data.get('username'));
});
Event Bubbling and Propagation
- Events propagate through the DOM tree.
- Event Bubbling: Event moves from target up to ancestors.
- Event Capturing: Event moves from ancestors down to target.
- Can affect how events are handled in complex DOM structures.
Event Delegation
- Efficient way to handle events on multiple elements.
- Attach a single event listener to a parent element.
- Use
event.target
to identify the clicked element. - Example:
list.addEventListener('click', function(event) {
if (event.target.matches('li')) {
event.target.classList.toggle('selected');
}
});
Managing Window Events
- The
window
object represents the browser window. - Common window events:
-
load
: when the page has fully loaded. -
resize
: when the window is resized. -
scroll
: when the document is scrolled.
-
- Example:
window.addEventListener('resize', function() {
console.log('Window resized to', window.innerWidth, 'x', window.innerHeight);
});
Best Practices in Event Handling
- Use event delegation to improve performance.
- Clean up event listeners when elements are removed.
- Be cautious with event propagation.
- Avoid inline event handlers in HTML.
Events in Modern Web Applications
- Events are central to frameworks like React, Vue, Angular.
- Understanding native events helps with framework-specific events.
- Essential for creating interactive, user-friendly interfaces.
Conclusion
- Events are integral to front-end web architecture.
- Enable dynamic and responsive user experiences.
- Mastery of events enhances ability to build complex applications.
Week 6 - JavaScript in the Browser
By kayashaolu
Week 6 - JavaScript in the Browser
Course Website: https://www.ischool.berkeley.edu/courses/info/253a
- 74