DOM (Document Object Model)
DOM : 웹페이지의 HTML을 계층화시켜 트리구조로 만든 객체(Object) 모델
JS는 이 model로 웹페이지에 접근하고 페이지를 수정
HTML인 웹페이지와 JS 서로 잇는 역할
innerHTML : HTML에서 특정 text 내용을 변경
style.backgroundColor = 'blue' : CSS에서 배경색을 변경
=> JS에서 스타일을 수정할때는 camelCase로 써야함 (hypen(-) 사용X)
.createElement : HTML에서 element요소 만들기
appendChild : 만든 요소를 부모 요소에 지정해줄때
문서(HTML)를 객체 형태로 모델링,
HTML에서 원하는 위치에 접근
Dom Tree
<script> 의 위치는?
HTML 태그들 사이에 SCRIPT가 위치할 경우,
- HTML 읽는 과정에서
<body>가장 끝에 입력한다.
<head>가장 마지막에 입력한다.
<script src="weegle.js" defer>
document.body.innerText = "39기 안녕하세요!"
document.body.innerHTML = "<script> "
class => .
tag => input
id => #
document.body.querySelctor("") 접근 불필요
document.body.querySelctorAll 접근 필요 유사배열 형태로 반환하므로
document.body.getElementById 접근 불필요
document.body.getElementByClassName => index 접근 필요
NodeList 찾아보기
매일매일 성장하는 개발자