본 자료는 박규하 코치님과 Elice 플랫폼의 자료를 사용하여 정리하였습니다.

DOM

• 문서 객체 모델
  • 객체지향모델로써 구조화된 문서를 표현하는 방식
• HTML을 객체로 표현
• 화면에 보여지거나 HTML의 객체버전을 편집할 수 있다.
  • HTML문서는 변하지 않는다.
• 트리형태로 이루어져 있다.
• 메소드가 다양하다.

DOM의 종류

• Core DOM
  • 모든 문서 타입을 위한 DOM 모델
• HTML DOM
  • HTML 문서를 위한 DOM 모델
  • HTML 문서를 조작하고 접근하는 표준화된 방법
  • 모든 HTML 요소는 HTML DOM을 통해 접근 가능
• XML DOM
  • 문서를 위한 DOM 모델

Document 객체

• 웹 페이지 자체를 의미
• 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시 Document 객체부터 시작해야 한다.

Document의 메소드

HTML 요소의 선택

• document.getElementById(ID) ID 속성으로 요소를 선택
• document.getElementsByClassName Class 속성으로 요소를 선택
• document.getElementsByTagName Tag 속성으로 요소를 선택
• document.querySelector(element) ID, Class, Tag 속성으로 요소를 선택
• document.querySelectorAll(element) 같은 속성 요소를 전부 선택

HTML 요소의 속성 변경

• xxx.ClassList.add(Class) Class 속성에 Class 추가
• xxx.style.color="red" style 속성에 색상을 지정
• xxx.appendChild(child) 자식요소를 추가
• xxx.removeChild(child) 자식요소를 삭제
• xxx.innerText 요소의 내부 텍스트를 가져옴
• xxx.innerHTML 요소의 내부 자식태그를 가져옴

HTML 요소의 생성

• document.createElement() 지정된 HTML 요소를 생성
• document.write() HTML 출력 스트림을 통해 텍스트를 출력

HTML 이벤트 핸들러 추가

• xxx.onclick = function() {} 마우스 클릭 이벤트와 연결될 이벤트 핸들러

Node 객체

노드와 노드 트리

• 노드는 HTML DOM에서 정보를 저장하는 계층적 단위
• 노드트리는 노드들의 집합으로 노드간의 관계를 나타낸다.

노드간의 관계

• 노드트리의 모든 노드는 서로 계층적 관계를 맺고있다.

노드의 종류

• 문서노드
  • HTML 문서 전체를 나타내는 노드
• 요소노드
  • 모든 HTML 요소, 속성 노드를 가질 수 있는 유일한 노드
• 주석노드
  • HTML 문서의 모든 주석
• 속성노드
  • 모든 HTML 요소의 속성, 자식노드에 포함되지 않는다.
• 텍스트노드
  • HTML 문서의 모든 텍스트

노드의 값

• .nodeName 이름
• .nodeValue 값
• .nodeType 타임

이벤트

• 액션에 따라 발생하는 행위를 이벤트라고 한다.
  • 클릭(액션) -> 클릭이벤트(이벤트) -> 이벤트 핸들링
• 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생

이벤트 타입

• 마우스 클릭 click
• 키보드 입력 keydown
• 화면크기 변경 resize
• 페이지 로딩 load
• 등등...

이벤트 리스너

• 특정 요소에서 발생한 이벤트에 반응하도록 설정하는 함수
  • xxx.addEventListener(type, listener) 이벤트 등록
  • xxx.removeEventListener(type, listener) 이벤트 삭제

이벤트 버블링

• 하위요소에서 발생한 이벤트가 상위요소로 전파되는 현상

이벤트 위임

• 상위요소에 이벤트 리스너를 등록하여 하위요소들의 이벤트를 처리