DOM 객체

문서 객체모델(DOM)은 HTML문서나 XML문서에 접근하기 위한 일종의 인터페이스이다. 문서 내의 모든 요소의 목적과 특징을 정의하고, 각각의 요소에 접근하는 방법을 제공한다.

 

DOM 요소의 선택

자바스크립트로 DOM요소를 다루기 위해서는 우선 해당 요소를 선택해야만 한다.

1. 태그 이름을 이용한 선택
2. 아이디를 이용한 선택
3. class를 이용한 선택
4. CSS선택자(selector)를 이용한 선택
5. HTML객체 집합을 이용한 선택

DOM 요소의 내용 변경

DOM을 이용하면 내용이나속성값등을 손쉽게 변경할 수 있다.

가장 쉬운 방법은 ? innerHTML프로퍼티를 이용하는 것

 

HTML 요소의 선택

 

HTML 요소를 선택하기 위해 제공되는 메소드

메소드설명

document.getElementsByTagName(태그이름)	해당 태그 이름의 요소를 모두 선택함.
document.getElementById(아이디)	해당 아이디의 요소를 선택함.
document.getElementsByClassName(클래스이름)	해당 클래스에 속한 요소를 모두 선택함.
document.getElementByName(name속성값)	해당 name 속성값을 가지는 요소를 모두 선택함.
document.querySelectorAll(선택자)	해당 선택자로 선택되는 요소를 모두 선택함.

 

HTML 요소의 생성

새로운 HTML 요소를 생성하기 위해 제공되는 메소드는

메소드설명

document.createElement(HTML요소)	지정된 HTML 요소를 생성함.
document.write(텍스트)	HTML 출력 스트림을 통해 텍스트를 출력함.

 

HTML 이벤트 핸들러 추가

HTML 요소에 이벤트 핸들러를 추가하기 위해 제공되는 메소드는 다음과 같습니다.

메소드설명

document.getElementById(아이디).onclick = function(){ 실행할 코드 }

마우스 클릭 이벤트와 연결될 이벤트 핸들러 코드

http://tcpschool.com/javascript/js_dom_document 참조