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)
HTML 요소가 id속성을 사용하는 경우.
getElementById("id명") 메서드를 사용해서 접근하고 innerHTML 속성을 사용해 내용에 접근한다.
id 속성 값의 특징 : 중복되지 않고 오직 하나의 요소에만 사용 가능.
태그명
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>
'프로그래밍언어 > JavaScript' 카테고리의 다른 글
| [JavaScript] JSON(JavaScript Object Notation) (0) | 2025.03.11 |
|---|---|
| [JavaScript] JS의 window객체 (0) | 2022.03.20 |
| [JavaScript] JS의 대화상자 (0) | 2022.03.14 |
| [JavaScript] 이벤트 연습 (0) | 2021.09.07 |
| [JavaScript] KIC campus 수강 내용 정리 (0) | 2021.09.04 |
