P3.7: DOM Queries & Selectors

The Document Object Model (DOM) is the tree-like structure browsers create from HTML files. Selecting DOM elements is key to making pages dynamic.


1. Core Selection Methods

  • document.getElementById("id")
  • document.querySelector(".selector") (Selects the first match)
  • document.querySelectorAll(".selector") (Selects all matches as a NodeList)

🎓 Practice Assignment Tasks

  • Create a page with 3 list items.
  • Select the first item using querySelector and change its background color to yellow inside the console.
Stuck? Hints available
// Write your JavaScript logic here
// Click 'Run Code' to see console outputs below
🔒 Code requirements not met yet. Complete the tasks above.
🔒 Complete the Practice Assignment above to unlock completion.
Advertisement
NS
Ask Nextsem
AI Mode
NS
Home
Course
Playground