VScode/JavaScript
[JavaScript] DOM
hvoon
2022. 9. 9. 14:13
문서객체 모델(DOM, document object model)
-넓은 의미: 웹 브라우저가 HTML 페이지를 인식하는 방식
-좁은 의미: document 객체와 관련된 객체의 집합
-HTML 페이지에 태그를 추가, 수정, 제거할 수 있음
-기본적인 자바스크립트만으로 DOM을 다루기에는 너무 복잡하므로 간단한 내용만 살펴보고 자세한 내용은 jQuery와 함께
DOM 관련 용어
-문서 객체: html or body 태그를 자바스크립트에서 이용할 수 있는 객체로 만들면 그것이 문서 객체
-노드: 각 요소(head, body, title, script, h1, HEADER...)
--요소노드(Element Node): HTML 태그
--텍스트노드(Text Node): 요소 노드 안에 들어 있는 글자
-정적으로 문서 객체를 생성한다는 의미: 웹페이지가 처음 HTML 페이지에 적혀있는 태그들을 읽으며 생성하는 것
-동적으로 문서 객체를 생성한다는 의미: 자바스크립트를 사용해 원래 HTML 페이지에는 없는 문서 객체(태그 등)을 생성하는 것
1. 문서 객체의 변경
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM01.html</title>
<script type="text/javascript">
function changeHeader(){
// document.getElementById("header_1").innerHTML="펭귄";
var header=document.getElementById("header_1");
header.innerHTML="펭귄";
// 문서 객체를 변수에 저장하고 .innerHTML 사용이 가능함. 그 외 메서드들도 변수와 함께 사용 가능
}
</script>
</head>
<body>
<h1 id="header_1">HEADER</h1>
<img src="images/Penguins.jpg" width="300">
<div><h1 id="header_2" class="" name="">HEADER-2</h1></div>
<h1 id="clock"></h1>
<input type="button" value="제목변경" onclick="changeHeader();"/><br/>
</body>
</html>
2. 문서의 객체 추가
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM02</title>
<script type="text/javascript">
function createTag(){
// 요소노드(HTML) 생성 -> 텍스트노드 생성 -> 텍스트노드를 요소노드에 첨가(삽입) -> 요소노드를 body에 첨가(삽입)
// 요소노드 생성에서 변수에 저장
var header=document.createElement('h2'); // h2 태그를 생성해서 변수에 저장. 아직 화면에 표시되지 않음
// 텍스트노드를 생성해서 변수에 저장
var textNode=document.createTextNode('hello DOM');
// 텍스트 노드에 내용을 문서객체(h2)에 원래 내용이 있다면 그 끝에 이어서 원래 내용이 없다면 처음의 내용으로 삽입
header.appendChild(textNode);
// body에 header 객체를 원래 내용들의 맨끝에 추가 또는 원래 내용이 없다면 처음의 내용으로 추가
document.body.appendChild(header);
}
</script>
</head>
<body>
<h1 id="header_1">HEADER</h1>
<img src="images/Penguins.jpg" width="300">
<div><h1 id="header_2" class="" name="">HEADER-2</h1></div>
<h1 id="clock"></h1>
<input type="button" value="문서객체생성1" onclick="createTag();"/><br/><!-- 없던 태그 추가 배치-->
</body>
</html>
3. 이미지 태그 생성 - 텍스트 노드가 없는 노드 생성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM03</title>
<script type="text/javascript">
function createImg(){
var imgTag=document.createElement('img');
imgTag.src='images/Koala.jpg';
imgTag.width=300;
document.body.appendChild(imgTag);
}
</script>
</head>
<body>
<h1 id="header_1">HEADER</h1>
<img src="images/Penguins.jpg" width="300">
<div><h1 id="header_2" class="" name="">HEADER-2</h1></div>
<h1 id="clock"></h1>
<input type="button" value="문서객체생성2" onclick="createImg();"/><br/><!-- 이미지 태그 추가 -->
</body>
</html>
4. 문서 객체의 innerHTML을 이용하여 객체 생성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM04</title>
<script type="text/javascript">
function createUI(){
var output='<br/>';
output+='<ul>';
output+='<li><h2>JavaScripte</h2></li>';
output+='<li><h2>jQuery</h2></li>';
output+='<li><h2>Ajax</h2></li>';
output+='</ul>';
output+='<br/>';
output+='<ul>';
// alert(output);
document.body.innerHTML+=output;
}
</script>
</head>
<body>
<h1 id="header_1">HEADER</h1>
<img src="images/Penguins.jpg" width="300">
<div><h1 id="header_2" class="" name="">HEADER-2</h1></div>
<h1 id="clock"></h1>
<input type="button" value="문서객체생성3" onclick="createUI();"/><br/>
</body>
</html>
5. 문서 객체 선택 및 가져오기1
-웹페이지에 이미 존재하는 HTML 태그를 스크립트로(id로) 가져오는 방법
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM05</title>
<script type="text/javascript">
// -getElementById() 메서드는 한 번에 한가지 문서 객체만 가져올 수 있음
function getDom(){
var header1=document.getElementById('header_1');
var header2=document.getElementById('header_2');
header1.innerHTML='hello javascript';
header2.innerHTML='hello DOM';
}
</script>
</head>
<body>
<h1 id="header_1">HEADER</h1>
<img src="images/Penguins.jpg" width="300">
<div><h1 id="header_2" class="" name="">HEADER-2</h1></div>
<h1 id="clock"></h1>
<input type="button" value="문서객체 선택_가져오기1" onclick="getDom();"/><br/>
</body>
</html>
6. 문서 객체 선택 및 가져오기2
-getElementByTagName('tagName'): tagName과 일치하는 문서객체를 배열로 가져옴
-getElementByName('name'): 태그의 name 속성이 name과 일치하는 문서 객체를 배열로 가져옴
-getElementByClassName('className'): 태그의 class 속성과 일치하는 문서 객체를 배열로 가져옴
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM06</title>
<script type="text/javascript">
function getDom2(){
var headers=document.getElementsByTagName('h1');
headers[0].innerHTML='태그이름으로 가져오기1';
headers[1].innerHTML='태그이름으로 가져오기2';
// name이나 TagName, ClassName이 중복되어 있다면
// getElement 함수로 가져왔을 때 순서대로 인덱스가 부여된 배열로 사용됨
}
</script>
</head>
<body>
<h1 id="header_1">HEADER</h1>
<img src="images/Penguins.jpg" width="300">
<div><h1 id="header_2" class="" name="">HEADER-2</h1></div>
<h1 id="clock"></h1>
<input type="button" value="문서객체 선택_가져오기2" onclick="getDom2();"/><br/>
</body>
</html>
7. 문서객체의 스타일 변경
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM07</title>
<script type="text/javascript">
function changeStyle(){
var header=document.getElementById('header_1');
header.style.border='1px solid black';
header.style.color='orange';
header.style.backgroundColor='yellow';
}
</script>
</head>
<body>
<h1 id="header_1">HEADER</h1>
<img src="images/Penguins.jpg" width="300">
<div><h1 id="header_2" class="" name="">HEADER-2</h1></div>
<h1 id="clock"></h1>
<input type="button" value="문서객체스타일조작" onclick="changeStyle();"/><br/>
</body>
</html>
8. 문서객체 제거
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM08</title>
<script type="text/javascript">
function removeDom(){
var willRemove=document.getElementById('header_1');
document.body.removeChild(willRemove);
// body 문서 객체 바로 아래 수준에 제거하고자 하는 문서객체가 있을 때 가능한 코드
var willRemove2=document.getElementById('header_2');
willRemove2.parentNode.removeChild(willRemove2);
// 일반적으로 문서 객체를 제거할 때 사용하는 코드
}
</script>
</head>
<body>
<h1 id="header_1">HEADER</h1>
<img src="images/Penguins.jpg" width="300">
<div><h1 id="header_2" class="" name="">HEADER-2</h1></div>
<h1 id="clock"></h1>
<input type="button" value="문서객체제거" onclick="removeDom();"/><br/>
</body>
</html>
9. 날짜/시간 표시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM09</title>
<script type="text/javascript">
function viewDateTime(){
var clock=document.getElementById('clock');
setInterval(function(){
var date=new Date();
clock.innerHTML=date.toLocaleString();
},1000);
}
</script>
</head>
<body>
<h1 id="header_1">HEADER</h1>
<img src="images/Penguins.jpg" width="300">
<div><h1 id="header_2" class="" name="">HEADER-2</h1></div>
<h1 id="clock"></h1>
<input type="button" value="날짜시간표시" onclick="viewDateTime();"/><br/>
</body>
</html>
