1. 문서 객체 모델(DOM)이란?
웹 문서의 모든 요소를 자바스크립트를 이용하여 조작할 수 있도록 객체를 사용해 문서를 해석하는 방법.
2. DOM 트리
DOM을 조작하기 위해서는 웹문서 요소의 구조를 알아야 한다.
DOM의 구조는 부모 요소, 자식 요소로 되어 있다.
예)
<body>
<h1>제목</h1>
<p>본문</p>
</body>
위의 소스 코드는 아래와 같은 연결 관계가 있다.
<body> //부모 요소
<h1> <p> //자식 요소
-웹 문서의 태그는 요소 노드로 표현한다.
-태그가 품고 있는 텍스트는 해동 요소 노드(태그)의 자식 노드인 텍스트(Text) 노드로 표현
-태그의 속성은 모두 해당 요소 노드(태그)의 자식 노드인 속성(Attribute) 노드로 표현
-주석은 주석 노드로 표현
3. DOM 요소에 접근하기
위와 같은 구조가 있다면~
(1) id 선택자로 접근하는 함수 : getElemenById()
document.getElementById("heading"); //결과 : <h1 id="heading">에티오피아 게뎁</h1>
이렇게 접근하고, 이벤트를 연결해 해당 요소에 함수를 적용할 수 있다.
//해당 요소를 클릭하면 폰트 사이즈가 변한다.
document.getElementById("heading").onclick = function() {
this.style.fontSize = "5em";
}
(2) class 값으로 접근하는 함수 : getElementsByClassName()
class 선택자는 id와 다르게 2개 이상의 웹 요소에 접근이 가능하다. 배열과 비슷하다.
document.getElementsByClassName("accent"); //결과 [span.accent, span.accent]
1개만 접근하고 싶으면 배열의 인덱스처럼 해야 한다.
document.getElementsByClassName("accent")[0]; //결과 : <span class="accent">게뎁농장</span>
document.getElementByClassName("accent")[0].style.textDecoration="underline"//결과:게뎁농장에 밑줄 생김
(3) 태그 이름으로 찾아내는 함수 : getElementsByTagName()
id, class가 없는 DOM 요소에 접근 할 때 태그 이름으로 접근한다. 태그 이름은 중복이 많기에 배열로 저장하고 접근할 수 있다.
document.getElementsByTagName("h2"); //결과 [h2, h2]
//h2 요소 중 첫번째 요소의 배경색을 바꾼다.
document.getElementsByTagName("h2")[0].style.backgroundColor='#eee';
(4) id, class, 태그이름 다 사용할 수 있는 querySelector(), querySelectorAll() 함수
document.querySelector(".클래스명"); //클래스로 접근할 때는 마침표(.)을 앞에 붙인다.
document.querySelector("#id"); //id로 접근할 때는 샵(#)을 앞에 붙인다.
document.querySelector("태그이름"); //태그 이름으로 접근할 때는 이름만 쓴다.
document.querySelectorAll(); //배열 형식으로 접근할 때 사용
4. DOM에서 이벤트 처리 하기
var pic=document.querySelector('#pic');
pic.onclick= changPic; //pic 요소를 누르면 changPic()함수 실행
function changPic() {
pic.src="images/boy.png";
}
addEventListener() 함수로 여러 이벤트 한번에 처리하기
var pic = document.querySelector('#pic');
pic.addEventListener("mouseover", changePic, false); //마우스 올리면 남자 그림으로 변경
pic.addEventListener("mouseout", originPic, false); //마우스 벗어나면 여자 그림으로 변경
function changePic() {
pic.src = "images/boy.png";
}
function originPic() {
pic.src = "images/girl.png";
}
5. DOM에 요소 추가하기
(1) createElement() : 새 요소 노드를 만든다.
(2) createTextNode() : 텍스트 내용이 있을 경우 텍스트 노드를 만든다.
(3) appendChild() : 텍스트 노드를 요소 노드에 자식 노드로 추가
(4) createAttribute() : 요소에 속성이 있을 경우 속성 노드를 만든다.
(5) setAttributeNode() : 속성 노드를 요소 노드에 연결한다.
(6) appendChild() : 새로 만든 요소 노드를 부모 노드에 추가 한다.
(예제)
