
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)