자바스크립트는 웹 문서 안의 텍스트, 이미지, 표 등 웹 문서 요소를 자유롭게 조작할 수 있는 프로그래밍 언어이다. 자바스크립트가 웹 문서 요소를 조작할 수 있는 이유는, 이들 요소가 자바스크립트가 접근하여 사용할 수 있는 객체 형태로 준비되어 있기 때문이다. 그래서 이 객체를 특별히 문서 객체 모델이라고 구별하여 부른다.
DOM
웹 문서의 모든 요소를 자바스크립트를 이용하여 조작할 수 있도록 객체를 사용해 문서를 해석하는 방법
HTML or XML 문서에 접근하기 위한 일종의 인터페이스
자바스크립트는 이러한 객체 모델을 이용하여 다음과 같은 작업을 할 수 있다.
- HTML 요소나 속성을 추가 / 제거할 수 있습니다.
- HTML 문서의 모든 HTML 요소 / 속성을 변경할 수 있습니다.
- HTML 문서의 모든 CSS 스타일을 변경할 수 있습니다.
- HTML 문서에 새로운 HTML 이벤트를 추가할 수 있습니다.
- HTML 문서의 모든 HTML 이벤트에 반응할 수 있습니다.
Document 객체
Document 객체는 웹 페이지 그 자체를 의미합니다. 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시 Document 객체부터 시작해야 합니다. Document 객체는 HTML 요소와 관련된 작업을 도와주는 다양한 메소드를 제공합니다.
- HTML 요소의 선택
- HTML 요소의 생성
- HTML 이벤트 핸들러 추가
- HTML 객체의 선택
DOM Tree
DOM은 웹문서의 요소를 부모 요소와 자식 요소로 구분하며, 웹문서의 요소뿐 아니라 요소가 품고 있는 텍스트, 이미지도 자식으로 간주하여 표현한다.
웹 문서의 태그는
요소 노드로 표현한다.
태그의 속성은 해당 요소 노드의 자식 노드인속성 노드로 표현한다.
태그가 품고 있는 텍스트는 해당 요소 노드의 자식 노드인텍스트 노드로 표현한다.
주석은주석 노드로 표현한다.
DOM 요소의 선택
자바스크립트로 DOM 요소를 다루기 위해서는 우선 해당 요소를 선택해야만 한다. DOM 요소를 선택하는 방법은 다음과 같다.
- HTML 태그 이름을 이용한 선택
getElementsByTagName()함수는 HTML 태그 이름을 이용하여 DOM 요소를 선택한다.
참고로 함수 이름에 복수를 뜻하는 's가 있으면 여러 DOM 요소에 접근한다고 생각하면 된다.
- 아이디(id)를 이용한 선택
getElementById()함수는 아이디를 이용하여 HTML 요소를 선택한다.
- 클래스(class)를 이용한 선택
getElementsByClassName()함수는 클래스 이름을 이용하여 HTML 요소를 선택한다.
- CSS 선택자(selector)를 이용한 선택
querySelector(),querySelectorAll()함수는 CSS 선택자(id, class, 속성, 속성값 등)를 이용하여 HTML 요소를 선택합니다. 두 함수는 접근하는 DOM 요소 개수만 다를 뿐 사용방법은 같다.
태그 이름은 기호 없이 태그 이름만 사용하고, class 앞에는 마침표(.)를, id 값 앞에는 샵(#)을 붙이면 된다.
/*# 기호 유무 주의 */
document.getElementById("container")
document.querySelector("#container")<
getElementById()와querySelector()의 차이>
getElementById()를 비롯한getElementsByClassName(),getElementsByTagName()함수는 이름 안에 'Elements'가 들어가 있다. 이들 함수는 DOM의 노드 중 요소 노드까지만 접근이 가능하다. 반면querySelector(),querySelectorAll()함수는 요소 노드뿐만 아니라 텍스트 노드와 속성 노드까지 접근이 가능하다.
DOM 속성의 선택
HTML 태그의 속성을 가져오거나 수정하는 함수 : getAttribute(), setAttribute()
ex) 작은 이미지를 클릭했을 때 큰 이미지를 작은 이미지와 같은 이미지로 바꿈
var bigPic = document.querySelector("#cup"); // 큰 이미지 가져옴
var smallPics = document.querySelectorAll(".small"); // 작은 이미지들을 노드 리스트로 가져옴
for(var i = 0; i < smallPics.length; i++) {
smallPics[i].addEventListener("click", chagePic); // 노드를 클릭하면 changePic 함수 실행
}
function chagePic() {
var newPic = this.src; // click 이벤트가 발생한 대상의 src 속성 값 가져옴
bigPic.setAttribute("src", newPic); // newPic 값을 큰 이미지의 src 속성에 할당.
}
