DOM 이란?
DOM(문서객체모델, Document Object Model)
- 객체 지향 모델로써 구조화된 문서를 표현하는 형식
- XML이나 HTML 문서의 프로그래밍 인터페이스
- 문서의 구조화된 표현 (structured Representation)을 제공하여 프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경 할 수 있도록 한다.
- DOM은 프로그래밍 언어와 독립적이다. 주로 자바스크립트를 사용하지만, DOM의 구현은 어떠한 언어에서도 가능하다.
DOM의 종류
Core DOM
HTML DOM
XML DOM
Document 객체
정의
- 웹 페이지를 의미한다.
- 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시 Document 객체부터 시작해야 한다.
<!DOCTYPE html>- HTML 글을 트리구조로 바꾼다고 생각하면 쉽다.
메소드
- HTML 요소의 선택
- HTML 요소의 생성
- HTML 이벤트 핸들러 추가
- HTML 객체의 선택
HTML 요소의 선택
새로운 HTML 요소를 선택하기 위해 제공되는 메소드
document.getElementById() // 해당 아이디의 요소 선택
document.getElementByClassName() // 해당 클래스에 속한 요소 선택
document.getElementByName() // 해당 name 속성값을 가지는 요소 선택
document.querySelectorAll() // 해당 선택자로 선택되는 요소 모두 선택
document.querySelector() // 해당 선택자로 선택되는 요소 1개 선택HTML 요소의 생성
HTML 요소를 생성하기 위해 제공되는 메소드
document.createElement() // 지정된 HTML 요소를 생성 (HTML object)
document.write() // HTML 출력 스트림을 통해 텍스트 출력 (단순 text)HTML 이벤트 핸들러 추가
HTML 요소에 이벤트 핸들러를 추가하기 위해 제공되는 속성
요소.oneclick = functin (){} // 마우스 클릭시 이벤트가 실행되면서 연결된 function이 실행DOM의 트리구조 (HTML => DOM)
자바스크립트와 DOM
DOM 요소의 선택
주의사항
document.querySelector(), document.querySelectorAll()메소드의 경우는id는 #,class는 .을 붙여야 한다.- () 안에 들어가는 id와 class 에 따옴표 붙여야 한다.
getElementByld는 s가 붙지 않는다. 해당 id의 요소는 딱 1개만 존재 한다.
var selectedItem = document.getElemensByTagName('li'); // HTML <LI> 요소 선택
var selectedItem = document.getElemensById('id'); // 아이디가 'id'인 요소 선택
var selectedItem = document.getElemensByClassName('odd'); // 클래스가 'odd'인 요소 선택
var selectedItem = document.getElemensByName('first'); // name 속성값이 'first'인 요소 선택
var selectedItem = document.querySelector('.icecream'); //클래스가 icecream인 선택자DOM 요소의 스타일 변경
selctedItem.style.color
selectedItem = document.getElemensById('even'); // 아이디가 'even'인 요소 선택
selectedItem.style.color = 'red' // 선택된 요소의 텍스트 색상을 변경DOM 요소의 내용 변경
str.innerHTML
var str = document.getElemensById('text'); // 아이디가 'text' 요소를 선택
str.innerHTML = '요소의 내용을 바꿉니다'; // 선택된 요소의 내용을 변경Node 객체
노드(Node)와 노드 트리
- 노드(Node): HTML DOM에서 정보를 저장하는 계층적 단위
- 노드 트리: 노드들의 집합으로, 노드 간의 관계를 나타낸다
- 자바스크립트에서는 HTML DOM을 이용하여 노드 트리에 포함된 모든 노드에 접근할 수 있다
노드 간의 관계
노드 트리의 모든 노드는 서로 계층적 관계를 맺고 있다.
<HEAD>와<BODY>는<HTML>을 부모노드로 가지고 있고, 둘은 형제노드 관계이다.<HTML>에게<HEAD>와<BODY>는 자식노드 이다.
노드의 종류
- 문서 노드(document node): HTML 문서 전체를 나타내는 노드이다.
- 요소 노드(element node): 모든 HTML 요소는 요소 노드로, 속성 노드를 가질 수 있는 유일한 노드이다.
- 주석 노드(comment node): HTML 문서의 모든 주석은 주석 노드이다. (간단한 노트를 남기기 위한 목적이라 자바스크립트에서는 그리 쓰이지 않음)
- 속성 노드(attribute node): 모든 HTML 요소의 속성은 속성 노드이며, 요소 노드에 관한 정보를 가진다. 하지만 해당 요소 노드의 자식노드(child node)에는 포함되지 않는다.
- 텍스트 노드(text node): HTML 문서의 모든 텍스트는 텍스트 노드이다.
노드의 값
노드에 대한 정보는 다음과 같은 프로퍼티를 통해 접근할 수 있다.
nodeName(이름) nodeValue(값) nodeType(타입)
nodeType: 노드의 타입을 숫자로 반환한다.
- 요소노드: 1 반환
- 속성노드: 2 반환
- 텍스트노드: 3 반환
- 주석노드: 8 반환
- 문서노드: 9 반환
document.childNodes[0].nodeName; // 문서의 첫 번째 노드 이름 선택
document.getElementById('heading').firstChild.nodeValue; // 아이디 'heading' 요소의 첫 번째 자식노트의 값 선택
document.getElementById('heading').firstChild.nodeType; //아이디 'heading' 요소의 첫 번째 자식 노트의 타입을 선택
이벤트(Event)
이벤트란?
- 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생
마우스 클릭, 색이 바뀌는 것, 마우스를 올렸을 때
- 자바스크립트는 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있다.
이벤트 종류
폼, 키보드, 마우스, HTML DOM, Window 객체 등
// 마우스 클릭 이벤트 얘시
//html 본문
<p onceclick = 'changeText(this)'>여길 클릭하세요!</p> // this는 <P> 자체를 의미
//javascript 본문
<script>
function changeText(element) {
element.innerHTML = '내용이 바뀌었습니다!';
} // <p>를 클릭하면 <p>의 text가 '내용이 바뀌었습니다!'로 바뀌게 된다이벤트 핸들러 (Event Handler)
이벤트가 발생했을 때 그 처리를 담당하는 함수
지정된 이벤트가 발생하면, 웹 브라우저는 그 요소에 등록된 이벤트 핸들러를 실행시킨다.
//이 함수는 HTML 문서가 로드될 때 실행된다
window.onload = function() {
// 아이디가 'text'인 요소를 선택한다
var text = document.getElementById('text');
text.innerHTML = 'HTML 문서가 로드 되었습니다.';
}이벤트 핸들러 등록 방법
- 저바스크립트 코드에서 프로퍼티로 등록하는 방법
window.onload = function() { } // 이 함수는 HTML 문서가 로드될 때 실행됨.- HTML 태그에 속성으로 등록하는 방법
<p onclick="this.innerText = '클릭!'">클릭해 보세요!</p>addEventListener()
객체나 요소의 메서드에 이벤트 램들러를 전달 할 때 사용한다.
대상객체.addEventListener(이벤트명, 실행할이벤트핸들러, 이벤트전파방식)
개발자를 꿈꾸는 코린이!