DOM

DOM
DOM traversal

select element by id:

document.getElementById("bigText");

bigText

select element by name:

document.getElementsByName("radios");



select element by tag name:

document.getElementsByTagName("li");
  • list item#1
  • list item#2
  • list item#3

select element by class name:

document.getElementsByClassName("newClass");
item1
item2
item3

select elements by querySelector:


let elements = document.querySelectorAll(".newClass");
elements.forEach((element) => {
  element.style.backgroundColor = "lightblue";
});
        

DOM traversal

  • hat
  • tshirt
  • jeans
  • ring
  • necklace
  • earrings
  • jacket
  • coat
  • cape

let Lists = document.querySelector(".Lists");
let List1 = document.querySelector("#List1");
Lists.firstElementChild.style.backgroundColor = "lightblue";
Lists.firstElementChild.nextElementSibling.style.backgroundColor = "#FFB3CB";
Lists.lastElementChild.style.backgroundColor = "lightgreen";
List1.children[2].style.color = "red";

let children = Array.from(Lists.children);
children.forEach((child) => {
  child.style.color = "#591D30";
});
          

.firstElementChild

.lastElementChild

.parentElement

.nextElementSibling

.previousElementSibling

.children[]

Array.from(.children)