• 개요

▪︎ DOM

• DOM (Document Object Model) : 문서 객체 모델
  • HTML을 JavaScript가 제어할 수 있는 객체(Object)로 변환하는 것
  • Document : 객체화된 HTML의 요소에 접근하여 제어하고자 할 때 사용하는 객체
• HTML에 접근

console.log(document.head);
console.log(document.body);

▫︎ Document로 HTML의 요소 선택

• 이전 방식 (legacy)

console.log(document.getElementById("green"));
console.log(document.getElementsByClassName("default"));
console.log(document.getElementsByTagName("div"));

• 선호되는 방식 (quertSelector) : CSS Selector로 HTML 요소 선택

console.log(document.querySelector(".default"));
console.log(document.querySelector("#blue"));
console.log(document.querySelector("input"));
console.log(document.querySelector("[name='id']"));

• querySelectorAll
• 선택자에 해당하는 모든 요소 선택
• 불러온 요소들에 대한 순회 가능

console.log(document.querySelectorAll(".default"));
console.log(document.querySelectorAll(".others"));
console.log(document.querySelectorAll("div"));

▫︎ 요소 순회

• forEach

document
    .querySelectorAll("div")
    .forEach((el) => console.log("순회한 요소 :", el));

• for of

let defaultElements = document.querySelectorAll(".default");
for (let element of defaultElements) {
    console.log("for of :", element);
}