JavaScript DOM and events notes

What does DOM stand for?

DOM stands for Document Object Model. It represents the structure of a web page as a tree of objects.

True or False: The DOM is a programming interface.

True: The DOM is a programming interface for web documents that allows scripts to update content, structure, and styles dynamically.

Element vs. Node: What's the difference?

Element: Represents an HTML tag. Node: Any object in the DOM tree, including elements, text, and comments.

What does 'getElementById' do?

'getElementById' retrieves an element by its unique ID, allowing manipulation of that specific element.

Fill in the blank: The DOM is structured like a _______.

tree: The DOM structure is tree-like, with a root node and child nodes.

How to select multiple elements?

Use 'querySelectorAll(selector)'. It returns a NodeList of all matching elements for the given selector.

What is 'innerHTML'?

'innerHTML' is a property that gets or sets the HTML content inside an element, allowing for dynamic updates.

Cause → Effect: Adding a class to an element.

Cause: Use 'element.classList.add('className')'. Effect: The element gains the specified CSS class, potentially changing its appearance.

What is a NodeList?

A NodeList is a collection of nodes returned by methods such as 'querySelectorAll', which can be looped through to access each element.

True or False: The DOM is static.

False: The DOM is dynamic, meaning it can be modified by scripts, reflecting changes immediately in the web page.

What does 'createElement' do?

'createElement' creates a new HTML element node in memory, which can then be added to the DOM.

Comparison: 'appendChild' vs. 'insertBefore'.

'appendChild': Adds a node as the last child. 'insertBefore': Inserts a node before a specified existing node.

What is 'document' in the DOM?

'document' is the root of the DOM tree and provides access to all elements, methods, and properties of the web page.

How to remove an element?

Use 'parentNode.removeChild(childNode)'. This method removes a specified child node from its parent.

Fill in the blank: The _______ method changes the text content of an element.

'textContent': This method sets or gets the text content of an element, ignoring HTML tags.

What does 'setAttribute' do?

'setAttribute' sets a specified attribute on an element, allowing for dynamic updates of attributes like 'src' or 'class'.

What is an event in JavaScript?

An event is an action or occurrence that happens in the browser, such as a mouse click, key press, or page load.

Define event listener.

An event listener is a function that waits for a specific event to occur on a particular element and executes when the event occurs.

True or False: Events can only be triggered by mouse actions.

False. Events can be triggered by user interactions like keyboard input, touch events, or page lifecycle events.

How do you attach an event listener?

Use the `addEventListener` method on a DOM element. For example: element.addEventListener('click', functionName);

What is event propagation?

Event propagation is the process of how an event travels through the DOM. It consists of two phases: capturing and bubbling.

Fill in the blank: The event __________ phase occurs first in event propagation.

capturing

Compare capturing phase and bubbling phase.

- Capturing: Event travels from root to target. - Bubbling: Event travels from target to root.

What method removes an event listener?

Use `removeEventListener`. For example: element.removeEventListener('click', functionName);

Event object properties include:

- `target`: Element that triggered the event. - `type`: Type of the event (e.g., 'click').

What does event delegation mean?

Event delegation is a technique to handle events at a higher level in the DOM rather than on individual elements, improving performance.

True or False: Preventing default behavior is possible with an event.

True. Use `event.preventDefault()` to prevent default actions like form submissions or link navigations.

Cause → Effect: Click on a button → ?

The button triggers a defined event listener function.

How can you stop event propagation?

Use `event.stopPropagation()` to prevent the event from bubbling up or capturing down the DOM.

What are mouse events?

Mouse events react to mouse actions, including 'click', 'dblclick', 'mouseover', and 'mouseout'.

Short example of an event listener.

const button = document.querySelector('button'); button.addEventListener('click', () => alert('Button clicked!'));

What does the 'this' keyword refer to in event handlers?

In event handlers, 'this' refers to the element that fired the event unless arrow functions are used.

What is DOM traversal?

The process of navigating through the DOM tree to access or manipulate elements. Methods include getElementById, querySelector, and parentNode.

true or false: innerHTML alters element structure.

True. Using innerHTML can change an element's content and structure, which may also remove event listeners.

Comparing appendChild vs. insertBefore.

appendChild adds a node as the last child. insertBefore places a node before a specified child.

How to clone a node?

Use the cloneNode method. Example: let clone = originalNode.cloneNode(true); // true for deep clone.

What is event delegation?

A technique that involves attaching a single event listener to a parent element instead of multiple listeners on child elements, enhancing performance.

Fill in the blank: use _______ to set multiple CSS styles.

style.cssText; It allows setting multiple CSS styles in a single string format.

What does NodeList represent?

NodeList is an array-like collection of nodes returned by methods like querySelectorAll. Unlike arrays, it lacks methods like map or forEach.

Cause → Effect: Using removeChild.

Cause: Call removeChild on a parent element. Effect: The specified child element is removed from the DOM.

What is the purpose of DocumentFragment?

A lightweight container for DOM manipulation. It allows batch operations without reflow, improving performance.

Create a new element in JavaScript.

Use document.createElement('div'); This creates a new div element, which can then be styled and appended.

True or False: setAttribute only changes attributes.

False. setAttribute can also add new attributes if they do not exist.

How to listen for multiple events?

Use addEventListener for each event type. Example: element.addEventListener('click', handler); element.addEventListener('dblclick', handler);