DOM(Document Object Model)
- 브라우저가 HTML 문서에 접근 할 수 있도록 정의 해 놓은 표준 모델
- 문서 객체 : 태그를 객체로 만든 것
- 문서 객체 모델 : HTML 문서를 분석하고 표시하는 방식
- 계층적인 구조를 갖는 트리로 표현
- DOM에서 자바스크립트를 이용하면 프로그램 실행 중 웹 문서의 내용, 구조 및 스타일 등에 쉽게 접근하고 동적인 작업 가능
<!DOCTYPE html>
<html>
<haed>
<title>문서 제목</title>
</head>
<body>
<h1>HTML DOM</h1>
<p class="text">DOM 트리</p>
<body>
</html>
- document노드 : DOM트리의 루트 노트로 HTML문서 자체
- 요소(element)노드 : <body><h1><p><a> 등 요소들
- 텍스트 노드 : 문서제목, HTML DOM, DOM 트리 등 요소 안에 있는 텍스트들
- 속성(attribute)노드 : class 등 요소의 속성들
DOM 요소의 접근 방법
아이디(iid)
- getElementById("id명")
- HTML 요소가 id속성을 사용하는 경우
- innerHTML 속성을 사용해 내용에 접근
- id 속성 값의 특징 : 중복되지 않고 오직 하나의 요소에만 사용 가능
태그명(tag)
- getElementsByTagName("태그명")
- 지정한 태그명을 사용하는 모든 요소들을 리스트 형태로 반환
클래스명(class)
- getElementsByClassName("클래스명")
- 지정한 클래스명을 가진 모든 요소들을 리스트 형태로 반환
<!doctype html>
<head>
<meta charset="UTF-8">
<title>DOM 연습</title>
<script>
//id를 이용한 요소 접근
function print (msg){
var myDiv = document.getElementById("main");
myDiv.innerHTML = msg;
}
//태그명을 이용한 요소 접근
function changStyle (){
var myPs = document.getElementsByTagName("p");
for (var i=0; i <myPs.length; i++ ){
var myP = myPs.item(i);
myP.style.border = "1px solid #0000ff"
}
}
</script>
</head>
<body>
<div id="main">id선택자를 이용한 요소접근</div><br>
<input type="button" value="click me" onClick="print('id선택자 텍스트변경')">
<br><hr><br>
<p>태그명 이용한</p>
<p>요소 접근</p>
<p>테두리상자</p>
<input type="button" value="click me" onClick="changStyle()">
<br><hr><br>
<h3 class="chg">클래스명을 이용한</h3>
<div class="chg">요소 접급</div>
<span class="chg">리스트태그로 변경</span>
<script>
//클래스명을 이용한 요소 접근
var myClass=document.getElementsByClassName("chg");
document.write("<br><hr>각 요소의 내용:");
document.write("<ul>");
for (var i=0; i < myClass.length; i++ ){
document.write("<li>"+myClass[i].innerHTML+"</li>");
}
document.write("</ul>");
</script>
</body>
</html>
DOM 요소의 수정
요소의 내용 수정
- 요소명.innerHTML = 내용(프로퍼티는 HTML 태그까지 반영)
- 요소명.innerText = 내용(프로퍼티는 텍스트 내용을 표시)
- 요소명.textContent = 내용(내용만을 가져 올 때 사용)
<!doctype html>
<head>
<meta charset="UTF-8">
<title>DOM 연습</title>
<style> b {font-size:1.2em; color:blue;}</style>
</head>
<body>
<ul id="myList">
<li id="item1">HTML5+CSS</li>
<li id="item2">JavaScript+jQuery</li>
</ul>
<button onClick="compare()">리스트에 대해서 차이 확인</button><hr>
<b>innerHTML로 가져와서</b>
<div>
<b>1. innerHTML로 설정하기:</b> <div id="inner_inner"></div>
<b>2. textContent로 설정하기:</b> <div id="inner_content"></div>
<b>3. innerText 설정하기:</b> <div id="inner_text"></div>
</div><hr>
<b>textContent로 가져와서</b>
<div>
<b>1. innerHTML로 설정하기:</b> <div id="content_inner"></div>
<b>2. textContent로 설정하기:</b> <div id="content_content"></div>
<b>3. innerText 설정하기:</b> <div id="content_text"></div>
</div><hr>
<b>innerText 가져와서</b>
<div>
<b>1. innerHTML로 설정하기:</b> <div id="text_inner"></div>
<b>2. textContent로 설정하기:</b> <div id="text_content"></div>
<b>3. innerText 설정하기:</b> <div id="text_text"></div>
</div>
<script>
function compare(){
var x = document.getElementById("myList").innerHTML;
document.getElementById("inner_inner").innerHTML = x;
document.getElementById("inner_content").textContent = x;
document.getElementById("inner_text").innerText = x;
var y = document.getElementById("myList").textContent;
document.getElementById("content_inner").innerHTML = y;
document.getElementById("content_content").textContent = y;
document.getElementById("content_text").innerText = y;
var z = document.getElementById("myList").innerText;
document.getElementById("text_inner").innerHTML = z;
document.getElementById("text_content").textContent = z;
document.getElementById("text_text").innerText = z;
}
</script>
</body>
</html>
요소의 속성 수정
<body>
<p>이미지 위로 마우스를 옮겨 보세요</p>
<img id="image" src="resource/fish.jpg" height="100"
onMouseover="changeSize(300)" onMouseout="changeSize(100)">
<script>
function changeSize(imgHeight){
document.getElementById("image").height=imgHeight;
}
</script>
</body>
요소의 스타일 수정
- 요소명.style.CSS속성명="속성값;"
- 속성명에 하이픈('-')을 포함하고 있는 경우 두 번째 이후 단어의 첫글자를 대문자로 변환한다.
- (Ex. background-color' => 'backgroundColor')
<body>
<div id="main">
<p>버튼을 클릭하면 요소의 스타일이 변경됩니다.</p>
</div>
<input type="button" value="스타일 변경" onClick="changeStyle()">
<script>
function changeStyle(){
var myDiv = document.getElementById("main");
myDiv.style.backgroundColor="yellow";
myDiv.style.color="blue";
myDiv.style.fontStyle="italic";
}
</script>
</body>
DOM 노드 삽입과 삭제
새로운 요소 삽입
- var 새요소변수 = document.createElement("추가 할 새로운 요소명");
- var 텍스트노드변수 = document.createTextNode("추가 할 텍스트 내용");
- 새요소변수.appendChild(자식으로 추가 할 텍스트노드변수);
- var 부모요소 = document.getElementById("부모요소_아이디명");
- 부모요소.appendchild(새요소변수);
- var 속성노드변수 = document.createAttribute("추가 할 속성명");속성노드변수.value="속성값";
- 새요소변수.setAttributeNode(속성노드변수);
기존 HTML 요소의 삭제
- 부모노드.removeChild(삭제할 노드);
<head>
<script>
//새 요소의 삽입
var count=0;
function appendItem(){
count=count+1; //1,2,3,4,,,,
var newItem = document.createElement("div"); //var 새요소변수 = document.createElement("요소명");
newItem.setAttribute("id","item_"+count); //새요소변수.setAttribute(속성노드변수);
var html='새로 추가된 아이템['+count+']'+'<input type="button" value="삭제" '+'onclick="removeItem('+count+')" />';
newItem.innerHTML=html;
var itemListNode=document.getElementById("itemList");
itemListNode.appendChild(newItem); //부모요소.appendChild(새요소변수)
}
//기존 HTML 요소의 삭제
function removeItem(idCount){
var item=document.getElementById("item_"+idCount);
item.parentNode.removeChild(item); //부모노드.removeChild(삭제할노드)
}
</script>
</head>
<body>
<input type="button" value="추가" onclick="appendItem()">
<div id="itemList">
<!-- 자식태그를 만들어서 계속 추가 -->
<!--
<div id="item_1">새로 추가된 아이템1[삭제버튼]</div>
<div id="item_2">새로 추가된 아이템2[삭제버튼]</div> -->
</div>
</body>
