1. document 객체
document 객체는 DOM의 루트 노드로서, DOM에 접근하기 위한 진입점이다.
2. html, body, head 태그 접근
DOM 트리 상단의 노드(html, body, head)은 document가 제공하는 프로퍼티를 사용해 접근할 수 있다.
✨ document.documentElement
<html>태그에 접근한다.
➡document.documentElement//<html>... </html>
✨ document.body
<body>태그에 접근한다.
➡document.body//<body>... </body>
➡document.body.style.padding = '100px';// body style 변경✨ document.head
<head>태그에 접근한다.
➡document.head//<head> ...</head>
3. ID로 접근
document.getElementById(id)를 이용해 노드에 접근한다.
const el = document.getElementById('first');
4. 태그로 접근
getElementsByTagName로 태그에 해당하는 요소를 찾는다.
const pList = document.getElementsByTagName('p');
4. 클래스 네임으로 접근
getElementsByClassName으로 해당 클래스에 접근한다.
document.getElementsByClassName('link');
5. css 선택자로 접근
querySelectorAll-> 해당 모든 노드 가져온다
querySelector-> 해당하는 첫 노드만 가져온다
document.querySelectorAll('.link');
document.querySelectorAll('#first');
document.querySelector('#first'); // 아이디는 하나뿐이므로, All 안해도 된다
