Elice) DOM

 

---

 

 

1. DOM과 객체의 선택

 

DOM = HTML이나 XML 문서의 프로그래밍 인터페이스로 프로그래밍 언어가 문서의 구조, 스타일, 내용등을 변경할 수 있게 한다.

 

 

Core DOM : 모든 문서 타입을 위한 DOM 모델

XML DOM : XML 문서를 위한 DOM

HTML DOM : HTML 문서를 위한 DOM

 

 

따라서 모든 HTML의 요소는 DOM을 통해서 접근이 가능하다.

 

 

 

---

 

 

2. Document

 

Document 객체 : 웹 페이지 자체를 의미하며, 웹 페이지에 존재하는 HTML요소에 접근하고자 할 때는 반드시 Document 객체를 통해서 접근한다. (ex. document.write() , document.getElementById() )

 

 

Document에 관련하여 HTML 요소와 관련된 작업을 도와주는 다양한 메소드를 제공한다.

 

- HTML 요소 선택

- HTML 요소의 생성

- HTML 이벤트 핸들러 추가

- HTML 객체의 선택

 

대표적인 document 메소드

 

document.getElementById() : 해당 아이디의 요소를 선택

document.getElementByClassName() : 해당 클래스에 속한 요소를 선택

document.getElementByName() : 해당 name 속성값을 가지는 요소를 선택

document.querySelectorAll() : 해당 선택자로 선택되는 요소를 선택

document.querySelector() : 해당 선택자로 선택되는 요소를 1개 선택

document.createElement() : 지정된 HTML 요소를 생성

document.write() : 출력 스트림을 통해 텍스트를 출력

 

DOM 요소의 선택

var var1 = document.getElementsByName (”Name”)

DOM 요소의 스타일 변경

var var1 = document.getElementsByName (”Name”)

var1.style.color = “red”; → 선택된 요소의 텍스트 색상을 변경

DOM 요소의 내용 변경

var var1 = document.getElementsByID (”text”)

var1 innerHTML = “요소의 내용을 바꿉니다.”;

 

 

---