The HTML DOM Tree of Objects
DOM
-
문서 객체 모델(The Document Object Model)
-
HTML, XML 문서의 프로그래밍 인터페이스
-
DOM 객체는 DOM 트리의 root node, 즉
<html>요소에 접근하게 해준다.
-- tree 구조에서 root node 를 포함한 모든 개체를 node라고 표현한다.
-- head, body, title, script, h1, header 등의 태그 뿐 아니라 태그 안의 텍스트나 속성 등도 모두 node에 속한다. -
DOM 을 통해
<html>페이지에 접근 및 수정이 가능하다. -
DOM 은 프로그래밍 언어는 아니지만 DOM 이 없다면 자바스크립트 언어는 웹 페이지 또는 XML 페이지 및 요소들과 관련된 모델이나 개념들에 대한 정보를 갖지 못하게 된다.
DOM API를 활용해 DOM을 수정 하기
브라우저는 DOM Tree찾고 조작하는 걸 쉽게 도와주는 여러 가지 메서드를(DOM API)를 제공한다.
DOM을 통해 웹페이지를 조작하려면 다음 순서에 맞게 API를 사용해야 한다.
- 조작하고자하는 요소를 선택 또는 탐색한다.
- 선택된 요소의 콘텐츠 또는 속성을 조작한다.
document.getElementById(id)
// id 값으로 요소 노드 한 개를 선택한다.
// 여러개가 선택된 경우 첫번째 요소만 반환한다.
document.querySelector(cssSelector)
// CSS 선택자로 요소 노드 한 개를 선택한다.
// 여러개가 선택된 경우 첫 번째 요소만 반환한다.
document.getElementsByClassName(class)
//class 값으로 요소 노드를 모두 선택한다.
//공백을 사용하면 여러 개의 class를 지정할 수 있다.
//HTMLCollection 형태로 반환한다.
document.getElementsByTagName(tagName)
//태그 명으로 요소 노드를 모두 선택한다.
//HTMLCollection 형태로 반환한다.
document.querySelectorAll(selector)
//CSS 선택자로 요소 노드를 모두 선택한다.
//NodeList 형태로 반환한다.Event
정적인 상황에서 HTML 요소에 대해 동적인 사건이 발생하는 것.
마우스 이벤트(클릭, 스크롤, 드래그 등), 포커스 이벤트, 키보드 이벤트 등이 있다.
addEventListner
이벤트가 발생했을 때 실행되는 코드블럭으로 즉, 함수이다.
DOM객체. addEventListener(이벤트명, 실행할 함수명, 옵션)
let btn = document.querySelector('.btn'); // html 내에 있는 .btn class 찾아서 btn 함수에 저장
btn.addEventListner('click',btnClickHandler);
⬇️
btn.
// 이벤트를 발생시킬 대상객체
addEventListner('click', btnClickHandler);
// 실행할 메서드(이벤트 이름, 이벤트가 발생했을때 실행시킬 함수);자주 사용하는 이벤트의 종류
click – 마우스버튼을 클릭하고 버튼에서 손가락을 떼면 발생한다.
mouseover – 마우스를 HTML요소 위에 올리면 발생한다.
mouseout – 마우스가 HTML요소 밖으로 벗어날 때 발생한다.
mousedown – 클릭을 하기 위해 마우스버튼을 누르고 아직 떼기 전인 그 순간, HTML요소를 드래그할 때 사용할 수 있다.
mouseup – 마우스버튼을 떼는 그 순간, 드래그한 HTML요소를 어딘가에 놓을 때 사용할 수 있다.
mousemove – 마우스가 움직일때마다 발생한다. 마우스커서의 현재 위치를 계속 기록하는 것에 사용할 수 있다.
focus – HTML요소에 포커스가 갔을때 발생한다.
blur – HTML요소가 포커스에서 벗어났을때 발생한다.
keypress – 키를 누르는 순간에 발생하고 키를 누르고 있는 동안 계속해서 발생한다.
keydown – 키를 누를 때 발생한다.
keyup – 키를 눌렀다가 떼는 순간에 발생한다.
load – 웹페이지에서 사용할 모든 파일의 다운로드가 완료되었을때 발생한다.
resize – 브라우저 창의 크기를 조절할때 발생한다.
scroll – 스크롤바를 드래그하거나 키보드(up, down)를 사용하거나 마우스 휠을 사용해서 웹페이지를 스크롤할 때 발생한다. 페이지에 스크롤바가 없다면 이벤트는 발생하지 않다.
unload – 링크를 클릭해서 다른 페이지로 이동하거나 브라우저 탭을 닫을 때 혹은 브라우저 창을 닫을 때 이벤트가 발생한다.
change – 폼 필드의 상태가 변경되었을 때 발생한다. 라디오 버튼을 클릭하거나 셀렉트 박스에서 값을 선택하는 경우를 예로 들수 있다.
