[3주차] DOM과 이벤트

1월 26일 자 학습 내용 정리입니다.

 

 

✅ DOM

문서 객체 모델(DOM, Document Object Model)은 객체 지향 모델로써 구조화된 문서를 표현하는 방식이다.

DOM은 XML이나 HTML 문서의 프로그래밍 인터페이스이며 구조화된 표현을 제공하여 프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경할 수 있게 한다.

DOM은 트리구조로 이루어져 있다.

 

DOM은 세 가지로 나눌 수 있다.

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

 

Document 객체는 웹페이지를 의미한다.

HTML 요소와 관련된 작업을 도와주는 다양한 메서드들을 제공하는데 이러한 Document 메서드들은 HTML 요소의 선택, 생성, 이벤트 핸들러 추가, HTML 객체 선택 등을 가능케 한다.

 

✔️ HTML 요소 선택 메서드

기존의 HTML 요소를 선택하기 위해 제공되는 메서드 들이다.

• getElementById() : 해당 아이디의 요소를 선택.
• getElementsByClassName() : 해당 클래스의 요소를 모두 선택.
• getElementsByName() : 해당 name 속성 값을 가지는 요소를 모두 선택.
• getElementsByTagName() : 해당 태그의 요소를 모두 선택.
• querySelector() : css 선택자로 선택되는 요소 중 제일 앞의 1개 선택.
• querySelectorAll() : css 선택자로 선택되는 요소 모두 선택.

 

✔️ HTML 요소 생성 메서드

새로운 HTML 요소를 생성하기 위해 제공되는 메서드 들이다.

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

createElement와 write의 차이점은 createElement는 div, p와 같은 태그를 생성하고 write는 텍스트를 출력하는 것이다.

따라서 write의 인자로 태그들을 포함하는 문자열을 넣어야 해당 태그를 이용한 요소를 얻을 수 있다.

 

✔️ HTML 이벤트 핸들러 추가 메서드

HTML 요소에 이벤트 핸들러를 추가하기 위해 제공되는 속성이다.

이벤트 속성 값에 함수를 넘기며 이벤트 발생 시 함수의 내용을 실행한다.

• onclick : 마우스의 클릭 이벤트와 연결되는 이벤트 핸들러.

 

 

✅ Node 객체

노드(Node)는 HTML DOM에서 정보를 저장하는 계층적 단위이다.

노드 트리는 노드들의 집합으로 노드간의 관계를 나타내며 노드 트리의 모든 노드는 계층적 관계를 맺고 있다.

따라서 하나의 노드는 부모 노드, 자식 노드, 형제 노드 등을 가질 수 있다.

자바스크립트에서는 HTML DOM을 이용하여 노드 트리의 모든 노드에 접근할 수 있다.

 

노드의 종류는 5개로 나눌 수 있는데 문서 노드, 요소 노드, 주석 노드, 속성 노드, 텍스트 노드이다.

• 문서 노드 : HTML 문서 전체.
• 요소 노드 : 모든 HTML 요소. 속성 노드를 가질 수 있는 유일한 노드.
• 주석 노드 : HTML 문서의 주석.
• 속성 노드 : 모든 HTML 요소의 속성. 요소 노드에 대한 정보를 가짐.
• 텍스트 노드 : HTML 문서의 텍스트.

 

노드는 노드의 정보에 대한 값을 가진다.

nodeName으로 노드의 이름, nodeValue로 노드의 값, nodeType으로 노드의 타입을 확인할 수 있다.

 

 

✅ Event

이벤트(Event)는 웹 브라우저가 알려주는 HTMl 요소에 대한 사건의 발생을 의미한다.

예를 들어 이벤트에는 마우스의 클릭, 마우스의 움직임, 키보드 입력 등이 있다.

자바스크립트는 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있다.

 

이벤트 타입(Event Type)은 발생한 이벤트의 종류를 의미한다.

이벤트의 타입에는 폼(form)에서 발생하는 submit, change, 마우스에서 발생하는 click, mouseover, mouseleave 등이 있다.

 

이벤트 핸들러(Event Handler)는 이벤트가 발생했을 때 그 처리를 담당하는 함수이다.

지정된 이벤트가 발생하면 웹 브라우저는 해당 요소에 등록된 이벤트 핸들러를 실행한다.