JavaScript 2차시 - 돔, 노드, 이벤트

DOM 이란? 

HTML내 원하는 위치에 접근하기 위한 하나의 방식 

 

DOM의 역할

DOM은 HTML 웹페이지와 JS를 연결하는 역할을 함

JS는 document라는 전역 객체를 통해 HTML에 접근

돔 트리란?

브라우저가 HTML 웹 페이지를 인식하는 방식을 계층화시켜 트리구조로 만든 객체

DOM 함수

getelementbyid : 특정 id 조회

getelementbyname :  특정 name 조회

getelementbytagename :   특정 tage 조회

getelementbyclassname :   특정 class 조회

노드란?

트리구조에서 root노드를 포함한 모든 각각의 객체
root 노드 : 가장 위에 있는 노드

노드의 종류

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

attribute node : 모든 HTML 요소의 속성은 속성 노드, 요소 노드에 관한 정보를 가지고 있음

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

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

 

노드관의 관계

루트 노드를 제외한 모든 노드는 단 하나의 부모 노드를 가짐

형제 노드 : 같은 부모 노드를 가지는 모든 노드

조상 노드 : 부모 노드를 포함해 계층적으로 현재 노드보다 상위에 존재하는 모든 노드

자손 노드 : 자식 노드를 포함해 계층적으로 현재 노드보다 하위에 존재하는 모든 노드

이벤트란?

어떠한 행동을 했을때의 사건을 발생 시키는것

이벤트 리스터란?

이벤트 리스너는 이벤트가 발생할 때까지 기다린 후 이벤트에 응답하는 함수

 

HTML에서 요소 가져오기

const 요소 = document.getElementById('아이디');

 

이벤트 리스너 붙이기

요소.addEventListener('이벤트종류', function() {

이벤트가 발생했을 때 실행할 코드

});