DAY06 [220925] DOM, 노드

DOM

: 문서 객체 모델 (document object model) xml 이나 html 문서에 접근하기 위한 일종의 인터페이스 문서 내의 모든 요소를 정의하고 각 요소에 접근하는 방법들을 제공

DOM TREE?

<html> - 최상위 태그

ㄴ <head> ㄴ <body>

ㄴ <title> <meta> <style>. / <header> <div> ….

document 객체

-웹페이지 자체를 의미

-웹 페이지에 존재하는 모든 html요소에 접근할 수 있도록 하는 js의 내장 객체

DOM selector

: 다양한 html 요소 중 내가 선택하고자 하는 요소에 접근할 수 있도록 하는 document 객체의 함수

⇒ dom에 접근하기 위해서는 반드시 document라는 객체로 시작

document.getElementById() ()안에 아이디를 가지고 있는 “요소”를 선택해서 가져옴

id는 한개! ⇒ 단일 객체를 반환

ex)

```html
<div id="banner"></div>

document.getElementById("banner");
// 아이디를 가지고 있는 요소를 가져옴
```

document.getElementsByClassName() ()안에 클래스를 가지고 있는 “요소”를 선택해서 가져옴

class는 n개! ⇒ 복수 객체를 반환

ex)

<div class="banner"></div>

const MENU_DOM = document.getElementsByClassName("banner");

for (let i = 0 ; i < MENU_DOM.length; i++) {
	MENU_DOM[i] ===>
}

document.querySelector ()안의 css선택자로 선택되는 “요소” 하나를 가지고 옴

ex)