[ JAVA Script ] DOM

오늘은 DOM(문서 객체 모델)의 개념과 document 객체에 대한 포스팅을 해보겠습니다!

■ DOM(문서 객체 모델)이란?

문서 객체 모델(DOM, Document Object Model)은 HTML 문서나 XML에 접근하기 위한 일정의 인터페이스입니다.

이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공합니다. DOM의 특징은 다음과 같습니다.

HTML5와 같은 구조화된 문서를 객체 개념으로 표현하고 접근하는 방식입니다.
W3C가 정한 공식 표준으로 W3C가 표준화한 여러 API의 기반입니다.
DOM API를 통해 HTML5와 XML문서 안의 구성 요소 즉, 엘리먼트, 속성, 텍스트 등을 접근하고 변경할 수 있고, 문서의 내용이나 구조, 스타일 등을 동적으로 제어가 가능합니다.
플랫폼과 언어에 중립적이며 동적으로 문서의 내용, 구조, 스타일을 접근하고 변경하는 중요한 수단입니다.

좀 더 깊게 개념에 대해서 알아보자면,

웹 페이지는 일종의 문서(document)입니다. 이 문서는 웹 브라우저를 통해 그 내용이 해석되어 웹 브라우저 화면에 나타나거나 HTML 소스 자체로 나타나기도 합니다.

동일한 문서를 사용하여 이처럼 다른 형태로 나타날 수 있다는 점에 주목할 필요가 있습니다. DOM은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공합니다.

또한 DOM은 웹 페이지의 객체 지향 표현이며, JAVA Script와 같은 스크립팅 언어를 이용한 DOM을 수정할 수 있습니다.

그럼 DOM에 대해서 하나씩 알아봅시다.

■ DOM Tree

먼저 HTML을 지탱하는 것은 태그(Tag)입니다.

문서 객체 모델(DOM)에 따르면, 모든 HTML 태그는 객체입니다. 태그 하나가 감싸고 있는 "자식"태그는 중첩 태그(nested tag)라고 부릅니다. 태그 내의 문자(text) 역시 객체입니다.

정리하자면

HTML5이나 XML 문서의 구성 요소들은 계층적인 상호 관계를 갖고 구성합니다.

- DOM 모델에서 각 객체(HTML 문서의 구성 요소)들은 자연스럽게 계층적인 트리 구조로 표현합니다.

노드 트리(Node tree)

- 3가지 노드 유형으로 표현합니다.

1. 엘리먼트 노드

태그와 내용으로 표현되는 엘리먼트를 표현하는 노드입니다.
하위에 또 다른 엘리먼트를 포함합니다.

2. 속성 노드

엘리먼트의 시작 태그 안에 포함되는 속성 이름과 속성 값을 쌍으로 갖는 노드입니다.

3. 텍스트 노드

엘리먼트가 갖는 실제 내용을 의미하는 노드입니다.
DOM 트리에서 최하위 단말 노드가 해당합니다.

저도 개념을 공부하면서 이해하는데 시간이 걸렸습니다. 그래서 제 생각을 그대로 정리해서 적어보자면 DOM은 HTML을 태그 트리 구조로 표현합니다.

위 요소를 바탕으로 DOM 트리 구조를 좀 더 쉽게 이해하기 위해 설명하자면, 위 요소들은 자식들을 보거나 숨길 수 있습니다. 즉, 트리에 있는 노드는 모두 객체입니다.

JAVA Script를 공부하면서 많은 지식이 있다면 당연히 좋습니다. 하지만 시간이 부족하신 분이거나 JAVA Script를 주로 사용하지 않는 분들이라면 이 정도만 알고 넘어가도 괜찮다고 생각합니다. 간단하게 아래에 정리해 보겠습니다.

id로 요소 찾기 : getElementById("태그의 id")
태그. innerHTML : 태그 내부의 내용
태그. value : 태그의 입력값
태그의 속성 변경 : 태그. src = "값"

document.getElementById("img2").src = "poodle.png";

태그의 스타일 변경 : 태그. style. 속성이름 = "속성값";

document.getElementById("img2").style.color = "blue";

그럼 예제 코드를 통해서 DOM Tree 구조에 대해 알아보기 위해 <body> 태그를 활용해서 버튼 클릭 시 배경이 바뀌는 웹을 만들어 보겠습니다.

<예제 1>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>onclick2</title>
<script type="text/javascript">
function change(img) {
	document.body.style.backgroundImage = "url('"+img+"')"
}

</script>
<style type="text/css">
body {
	background-image: url("../im/bg4.jpg");
}
</style>
</head>
<body>
<h2>배경 이미지 바꾸기</h2>
<input type="button" value="배경1" onclick="change('../im/bg3.jpg')">
<input type="button" value="배경2" onclick="change('../im/bg4.jpg')">
</body>
</html>

■ Document 객체

우리는 지금까지 포스팅을 보면서 document 객체를 자주 접했습니다.

document 객체는 웹 페이지 그 자체를 의미합니다.

웹 페이지에 존재하는 HTML요소에 접근하고자 할 때는 반드시 document객체부터 시작해야 합니다.

document 객체의 메서드는 다음 표를 참고해 봅시다.

메서드	설 명
document.getElementsByTagName(Tag Name)	태그 이름의 요소를 모두 선택합니다.
document.getElementsById(ID)	해당 아이디의 요소를 선택합니다.
document.getElementsByClassName(Class Name)	클래스에 속한 요소를 모두 선택합니다.
document.getElementsByName(Name 속성값)	해당 Name 속성값을 가지는 요소를 모두 선택합니다.
document.querySelectorAll(Selector)	선택자로 선택되는 요소를 모두 선택합니다.
document.createElement(HTML요소)	지정된 HTML 요소를 생성합니다.
document.write(Text)	HTML 출력 스트림을 통해 Text를 출력합니다.

그럼 연습 문제로 document 객체를 활용해서 간단한 회원가입 창을 만들어 봅시다.

<예제 2>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form_exp</title>
<script type="text/javascript">
function check() {
	//아이디 체크
	var userid = document.getElementById("userid");
	if (userid.value == "") {
		alert("아이디는 필수 입력입니다.");
		userid.focus();
		return;
	}
	//비밀번호 체크
	var pwd1 = document.getElementById("pwd1");
	var pwd2 = document.getElementById("pwd2");
	if (pwd1.value== "") {
		alert("비밀번호는 필수 입력입니다.");
		pwd1.focus();
		return;
	}
	if (pwd1.value != pwd2.value) {
		alert("비밀번호 불일치");
		pwd2.focus();
		return;
	}
	//이름 체크
	var name = document.getElementById("name");
	if (name.value == "") {
		alert("이름은 필수 입력입니다.");
		name.focus();
		return;
	}
	alert("정상적으로 입력되었습니다.");
}

</script>
</head>
<body>
<form >
<fieldset>
<legend>회원 가입</legend>
아이디 : <input type="text" id="userid"> <br>
비밀번호 : <input type="password"  id ="pwd1"> <br>
비밀번호확인 : <input type="password" id="pwd2"> <br>
이름 : <input type="text" id="name"><br>
이메일 : <input type="text" id="email" placeholder="avc@abc.com"><br>
전화번호 : <input id="phone"> <br>
<hr>
<input type="button" onclick="check()" value="확인">
</fieldset>

</form>

</body>
</html>

이번에는 document.write() 메서드를 활용해서 사원 정보를 출력해 봅시다.

write() 메서드는 Text를 출력합니다.

<예제 3>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>myObject2</title>
<script type="text/javascript">
var emp ={
	deptno:123,
	name:"김길동",
	id : "kim",
	email : "kim@gmail.com",
	hp : "010-1234-5678"
};
document.write("-----------원데이터-----------","<br>");
document.write("사번 : ",emp.deptno,"<br>");
document.write("이름 : ",emp.name,"<br>");
document.write("ID : ",emp.id,"<br>");
document.write("이메일 : ",emp.email,"<br>");
document.write("HP : ",emp.hp,"<br>");


document.write("<br>");
emp.email="kim2@daum.com";
emp.hp= "010-7777-8888";

document.write("-----------변경데이터-----------","<br>");
document.write("사번 : ",emp.deptno,"<br>");
document.write("이름 : ",emp.name,"<br>");
document.write("ID : ",emp.id,"<br>");
document.write("이메일 : ",emp.email,"<br>");
document.write("HP : ",emp.hp,"<br>");


</script>
</head>
<body>

</body>
</html>

마치며

오늘은 DOM에 대해서 알아봤습니다.

비전공자로 시작해서 지금까지 준비하면서 정말 많은 재미를 느끼네요.

다음 포스팅에서 뵙겠습니다.

728x90

'[ Script ] > JAVA Script' 카테고리의 다른 글

[ JAVA Script ] Mobile Web UI구현 (0)	2023.02.28
[ JAVA Script ] Ajax (0)	2023.02.27
[ JAVA Script ] jQuery (0)	2023.02.25
[ JAVA Script ] 함수 (2)	2023.02.23
[ JAVA Script ] 기초 문법 (0)	2023.02.22

환이의 개발일지

[ JAVA Script ] DOM

■ DOM(문서 객체 모델)이란?

■ DOM Tree

■ Document 객체

'[ Script ] > JAVA Script' 카테고리의 다른 글

티스토리툴바

[ JAVA Script ] DOM

■ DOM(문서 객체 모델)이란?

■ DOM Tree

■ Document 객체

'[ Script ] > JAVA Script' 카테고리의 다른 글

관련글

티스토리툴바