Practice Questions

• id uniquely identifies a single element on the page. Each id should only be used once.
• class labels elements and can be shared by multiple elements.

<!-- id: unique identifier for one element -->
<div id="header">Site Header</div>

<!-- class: shared by multiple elements -->
<button class="btn">Save</button>
<button class="btn">Cancel</button>

Use id when you need to target one specific element. Use class when multiple elements share the same styling or behavior.

/* (a) Select all <p> elements - use the tag name */
p {
  color: blue;
}

/* (b) Select element with id="main" - prefix with # */
#main {
  font-size: 18px;
}

/* (c) Select all elements with class="active" - prefix with . */
.active {
  background-color: yellow;
}

These same selectors work with JavaScript’s querySelector and querySelectorAll.

Both can select an element by ID, but the syntax differs:

// getElementById - pass just the ID name (no #)
const header1 = document.getElementById("header");

// querySelector - use CSS selector syntax (with #)
const header2 = document.querySelector("#header");

Key differences:

• getElementById only selects by ID and is slightly faster
• querySelector uses CSS selector syntax and can select by any selector (class, tag, attribute, etc.)
• getElementById returns null if not found; querySelector also returns null

Both are valid. querySelector is more flexible since you can use the same method for all types of selections.

const buttons = document.querySelectorAll(".btn");

buttons.forEach((button) => {
  console.log(button.textContent);
});

querySelectorAll returns a NodeList of all matching elements. You can iterate over it with forEach to access each element individually.

const message = document.getElementById("message");
message.textContent = "Hello, World!";
message.classList.add("highlight");

• textContent sets the text inside the element
• classList.add() adds a CSS class without affecting other classes the element may have

innerHTML parses content as HTML. If you insert untrusted user input, an attacker can inject elements or attributes, such as event handlers, and the browser will interpret them. That is how Cross-Site Scripting (XSS) happens:

const userInput = '<img src="x" onerror="stealData()">';

// Dangerous - the browser interprets this as HTML
element.innerHTML = userInput;

// Safe - displays as plain text
element.textContent = userInput;

textContent treats everything as plain text, so HTML tags are displayed literally rather than being parsed. Always use textContent for user-provided content.

const button = document.getElementById("myBtn");

button.addEventListener("click", () => {
  button.textContent = "Clicked!";
});

addEventListener takes two arguments: the event type (“click”) and a function to run when the event occurs. Inside the handler, we can modify the button using the button variable we already have.

const form = document.querySelector("#myForm");

form.addEventListener("submit", (event) => {
  event.preventDefault();

  // Handle the form data with JavaScript
  const formData = new FormData(form);
  const data = Object.fromEntries(formData);
  console.log("Form data:", data);
});

preventDefault() stops the browser’s default behavior. For forms, the default is to send data to the server and reload the page. By calling preventDefault(), we stop the reload and handle the submission entirely with JavaScript (e.g., sending data via fetch).

function createListItem(text) {
  const li = document.createElement("li");
  li.textContent = text;
  li.classList.add("todo-item");
  return li;
}

// Add to the list
const list = document.getElementById("todo-list");
const newItem = createListItem("Buy groceries");
list.appendChild(newItem);

Key points:

• createElement creates an element in memory (not yet on the page)
• Configure the element (text, classes, etc.) before inserting
• appendChild adds the element as the last child of the parent
• You could also use list.append(newItem) which works the same way for single elements

const button = document.getElementById("toggle-btn");
const menu = document.getElementById("menu");

button.addEventListener("click", () => {
  menu.classList.toggle("hidden");

  const isHidden = menu.classList.contains("hidden");
  button.textContent = isHidden ? "Show Menu" : "Hide Menu";
});

• classList.toggle() adds the class if missing, removes it if present
• classList.contains() returns true or false to check current state
• This pattern is common for show/hide functionality, dropdown menus, and accordions

The variable you used to select the element is the element you attached the listener to. event.target is the actual element that triggered the event, which may be a child element.

const container = document.getElementById("container");

container.addEventListener("click", (event) => {
  console.log(container === event.target); // Not always true!
});

If container has child elements like buttons or links, clicking on a child means:

• container is the element with the listener (the parent)
• event.target is the actual clicked element (the child)

<div id="container">
  <button>Click me</button>  <!-- clicking here: event.target is the button -->
</div>

This distinction matters when you want to know exactly what was clicked. It is also the basis for “event delegation,” where you attach one listener to a parent and check event.target to handle clicks on multiple children.