[ JavaScript ] document

document로 DOM에 접근하기

• class명으로 DOM 접근하기

const wraps = document.getElementsByClassName("wrap");
console.log(wraps);

• ID 값으로 DOM 접근하기

const title = document.getElementById("title");
console.log(title)

• Tag명으로 DOM 접근하기

const buttons = document.getElementsByTagName("button");
console.log(buttons)

document 스타일 넣는법

1. DOM에 접근한다
2. (객체 선택).style.backgroundColor = "yellow";

document에 DOM 요소 추가하기

// 새 요소를 만들어요.
const new_div = document.createElement("div");

// 한 눈에 확인해볼 수 있도록 스타일을 조금 추가해줄게요. 그냥 div는 눈에 안보일테니까요!
new_div.style.backgroundColor = "green";
new_div.style.width = "100px";
new_div.style.height = "100px";

// 요소를 body에 추가해줍시다.
document.body.appendChild(new_div);

• 꿀팁 : script 코드를 body 아래에 넣는경우
  브라우저는 위에서 아래로 읽기 때문에 위에 두게 되면 스크립트 코드를 읽을 당시에는 요소가 없기때문