DOM과 이벤트 소개
DOM이란?
- 문서 객체 모델(Document Object Model) : 객체 지향 모델로써 구조화된 문서를 표현하는 형식
줄 글로 되어있는 것을 다음과 같은 트리 형태로 바꿔주는 것
-DOM은 XML이나 HTML 문서의 프로그래밍 인터페이스
-문서의 구조화된 표현을 제공하여 프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경할 수 있도록 함
DOM의 종류
- Core Dom : 모든 문서 타입을 위한 DOM
- HTML DOM : HTML 문서를 위한 DOM, 모든 HTML 문서는 HTML DOM을 통해 접근 가능
- XML DOM : XML 문서를 위한 DOM
Document 객체
- document 객체는 웹페이지 자체를 의미. 웹페이지에 존재하는 HTML 요소에 접근하고자 할때는 반드시 Documen 객체부터 시작해야 함.
Document 메소드
- HTML 요소의 선택
- HTML 요소의 생성
- HTML 이벤트 핸들러 추가
DOM의 트리구조(HTML -> DOM)
자바스크립트와 DOM
DOM 요소의 선택
tag name, class name, name은 복수개가 있을 수 있으니 getElements임
DOM 요소의 스타일 변경
DOM 요소의 내용 변경
Node 객체
노드와 노드 트리
- 노드 : HTML DOM에서 정보를 저장하는 계층적 단위
- 노드 트리 : 노드들의 집합으로, 노드 간의 관계를 나타냄
- 자바스크립트에서는 HTML DOM을 이용하여 노드 트리에 포함된 모든 노드에 접근 가능
이게 노드트리
노드 간의 관계
노드 트리의 모든 노드는 서로 계층적 관계를 맺고 있음
노드의 종류
- 문서 노드 : HTML 문서 전체를 나타내는 노드
- 요소 노드 : 모든 HTML 요소는 요소 노드로, 속성 노드를 가질 수 있는 유일한 노드
- 주석 노드 : HTML 문서의 모든 주석은 주석 노드
- 속성 노드 : 모든 HTML 요소의 속성은 속성 노드이며, 요소 노드에 관한 정보를 가진다. 하지만 해당 요소 노드의 자식 노드에는 포함되지 않는다.(부모 노드의 속성을 자식 노드가 가지지 않는다.)
- 텍스트 노드 : HTML 문서의 모든 텍스트는 텍스트 노드
노드의 값
childNodes[0]은 firstChild와 동일
이벤트
이벤트란?
- 이벤트 : 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생. 자바스크립트는 발생한 이벤트에 반응하여 특정한 동작을 수행할 수 있다.
이벤트 타입
- 발생한 이벤트의 종류(폼, 키보드, 마우스, HTML DOM, Window 객체 등)
(여기서 this는 p라는 태그에서 나온 DOM 객체 자기 자신을 의미)
이벤트 핸들러
- 이벤트가 발생했을 때 그 처리를 담당하는 함수. 지정된 이벤트가 발생하면, 웹 브라우저는 그 요소에 등록된 이벤트 핸들러를 실행시킨다.
- addEventListener(이벤트명, 실행할이벤트 핸들러, 이벤트전파방식) : 객체나 요소의 메서드에 이벤트 핸들러를 전달할 때 사용할 수 있는 메서드(전파방식은 생략가능한듯)
배운 것들을 활용하여 페이지 만들기
네비게이션 기능 구현
추가적으로 사용되는 기능
이미지 슬라이드 1
추가적으로 사용되는 기능
setInterval은 첫번째 인자로 함수, 두 번째 인자로 얼마를 간격으로 할 지 ms 단위의 시간
탭 버튼 구현
추가적으로 사용되는 기능
이미지 슬라이드 2
추가적으로 사용되는 기능
메뉴3 입장에서 이전 요소는 메뉴2 다음 요소는 메뉴4
사진 출처 - Elice
