DOM 이란

#. DOM (Document Object Model)이란?

- 컴퓨터가 문서를 잘 처리할 수 있도록 문서에 대한 구조를 약속한 것

- Tree 형태 특징이 있다.

- 각각의 노드에 하나의 부모가 있고 여러개의 자식이 있는 구조(태그가 중첩되는 것과 일맥상통하다.)

원하는 노드에 접근할 수 있다.

- firstElementChild : 첫 자식 엘리먼트

- lastElementChild : 마지막 자식 엘리먼트

- nextElementSibling : 같은 레벨의 형제 엘리먼트에 접근하는 방법

- previousElementSibling : '''

- 등 속성으로 원하는 노드에 접근하여 속성을 줄 수 있다.

 

= 단일 Element 선택

- Document API

- document.getElementBy~ : 단일 엘리먼트를 선택하는 메소드

- document.getElementsBy~ : 다중 엘리먼트를 선택하는 메소드

 

- document.getElementById 메소드

- 인자로 HTML element 태그의 id를 전달하면 해당 엘리먼트가 반환됨

 

- Element API

- .innerHTML 속성 : 엘리먼트 안의 HTML 코드를 변경

- .innetText 속성 : 엘리먼트 안의 텍스트를 변경

- .style 속성 : css를 변경 가능

 

- getAttribute 메소드

 1. element의 속성의 값을 얻어옴

 2. 하나의 인자 : attribute 이름을 받음

 3. 직접 객체에 동기화되지 않는 속서엥 대해서도 접근이 가능

 

- setAttribute 메소드

 1. element의 속성의 값을 설정함

 2. 두개의 인자 : attribute 이름, 설정할 속성의 값을 받음

 3. 직접 객체에 동기화되지 않는 속성에 대해서도 값 설정이 가능

 

= 다중 Element 선택

- Document API

- document.getElementsBy~ : 다중 엘리먼트를 선택하는 메소드, 배열형태로 값을 반환함

- document.getElementsByTagName 메소드 : 인자로 HTML element 태그의 이름ㅇ르 전달하면 해당 엘리먼트들이 반환됨

- document.getElementsClassName 메소드 : 인자로 class의 이름을 전달하면, 해당 class의 모든 엘리먼트가 배열로 반환됨

- document.getElementsByName 메소드 : 인자로 name을 전달하면, 해당 name 속성을 가진 모든 엘리먼트가 배열로 반환됨

 

- Element API

- .value 속성

 1. input element에 입력된 값은 .value를 통해 얻어올 수 있음

 2. getAttribute 메소드로는 받아올 수 없다는 점 주의

 

= CSS Selector를 이용한 Element 선택

- Document API

- document.querySelector : css selector를 기반으로 엘리먼트를 선택

- 조건에 부합하는 element가 여러개인 경우 첫 엘리먼트만 반환.

- document.querySelectorAll : css selector를 기반으로 만족하는 모든 엘리먼트를 선택

 

- CSS Selector

- # : name 기반으로 선택

- . : class 기반으로 선택

- , : 여러개의 셀렉터를 사용

 

= Element 추가/삭제

- Document API

- document.createElement() : 문자열 인자로 element tag를 입력하면 해당 엘리먼트가 생성돼 반환됨

 

- Element API

- .appendChild(인자) : 추가할 element를 인자로 받아 호출된 element의 자식으로 인자를 추가함

- .removeChild(인자) : 삭제할 element를 인자로 받아 호출된 element의 자식중에서 해당 element를 삭제

- .insertBefore(인자1, 인자2) : 인자1로 받은 element를 호출된 element의 자식중 인자2의 이전에 추가함

- .cloneNode() : 호출된 element를 복사해서 반환함