1. DOM이란?
문서 객체 모델 (document object model)
객체 지향 모델. 구조화된 문서를 표현하는 형식.
문서를 트리로 만드는 것.
DOM은 XML이나 HTML 문서의 프로그래밍 인터페이스 제공함.
문서의 구조화된 표현을 제공하고 프로그래밍 언어가 문서의 구조와 스타일, 내용 등을 변경할 수 있게 해줌.
DOM의 종류
- core DOM : 모든 문서 타입을 위한 모델
- HTML DOM : HTML 문서를 위한 모델
- XML DOM : XML 문서를 위한 모델
- HTML DOM : HTML 문서를 조작하고 접근하는 표준화된 방법.
모든 HTML 요소는 HTML DOM을 통해 접근이 가능하다.
document 객체
웹페이지를 의미
웹 페이지에 존재하는 html요소에 접근하고자 할 때는 반드시 document 객체부터 시작해야 한다.
document 메소드
document는 html 요소와 관련된 작업을 도와주는 다양한 메소드를 제공함.
html 요소를 선택하거나 생성하거나 이벤트 핸들러 추가, 객체의 선택 등
-
html 요소 선택 메소드
document.getElementById(): 해당 아이디 요소 선택document.getElementsByClassName(): 해당 클래스에 속한 요소 선택document.getElementsByName(): 해당 name 속성값을 가지는 요소 선택document.querySelector(): 해당 선택자로 선택되는 요소 1개 선택document.querySelectorAll(): 해당 선택자로 선택되는 요소 모두 선택 -
html 요소 생성 메소드
document.createElement():지정된 html 요소 생성
object 넘김document.write(): html 출력 스트림을 통해 텍스트 출력
단순히 text 출력 -
html 이벤트 핸들러 추가
요소.onclick = functhion(){}: 마우스 클릭 이벤트와 연결될 이벤트 핸들러
DOM 트리 구조
문서가 트리모양 부모 아래 자식,형제들 계층 구조
2. 자바스크립트와 DOM
DOM요소 선택
-
HTML li 요소 선택
var item = document.getElementsByTagName("li"); -
아이디가 "id" 인 요소 선택
var item = document.getElementByid("id"); -
클래스가 "class" 인 요소 선택
var item = document.getElementsByClassName("class") -
name 속성값이 "me" 인 요소 선택
var item = document.getElementsByName("me")
요소를 선택하는 메소드 중에서 요소 하나만 선택하는 메소드는
document.getElementById() => 해당 아이디의 요소 선택
document.querySelector() => 해당 선택자로 선택되는 요소 1개 선택
두가지가 있고, 요소 모두 선택하여 배열로 반환하는 메소드는
document.getElementsByClassName() => 해당 클래스에 속한 요소 모두 선택
document.getElementsByName() => 해당 name 속성값을 가지는 요소 모두 선택
document.querySelectorAll() => 해당 선택자로 선택되는 요소 모두 선택
요소 선택뿐만 아니라 스타일 변경도 가능함.
DOM요소 스타일 변경
아이디가 "id" 인 요소 선택 후 텍스트 색상 변경
var item = document.getElementByid("id");
item.style.color = "red";내용변경도 할 수 있음.
DOM요소 내용 변경
아이디가 "id" 인 요소 선택 후 내용 변경
var item = document.getElementByid("id");
item.innerHTML = "요소 내용 변경할거임"3. Node 객체
노드는 HTML DOM 에서 정보를 저장하는 계층적 단위를 말함.
노드 트리는 노드들의 집합으로 이루어져있으며 노드 간의 관계를 나타낸다.
자바스크립트에서는 HTML DOM 을 통해 노드트리에 포함된 모든 노드에 접근할 수 있다.
노드 간의 관계
노드 트리의 모든 노드는 서로 계층적인 관계를 가지고 있다.
html
| \
head-body
| \
title header위에서 html은 루트노드로 head와 body의 부모 노드이고
head는 html의 첫번째 자식 노드, body는 두번째 자식 노드이며
head와 body는 형제노드이다.
노드의 종류
-
문서 노드 (document node)
HTML 문서 전체를 나타내는 노드 -
요소 노드 (element node)
모든 HEML 요소는 요소 노드로, 속성 노드를 가질 수 있다. -
주석 노드 (comment node)
HTMl 문서의 모든 주석은 주석노드임.
잘 사용하지 않음 ㅋ. -
속성 노드 (attribute node)
모든 HTML 요소의 속성은 속성 노드.
요소 노드에 관한 정보를 가짐.
하지만 해당 요소 노드의 자식노드에 포함되지는 않는다. -
텍스트 노드 (text node)
HTML 문서의 모든 텍스트는 텍스트 노드이다.
노드의 값
노드에 대한 정보는 다음과 같은 프로퍼티를 통해 접근할 수 있다.
-
HTML 문서의 모든 자식 노드 중 첫번째 노드의 이름 선택.
document.childNodes[0].nodeName; -
아이디가 id 인 요소의 첫번째 자식 노드의 노드값을 선택
document.getElementById("id").firstChild.nodeValue; -
아이디가 id 인 요소의 첫번째 자식 노드의 타입을 선택
document.getElementById("id").firstChild.nodeType;
4. 이벤트 (event)
이벤트란 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 말함.
사건은 다양한데, 마우스 클릭, 올리기, 옮기기, 키보드누르기 등등 이 있음
이것에 대해 자바스크립트가 반응해서 특정한 동작을 수행할 수 있음.
이벤트 타입
폼 키보드 마우스 HTML DOM window 객체 등 많음.
이벤트 핸들러
이벤트가 발생했을 때 그 처리를 담당하는 함수를 말함.
지정된 이벤트가 발생하면 웹 브라우저는 그 요소에 등록된 이벤트 핸들러를 실행시킴.
