본문 바로가기
Elice SW 2/TIL

DAY 9 - TIL

by 자이구 2022. 4. 17.

DOM

문서 객체 모델(Document Object Model)

-객체 지향 모델로써 구조화된 문서를 표현하는 형식이다.

-XML이나 HTML 문서의 프로그래밍 인터페이스

 

Core DOM : 모든 문서 타입을 위한 DOM 모델

HTML DOM : HTML 문서를 위한 DOM 모델

XML DOM : 문서를 위한 DOM 모델

 

Document 객체는 웹 페이지를 의미한다. 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때는

반드시 Document 객체부터 시작해야한다.

Document 메소드

-HTML 요소의 선택                ex) document.getElementById()

-HTML 요소의 생성                ex) document.createElement()

-HTML 이벤트 핸들러 추가      ex) 요소.onclick = function(){}

-HTML 객체의 선택

 

 

Node

HTML DOM에서 정보를 저장하는 계층적 단위

 

Node Tree

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

 

Node 종류

문서 노드 : HTML 문서 전체를 나타내는 노드

 

요소 노드 : 모든 HTML 요소는 요소 노드로, 속성 노드를 가질 수 있는 유일한 노드

 

주석 노드 : HTML 문서의 모든 주석은 주석 노드

 

속성 노드 : 모든 HTML 요소의 속성은 속성 노드이며, 요소 노드에 관한 정보를 가진다. 

               해당 요소 노드의 자식 노드에는 포함되지 않는다.

 

텍스트 노드 : HTML 문서의 모든 텍스트는 텍스트 노드

 

Node의 값

nodeName

nodeName 프로퍼티는 노드 고유의 이름을 저장하므로, 수정할 수 없는 읽기 전용 프로퍼티

요소 노드의 nodeName 프로퍼티는 언제나 해당 HTML 요소의 태그 이름을 대문자로 저장합니다.

문서 노드(document node) #document
요소 노드(element node) 태그 이름 (영문자로 대문자)
속성 노드(attribute node) 속성 이름
텍스트 노드(text node) #text

nodeValue

노드의 값을 저장

요소 노드(element node) undefined
속성 노드(attribute node) 해당 속성의 속성값
텍스트 노드(text node) 해당 텍스트 문자열

nodeType

노드 고유의 타입을 저장하므로, 수정할 수 없는 읽기 전용 프로퍼티

요소 노드(element node) 1
속성 노드(attribute node) 2
텍스트 노드(text node) 3
주석 노드(comment node) 8
문서 노드(document node) 9

 

Event

웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생

JS는 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있다. 

 

이벤트 타입

발생한 이벤트의 종류 (폼, 키보드 ,마우스 , HTML DOM, window 객체 등등)

 

이벤트 핸들러

이벤트가 발생하였을 때 그 처리를 담당하는 함수

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

 

'Elice SW 2 > TIL' 카테고리의 다른 글

DAY 12 - TIL  (0) 2022.04.21
DAY 11 - TIL  (0) 2022.04.19
DAY 8 - TIL  (0) 2022.04.17
DAY 7 - TIL  (0) 2022.04.15
DAY 6 - TIL  (0) 2022.04.14

댓글