DOM이란?

1. DOM이란?

DOM (Document Object Model)은 HTML 요소를 Object(JavaScript Object) 처럼 조작(Manipulation)할 수 있는 Model이다. DOM은 document 객체를 통해 HTML (root doument)에 접근한다. HTML 구조가 JavaScript의 객체구조와 같은 구조라서, JavaScript의 DOM이 브라우저에 접근하기 가장 좋다.

2. 자주쓰는 Method

• console.dir : DOM 구조를 조회할 때 사용한다.
  ex) console.dir(document.body.children) 이라고 입력하여 Body Element의 자식 eliment에 바로 조회할 수 있다.
  ex) console.dir(document.body.children[1])이라고 입력하면 body element의 자식 중 1번째 자식을 조회할 수 있다.
• document.createElement(‘div’) // document객체의 createElement 메소드를 이용하여 div element를 만든다.
• document.querySelector : 조회하는 메소드
• document.cloneNode: 복제하는 메소드
• document.importNode : template를 활용하여 내용을 붙여넣을때 사용하는 메소드
• document.getElementByTagName(‘div’): div를 전부 조회할수 있다.
• document.querySelectorAll(‘div’): div를 전부 조회할수 있다.

3. DOM 이벤트

DOM 이벤트는 발생한 흥미로운 것을 코드에 알리기 위해 전달한다. 예를 들어 마우스를 클리가허나, 키보드를 누르는 등의 사용자 액션에 의해 발생하다. 브라우저 창 크기를 조절하거나, 스크롤하는것도 DOM 이벤트의 일종이다.
이벤트가 발생할 때 실행되는 함수를 이벤트 핸들러 라고 부른다.
이벤트와 관련된 속성은 on 이라는 접두어가 붙는다. ex) onclick, onkeyup 등