HTML

Question 1

What is Event Delegation in HTML?

Answer 1

Event Delegation is a technique where a single parent element listens for events on its child elements, improving performance and efficiency.

How It Works:
1. Attach an event listener to a parent element.
2. Use event.target to identify which child triggered the event.

<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

<script>
document.getElementById("list").addEventListener("click", event => {
  if (event.target.tagName === "LI") {
    console.log(`Clicked: ${event.target.textContent}`);
  }
});
</script>

Question 3

What is DOM traversal in HTML?

Answer 3

DOM Traversal allows navigating between elements in the Document Object Model (DOM) using properties and methods.

Key Methods & Properties:
- Parent Node: element.parentElement → Gets the parent.
- Children: element.children → Returns child elements.
- First/Last Child: element.firstElementChild, element.lastElementChild
- Siblings:
– element.previousElementSibling → Gets the previous sibling.
– element.nextElementSibling → Gets the next sibling.

Find Specific Elements:
- document.getElementById("id")
- document.querySelector(".class")
- document.querySelectorAll("div")

Example:

const list = document.getElementById("list");
console.log(list.parentElement); // Logs parent of <ul>
console.log(list.children); // Logs all <li> children
console.log(list.firstElementChild.textContent); // Logs first <li> text

Question 4

Describe DOM manipulation in HTML

Answer 4

DOM Manipulation allows modifying elements dynamically using JavaScript.

Key Methods for Changing the DOM:
* Selecting Elements:
document.getElementById("id")
document.querySelector(".class")
document.querySelectorAll("div")

Then we can create, add, modify, remove or add events to it.

Question 5

Describe Form Validation and Submission

Answer 5

Form validation ensures user inputs meet required conditions before submission.

• HTML5 Attributes:
  required, minlength, maxlength, type="email", etc.
• JavaScript Validation:
  Validate before taking action programatically.
  event.preventDefault() and manipulate data.

Question 6

Describe DOM manipulation in Vanilla JS

Answer 6

Used to modify elements dynamically using JavaScript.

• Selecting Elements:

document.getElementById("id");
document.querySelector(".class");
document.querySelectorAll("div");

• Creating & Adding Elements:

const div = document.createElement("div");
div.textContent = "Hello!";
document.body.appendChild(div);

• Modifying Elements:

const elem = document.getElementById("title");
elem.textContent = "New Title";
elem.style.color = "blue";

• Removing Elements:

document.getElementById("item").remove();

• Event Handling:

document.getElementById("btn").addEventListener("click", () => {
  alert("Clicked!");
});