JavaScript DOM Manipulation

What is the DOM in JavaScript?

The DOM (Document Object Model) is a programming interface for web documents. It represents the structure of a document as a tree of objects, allowing programming languages like JavaScript to interact with and manipulate the content, structure, and style of a webpage.

How do you access elements in the DOM?

You can access elements in the DOM using various methods provided by the document object, such as:

• getElementById(id): Accesses an element by its ID.
• getElementsByClassName(className): Accesses elements by their class name.
• getElementsByTagName(tagName): Accesses elements by their tag name.
• querySelector(selector): Accesses the first element that matches a specified CSS selector.
• querySelectorAll(selector): Accesses all elements that match a specified CSS selector.

const elementById = document.getElementById('myId');
const elementsByClass = document.getElementsByClassName('myClass');
const firstElement = document.querySelector('.myClass'); // First matching element
const allElements = document.querySelectorAll('.myClass'); // All matching elements

How do you modify the content of an element in the DOM?

You can modify the content of an element using the innerHTML, textContent, or innerText properties.

const myElement = document.getElementById('myId');
myElement.innerHTML = 'New Content'; // Sets HTML content
myElement.textContent = 'Just text content'; // Sets plain text content

How do you change the styles of an element in the DOM?

You can change the styles of an element by modifying its style property directly or by adding/removing CSS classes.

const myElement = document.getElementById('myId');
myElement.style.color = 'blue'; // Change text color
myElement.style.backgroundColor = 'yellow'; // Change background color

// Adding a class
myElement.classList.add('newClass');

// Removing a class
myElement.classList.remove('oldClass');

How do you create a new element and add it to the DOM?

You can create a new element using document.createElement() and then append it to an existing element using appendChild() or insertBefore().

const newElement = document.createElement('div');
newElement.textContent = 'Hello, I am a new element!';
document.body.appendChild(newElement); // Adds to the end of the body

How do you remove an element from the DOM?

You can remove an element from the DOM using the remove() method or by using parentNode.removeChild().

const elementToRemove = document.getElementById('myId');
elementToRemove.remove(); // Removes the element

// Or using parentNode
const parent = elementToRemove.parentNode;
parent.removeChild(elementToRemove);

What are event listeners in the context of DOM manipulation?

Event listeners are functions that wait for specific events (like clicks, key presses, etc.) to occur on DOM elements. You can add event listeners using the addEventListener() method.

const button = document.getElementById('myButton');
button.addEventListener('click', () => {
  alert('Button clicked!');
});

How do you prevent the default action of an event in JavaScript?

You can prevent the default action of an event (like form submission or link navigation) by calling event.preventDefault() within the event handler.

const form = document.getElementById('myForm');
form.addEventListener('submit', (event) => {
  event.preventDefault(); // Prevents form submission
  console.log('Form submitted!');
});

How can you traverse the DOM?

You can traverse the DOM using properties such as parentNode, childNodes, firstChild, lastChild, nextSibling, and previousSibling.

const myElement = document.getElementById('myId');
const parent = myElement.parentNode; // Access parent element
const firstChild = myElement.firstChild; // Access first child
const nextSibling = myElement.nextSibling; // Access next sibling

What is event delegation in the context of DOM manipulation?

Event delegation is a technique where a single event listener is attached to a parent element instead of individual child elements. This allows you to manage events efficiently, especially when dealing with dynamic content.

const list = document.getElementById('myList');
list.addEventListener('click', (event) => {
  if (event.target.tagName === 'LI') {
    alert(`List item ${event.target.textContent} clicked!`);
  }
});

How do you modify attributes of an element in the DOM?

You can modify the attributes of an element using the setAttribute() method or by directly accessing the attribute properties.

const img = document.getElementById('myImage');
img.setAttribute('src', 'newImage.jpg'); // Using setAttribute
img.alt = 'A new image'; // Accessing attribute property directly