DOM
문서 객체 모델, HTML 단위 하나하나를 객체로 생각하는 모델
HTML 문서에 각 요소들을 트리형식으로 표현 = 트리형식 자료구조
자바스크립트를 이용해 생성하거나 수정하거나 삭제할 수 있음
document : 현재 dom 트리를 볼 수 있음
document.documentElement : html에 접근 가능
document.body; : body 태그에 접근
document.head; : head 태그에 접근
-> 사진 속에는 document와 body, head는 부모 - 자식 관계
body랑 head는 형제 관계(sibling)
document.body.style : 스타일 변경 가능
document.body.style.backgroudcolor : 배경색 변경 가능
const el = document.getElementById('first');
el; -> id가 first인 태그의 전부가 나옴
const pList = document.getElementsByTagName('p);
pList; -> p 태그 전부가 나옴
for(p of pList) {
p.style.fontSize = '30px';
}
-> p태그 전부에 폰트 사이즈가 30px
document.getElementsByClassName('link');
-> link라고 클래스 이름을 가진 요소가 나옴
document.querySelectorAll('.link'); -> link라고 클래스 이름을 가진 요소가 나옴
document.querySelectorAll('#first'); -> first라는 id를 가진 요소가 나옴
근데 아이디는 하나뿐이라서
document.querySelector('#first'); -> 제일 처음 요소하나만 가져옴
NodeList : HTML 문서와 같은 순서로 문서 내의 모든 노드를 리스트 형태로 저장하고 있고 배열이 아니라 배열처럼 색인번호(index) 통해서 각 노드에 접근 가능.
색인번호는 0부터 시작.
length 사용 가능
