문서 객체 모델(Document Object Model, DOM)이란 ?

- 웹 페이지 콘텐츠를 조작하는 메소드와 인터페이스를 제공한다.

- XML을 HTML에서 사용할 수 있도록 확장된 애플리케이션 프로그래밍 인터페이스이다

- DOM(Document Object Model)은 HTML 문서의 모든 요소에 접근하여 방법을 정의한 API이다.

- DOM은 전체 페이지를 노드 계층 구조로 변환하며, HTML 페이지의 각 부분은 각기 다른 데이터를 포함하는 다양한 타입의 노드로 표현된다.

- DOM은 문서를 표현하는 트리를 생성하고 개발자는 이를 통해 문서의 콘텐츠와 구조를 자유롭게 추가, 수정, 제거할 수 있다.

- DOM은 W3C의 표준 객체 모델이며, 트리 구조로 표현된다.

 

자바스크립트를 이용한 문서 객체 모델 사용 예

- 새로운 HTML요소나 속성을 추가할 수 있다.

- 존재하는 HTML 요소나 속성을 제거할 수 있다.

- HTML 문서의 모든 HTML 요소를 변경할 수 있다.

- HTML 문서의 모든 HTML 속성을 변경할 수 있다.

- HTML 문서의 모든 CSS 속성을 변경할 수 있다.

- HTML 문서에 새로운 HTML이벤트를 추가할 수 있다.

- HTML 문서의 모든 HTML 이벤트에 반응할 수 있다.

 

HTML DOM API

document 객체

- document 객체는 웹 페이지 그 자체를 의미하며, 웹 페이지에 존재하는 HTML 요소에 접근할 때 document객체로 접근한다.

- document 객체는 Document 인터페이스 구현체이다.

- HTMLDocument는 HTML에 특화된 Document의 하위 인터페이스로서 location 프로퍼티를 비롯해 forms[] 배열, write() 메소드 등 다양한 문서 프로퍼티와 메소드가 정의되어 있다.

 

Node

- DOM의 기본 원자를 Node이며 노드는 HTML 문서의 트리를 구성하는 단위이다.

- Document, Element, Text, Comment 등 모두 Node로부터 파생되며, Node의 속성은 DOM의 모든 객체가 공통으로 지원한다.

- HTML DOM은 노드(node)들을 정의하고, 그들 사이의 관계를 설명해 주는 역할을 한다.

- 자바스크립트에서는 HTML DOM을 이용하여 노드 트리에 포함된 모든 노드에 접근할 수 있다.

 

예제1

더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">

function getElements(attrName, attrValue) {
	// 모든 요소 
	var elements = document.getElementsByTagName("*");
	var founds = [];
	
	for(var i=0; i<elements.length; i++) {
		if(elements[i].hasAttribute(attrName) && elements[i].getAttribute(attrName).toLowerCase() === attrValue.toLowerCase()) {
			founds.push(elements[i]);
		}
	}
	
	return founds;
}


function result() {
	var s;
	
	// id로 접근
	var name = document.getElementById("name").value; 
	
	// name으로 접근
	var age = document.getElementsByName("age")[0].value;
	
	// tag로 접근
	var birth = document.getElementsByTagName("input")[2].value;
	
	// 선택자로 접근
	// var chk = document.querySelector("input[type=checkbox]").checked;
	
	// 속성으로 접근
	var chk = getElements("type", "checkbox")[0].checked;
	
	// class 속성으로 접근
	var tel = document.getElementsByClassName("telClass")[0].value;
	
	s = "<p>이름 : " + name + "</p>";
	s += "<p>나이 : " + age + "</p>";
	s += "<p>생년월일 : " + birth +", 양력 : " + chk + "</p>";
	s += "<p>전화번호 : " + tel + "</p>";
	
	// document.getElementById("layout").innerText = s;
	// document.getElementById("layout").innerHTML = s;
	// 선택자로 접근(클래스 등 동일한 이름의 선택자가 두 개 이상이면 처음 객체만 찾음)
	document.querySelector("#layout").innerHTML = s;
	
	// 스타일 변경
	var inputs = document.getElementsByTagName("input");
	for(var i = 0; i<inputs.length; i++) {
		if(inputs[i].type === "text") {
			inputs[i].style.border = "1px solid red";
		}
	}
	
	// document.getElementById("layout").style.background = '#ff0';
	// background-color
	document.getElementById("layout").style.backgroundColor = '#ff0';
	
}
</script>


</head>
<body>

<h3>DOM</h3>

<div>
	<p>이름 : <input type="text" id="name"> </p>
	<p>나이 : <input type="text" name="age"> </p>
	<p>생년월일 : <input type="text"> <input type="checkbox">양력 </p>
	<p>전화번호 : <input type="text" class="telClass"> </p>
	<p>
		<button type="button" onclick="result()">확인</button>
	</p>
</div>
<div id="layout"></div>

</body>
</html>

 

노드 추가 및 삭제

더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<script type="text/javascript">
function fun() {
	// alert("음 언제 배웠지 ???");
	alert(event.currentTarget.firstChild.nodeValue);
}


// 속성 값 및 자식 노드 수 알아보기
function sub1() {
	var str;
	var div = document.getElementById("layout");
	
	// 속성 값 가져오기 
	str = div.getAttribute("style");
	
	// 자식 노드 정보(childNodes : 문자열, 공백, 엔터 등도 검색)
	// (NodeList(7) [text, p, text, p, text, p, text])
	// str += "\n자식수 : " + div.childNodes.length; // 7
	// console.log(div.childNodes);
	// 자식 노드 정보(children:태그만)
	str += "\n자식수 : " + div.children.length; // 3
	// console.log(div.children); // [p, p, p]
	alert(str);
}

// 노드를 마지막에 추가
function sub2() {
	var div = document.getElementById("layout");
	
	var node = document.createElement("p");
	node.setAttribute("onclick", "fun();"); // click 이벤트 추가
	var textNode = document.createTextNode("마지막!!!");
	node.appendChild(textNode);
	div.appendChild(node);
}

// 노드를 특정 노드 앞에 추가
function sub3() {
	var div = document.getElementById("layout");
	
	var node = document.createElement("p");
	var textNode = document.createTextNode("앞!!!");
	node.appendChild(textNode);
	div.insertBefore(node, div.childNodes[0]);
	// div.insertBefore(node, div.childNodes[1]);
	// div.insertBefore(node, div.children[1]);
}

// 노드 삭제
function sub4() {
	var div = document.getElementById("layout");
	if(div.childNodes.length > 1) {
		div.removeChild(div.childNodes[1]);
	}
}

// 스타일 없애기
function sub5() {
	var div = document.getElementById("layout");
	// div.style.border = "none";
	div.style.removeProperty("border");
}

// 처음 p 태그 세개를 클릭하면 요소의 text 값 가져오기
window.onload = function() {
	var ps = document.getElementById("layout").children;
	for(var i=0; i<ps.length; i++){
		ps[i].addEventListener("click", function() {
			alert(this.firstChild.nodeValue); // 태그의 텍스트 가져오기
		})
	}
}

</script>


</head>
<body>

<h3>노드 추가 및 삭제</h3>

<div id="layout" style="width: 300px; height: 300px; border: 1px solid #f00;">
	<p>자바</p>
	<p>안드로이드</p>
	<p>프레임워크</p>
</div>
<hr>

<div>
	<p>
		<button type="button" onclick="sub1()">노드정보</button>
		<button type="button" onclick="sub2()">노드추가</button>
		<button type="button" onclick="sub3()">특정노드앞에추가</button>
		<button type="button" onclick="sub4()">노드삭제</button>
		<button type="button" onclick="sub5()">스타일없애기</button>
	</p>
</div>

</body>
</html>

- 노드 정보

 

- 노드 추가

 

- 특정 노드 앞에 추가

 

- 노드 삭제

 

- 스타일 없애기 (스타일 속성의 border 프로퍼티 없애기)

 

노드 찾기

더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>

<h3>노드 찾기</h3>
<div>
	<p><a>HTML</a></p>
	<p class="css"><a>CSS</a></p>
	<p>
		<A>javacript</A>
		<span>jquery</span>
	</p>
</div>
<hr>

<div class="pp">
	<div class="p">
		<div class="c1">javascript</div>
		<div class="c2">css</div>
	</div>
</div>

<script type="text/javascript">
// 모든 p 태그
var list = document.getElementsByTagName("p");

// 자식검색 : text(공백, 문자열 엔터 등), tag 검색
var c1 = list[2].childNodes;
// 자식검색 : tag만 검색
var c2 = list[2].children;
// a태그만 검색
var c3 = list[2].getElementsByTagName("a");

console.log(c1); // NodeList(5) [text,a,text,span,text]
console.log(c2); // HTMLCollection(2) [a,span]
console.log(c3); // HTMLCollection(1) [a]

var child = document.querySelector(".c1");
// 부모 검색
var p1 = child.parentNode; // 부모노드, 빈공간도 포함
var p2 = child.parentElement; // 부모노드만

console.log(p1);
console.log(p2);

// 형제
var s1 = child.nextSibling; // 텍스트(빈공간)도 포함
var s2 = child.nextElementSibling; // 태그만

console.log(s1); // #text
console.log(s2); // <div class="c2">css</div>

// 텍스트
var s3 = s2.firstChild.nodeValue;
console.log(s3);

</script>

</body>
</html>
저작자표시 동일조건

'쌍용강북교육센터 > 10월' 카테고리의 다른 글

1006_JavaScript : 웹 스토리지(Web Storage)  (0) 2021.10.07
1006_JavaScript : File, FileReader interface 파일관련인터페이스들  (0) 2021.10.07
1005_JavaScript : 정규식(정규 표현식) Regular Expression  (0) 2021.10.05
1005_JavaScript : 쪽지보낼 사람 선택하기  (0) 2021.10.05
1005_JavaScript : 회원가입 유효성 검사  (0) 2021.10.05

+ Recent posts

티스토리툴바