DOM Exercises – Complete Javascript Course

<!DOCTYPE html>
<html>
<head>
  <title>DOM Practice</title>
</head>
<body>
  <h1 id="main-heading">Welcome to DOM Practice</h1>
  <p id="paragraph">This is a paragraph for DOM manipulation.</p>
  <ul id="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
  <button id="change-text-btn">Change Text</button>
  <input type="text" id="input-text" placeholder="Enter text here">
</body>
</html>

DOM Questions:

How can you select the <h1> element with id "main-heading" using JavaScript?
How can you change the text content of the paragraph <p> element with id "paragraph" to "DOM manipulation is fun!"?
What property can you use to access the value entered in the text input element with id "input-text"?
How can you append a new <li> element to the existing <ul> element with id "list" containing the text "Item 4"?
How do you remove the last item from the <ul> element with id "list"?
How can you add a CSS class "highlight" to the <h1> element with id "main-heading" to change its appearance?
How can you retrieve the value of the first item (index 0) in the list with id "list" and display it using alert()?
How can you hide the paragraph element with id "paragraph" from the page?
How do you attach a click event listener to the button element with id "change-text-btn" to change the text content of the paragraph to "Button clicked!" when the button is clicked?
How can you get the number of child elements within the <ul> element with id "list"?
How can you create a new <div> element and set its id attribute to "new-div"?
How do you insert the newly created <div> element with id "new-div" before the existing <ul> element with id "list"?
How can you check if the <h1> element with id "main-heading" has the CSS class "highlight" applied to it?
How do you change the background color of the body element to "lightblue" using JavaScript?
How can you get the value of the selected option from a dropdown <select> element with id "dropdown"?
How do you prevent the default form submission behavior when a form with id "my-form" is submitted?
How can you add a new attribute "target" with value "_blank" to all anchor <a> elements on the page?
How do you clone the <ul> element with id "list" and append it to the body of the document?
How can you change the width of the input element with id "input-text" to 300 pixels using JavaScript?
How do you remove the attribute "placeholder" from the input element with id "input-text"?

DOM Answers:

Answer:

const mainHeading = document.getElementById("main-heading");

Answer:

const paragraph = document.getElementById("paragraph");
paragraph.textContent = "DOM manipulation is fun!";

Answer:

const inputText = document.getElementById("input-text").value;

Answer:

const newItem = document.createElement("li");
newItem.textContent = "Item 4";
const list = document.getElementById("list");
list.appendChild(newItem);

Answer:

const list = document.getElementById("list");
list.removeChild(list.lastElementChild);

Answer:

const mainHeading = document.getElementById("main-heading");
mainHeading.classList.add("highlight");

Answer:

const list = document.getElementById("list");
const firstItem = list.children[0].textContent;
alert(firstItem);

Answer:

const paragraph = document.getElementById("paragraph");
paragraph.style.display = "none";

Answer:

const button = document.getElementById("change-text-btn");
button.addEventListener("click", () => {
  const paragraph = document.getElementById("paragraph");
  paragraph.textContent = "Button clicked!";
});

Answer:

const list = document.getElementById("list");
const numberOfItems = list.children.length;

Answer:

const newDiv = document.createElement("div");
newDiv.id = "new-div";

Answer:

const list = document.getElementById("list");
const newDiv = document.createElement("div");
newDiv.id = "new-div";
list.parentNode.insertBefore(newDiv, list);

Answer:

const mainHeading = document.getElementById("main-heading");
const hasHighlightClass = mainHeading.classList.contains("highlight");

Answer:

document.body.style.backgroundColor = "lightblue";

Answer:

const dropdown = document.getElementById("dropdown");
const selectedOption = dropdown.value;

Answer:

const myForm = document.getElementById("my-form");
myForm.addEventListener("submit", (event) => {
  event.preventDefault();
});

Answer:

const anchors = document.getElementsByTagName("a");
for (const anchor of anchors) {
  anchor.setAttribute("target", "_blank");
}

Answer:

const list = document.getElementById("list");
const clonedList = list.cloneNode(true);
document.body.appendChild(clonedList);

Answer:

const inputText = document.getElementById("input-text");
inputText.style.width = "300px";

Answer:

const inputText = document.getElementById("input-text");
inputText.removeAttribute("placeholder");

← Previous Next →