1. 문서 객체 모델(DOM)이란?
웹 문서의 모든 요소를 자바스크립트를 이용하여 조작할 수 있도록 객체를 사용해 문서를 해석하는 방법.
2. DOM 트리
DOM을 조작하기 위해서는 웹문서 요소의 구조를 알아야 한다.
DOM의 구조는 부모 요소, 자식 요소로 되어 있다.
예)
<body>
<h1>제목</h1>
<p>본문</p>
</body>
위의 소스 코드는 아래와 같은 연결 관계가 있다.
<body> //부모 요소
<h1> <p> //자식 요소
-웹 문서의 태그는 요소 노드로 표현한다.
-태그가 품고 있는 텍스트는 해동 요소 노드(태그)의 자식 노드인 텍스트(Text) 노드로 표현
-태그의 속성은 모두 해당 요소 노드(태그)의 자식 노드인 속성(Attribute) 노드로 표현
-주석은 주석 노드로 표현
3. DOM 요소에 접근하기
<body>
<div id="container">
<h1 id="heading">에디오피아 게뎁</h1>
<div id="prod-img">
<img src="images/coffee-pink.jpg" alt="에디오피아 게뎁">
</div>
<div id="desc">
<h2 class="bright">Information</h2>
<p>2차 세계대전 이후 설립된
<span class="accent">게뎁농장</span>은
<span class="accent">SCAA 인증</span>을 받은 커피
</p>
<h2>Flavor Note</h2>
<p class="bright">은은하고 다채로운 꽃향, 망고, 다크 체리, 달달함이 입안 가득.</p>
</div>
</div>
</body>
위와 같은 구조가 있다면~
(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() : 새로 만든 요소 노드를 부모 노드에 추가 한다.
(예제)
function newRegister() {
var newP = document.createElement("p"); // 새 p 요소 만들기
var userName = document.querySelector("#userName");
var newText = document.createTextNode(userName.value); // 새 텍스트 노드 만들기
newP.appendChild(newText); // 텍스트 노드를 p 요소의 자식 요소로 연결하기
var delBttn = document.createElement("span"); // 새 button 요소 만들기
var delText = document.createTextNode("X"); // 새 텍스트 노드 만들기
delBttn.setAttribute("class", "del"); // 버튼에 class 속성 설정하기
delBttn.appendChild(delText); // 텍스트 노드를 button 요소의 자식 요소로 연결하기
newP.appendChild(delBttn); // del 버튼을 p 요소의 자식 요소로
var nameList = document.querySelector("#nameList");
// p 요소를 #nameList 맨 앞에 추가하기
nameList.insertBefore(newP, nameList.childNodes[0]);
userName.value = ""; // 텍스트 필드 지우기
var removeBttns = document.querySelectorAll(".del");
// removeBttns에 있는 요소 전체를 반복
for (var i=0; i<removeBttns.length; i++) {
// i번째 버튼을 클릭했을 때 실행할 함수 선언
removeBttns[i].addEventListener("click", function() {
//현재 부모 노드의 부모 노드가 있을 경우 실행
if (this.parentNode.parentNode)
//현재 부모 노드의 부모 노드를 찾아 현재 노드(this)의 부모 노드(p 노드) 삭제
this.parentNode.parentNode.removeChild(this.parentNode);
});
}
}
