[ JavaScript ] document

inseongei·2022년 5월 20일
0

JavaScript

목록 보기
26/28
post-thumbnail

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 아래에 넣는경우
    브라우저는 위에서 아래로 읽기 때문에 위에 두게 되면 스크립트 코드를 읽을 당시에는 요소가 없기때문
profile
2022.05.09 START

0개의 댓글