DOM(Document Object Model)
: 문서 객체 모델
문서 객체 모델을 사용해서 HTML 페이지에 태그를 추가, 제거, 수정 할 수 있다.
DOM은 반드시 HTML만 가능한 것이 아니다. HTML, XML, 사용자 정의 등 다양하다.
태그를 객체로 본다.
[ HTML의 DOM의 구조 ]
document 객체의 요소를 추출 하는 메소드 선택자는 크게 2가지로 구분 할 수 있다.
요소 속성 명으로 선택해 오는 원거리 선택자와 가까이에 있는 요소를 선택하는 근거리 선택자가 있다.
| 메소드 | 의미 |
| getElementById( "id명" ) | 태그의 id명이 일치하는 문서 객체를 가져오는 선택자 |
| getElementByName( "name명" ) | 태그의 name명이 일치하는 문서 객체를 가져오는 선택자 |
| getElementByTagName( "tag명" ) | 태그의 tag명이 일치하는 문서 객체를 가져오는 선택자 |
브라우저는 HTML 페이지를 로드하는 과정에서 각 HTML 태그를 하나의 객체로 만든다.
예를들어 <p>...</p>로 구성된 요소는 p 객체로 , <div>...</div>로 구성된 요소는 div 객체로 생성한다.
이들은 HTML 문서의 각요소를 개체화 한 것이라는 뜻으로 HTML DOM 객체라고 부른다.
HTML DOM은 W3C의 표준이므로 모든 브라우저에 호환된다.
DOM의 목적
: DOM 객체는 HTML 페이지에 작성된 각 HTML태그를 객체로 만든 것이다.
HTML 페이지가 출력 된 후, DOM 객체를 통해 HTML태그가 출력된 모양과 콘텐츠를 제어하기 위해서 이다.
DOM 객체의 종류는 HTML 태그 종류만큼 있다.
하지만 document 객체는 DOM 객체가 아니다.
DOM 객체의 구성요소
HTML태그의 요소
: HTML 태그는 element라고도 불리며 다음의 다섯가지 요소로 구성된다.
<p id="firstP" style="color: blue;" onclick="this.style.color='red'">
이것은 <span style ="color:green">문장입니다.></span>
</p>
1.p : 태그(element)
2.id : 이름
3. style : CSS3 스타일
4.onclick : 이벤트 리스너
5. 이것은 <span style ="color:green">문장입니다.> : 콘텐츠
| property | DOM 객체의 맴버 변수로서 HTML 태그 element를 반영 |
| method | DOM 객체의 맴버 함수로서 HTML태그를 제어하는데 활용 |
| collection | 정보를 집합적으로 표현하는 일종의 배열 |
| event listener | 자바스크립트 코드를 이용하여 직접 DOM객체에 이벤트리스너 등럭 |
| CSS3 style | style 프로퍼티를 통해 HTML 태그에 적용된 CSS3 스타일시트를 접근 할 수 있다. |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>getElementById Test</title>
<script>
function process1() {
var ob = document.getElementById("txt").value;
document.getElementById("view1").innerHTML = ob;
}
function process2() {
var ob = document.querySelector("#txt").value;
document.querySelector("#view2").innerHTML = ob;
}
</script>
</head>
<body>
<input type="text" id="txt" size="30" name="text">
<input type="button" value="출력1" onclick="process1()">
<input type="button" value="출력2" onclick="process2()">
<br><br><br>
<div id="view1"></div><br>
<div id="view2"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML DOM TREE</title>
</head>
<body>
<h3>DOM 객체p의 프로퍼티, 스타일, 이벤트 리스너</h3>
<hr>
<p id="firstP" style="color: green; background:yellow" onclick="this.style.color ='#000000'">
이것은
<span style="color: red;">1 문장입니다.</span>
<span style="color: cyan;">2 문장입니다.</span>
<span style="color: blue;">3 문장입니다.</span>
</p>
<script>
var p= document.getElementById("firstP"); // var p : 태그 <p>를 가르킴
var text ="p.id = "+p.id+"\n";
text += "p.tagName = "+p.tagName+"\n";
text += "p.innerHTML = "+p.innerHTML+"\n";
// innerHTML은 내가 적은 모양그대로 띄워쓰기 이런거도 그대로 보여줌 <pre>느낌
text += "p.innerText = "+p.innerText+"\n";
text += "p.style.color = "+p.style.color+"\n";
text += "p.onclick = "+p.onclick+"\n";
text += "p.childElementCount = "+p.childElementCount+"\n";
// 자식요소의 숫자 : span이 3개 있음으로 3이 출력된다.
text += "너비 = "+p.offsetWidth+"\n"; // 브라우져의 너비와 높이
text += "높이 = "+p.offsetHeight+"\n";
alert(text);
</script>
</body>
</html> |
 |
CSS 스타일 동적 변경
: 태그자체를 객체화 시켜서 구조를 바꾼 것 이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 스타일 동적 변경</title>
<script>
function change() {
var span1 = document.getElementById("mySpan1"); // id가 mySpan1인 객체 찾기
span1.style.color = "green";
span1.style.fontSize = "30px";
span1.style.display = "block";
span1.style.width = "6em"; // 박스의 폭 6배 글자크기
span1.style.border = "3px dotted magenta";
span1.style.margin = "20px";
var span2 = document.getElementById("mySpan2"); // id가 mySpan1인 객체 찾기
span2.style.color = "rebeccapurple";
span2.style.fontSize = "20px";
span2.style.display = "block";
span2.style.width = "10em"; // 박스의 폭 6배 글자크기
span2.style.border = "5px solid orange";
span2.style.margin = "10px";
}
</script>
</head>
<body>
<h3>CSS 스타일 동적 변경</h3>
<hr>
<p style="color: blue ;">
이것은
<span id="mySpan1" style="color: red;">1문장입니다</span>
<span id="mySpan2" style="color: red;">2문장입니다</span>
</p>
<input type="button" value="스타일변경" onclick="change()">
</body>
</html>
DOM Tree의 모습 (태그를 트리 구조로 만든 것)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>라면 끓이는 순서</title>
</head>
<body>
<h3>라면 끓이는 순서</h3>
<hr>
<ol type="A">
<li>물을 끓인다.</li>
<li>라면과 스프를 넣는다.</li>
<li>파를 썷어 넣는다.</li>
<li>5분 후 <strong>맛있게</strong>먹는다.</li>
</ol>
<img src="../images/8-1DOMTree.PNG" width="400" height="300" alt="DOM 트리">
</body>
</html>
TagName이용해 보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>라면 끓이는 순서</title>
</head>
<body>
<h3>라면 끓이는 순서</h3>
<hr>
<ol type="A">
<li>물을 끓인다.</li>
<li>라면과 스프를 넣는다.</li>
<li>파를 썷어 넣는다.</li>
<li>5분 후 <strong>맛있게</strong>먹는다.</li>
</ol>
<script>
var liArray = document.getElementsByTagName("li");
// li가 여러개 있음으로 liArray에 배열로서 들어간다.
for (i = 0; i < liArray.length; i++) {
var obj = liArray[i];
obj.style.color = 'green';
}
</script>
</body>
</html>
innerHTML과 innerText 의 차이점
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>라면 끓이는 순서</title>
</head>
<body>
<h3>라면 끓이는 순서</h3>
<hr>
<ol type="A" >
<li>물을 끓인다.</li>
<li>파를 넣는다.</li>
<li onclick="alert(this.innerHTML)"><span>라면</span>과 스프를 넣는다.</li>
<li>5분 후 <strong>맛있게</strong>먹는다.</li>
</ol>
</body>
</html>| innerHTML은 태그까지 함께 보여준다. | innerText라고 하면 text만 보여준다. |
 |
 |
innerHTML 예
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>innerHTML 활용</title>
<script>
function change() {
var p = document.getElementById("firstP");
p.innerHTML = "나의 <img src='../images/puppy.png'> 강아지";
}
function change2() {
var p2 = document.getElementById("two");
p2.innerHTML = "슈렉 <img src='../images/shrek.png'> 출연";
}
</script>
</head>
<body>
<h3>innerHTML 활용 : 아래 글자에 클릭하면 에쁜 강아지가 보입니다.</h3>
<hr>
<p id="firstP" style="color: blue;" onclick="change()">
여기에 <span style="color: red;">클릭하세요</span></p>
<p id="two" style="color: darkslateblue;" onclick="change2()">
여기를누르면 <span style="color: green;">슈렉이 나와요</span></p>
</body>
</html>
this 활용해보기 (this는 자기 자신의 태그를 지칭한다.)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>This Test</title>
<script>
function change(obj, size, color,bgcolor) {
obj.style.color = color;
obj.style.fontSize = size;
obj.style.background = bgcolor;
}
</script>
</head>
<body>
<h3>This 활용</h3>
<hr>
<button onclick="change(this,'30px','red','pink')">버튼</button> <!-- this는 자기자신인 button을 지칭함-->
<button onclick="change(this,'45px','blue','yellowgreen')">버튼</button>
<hr>
<div onclick="change(this,'35px','green','aqua')">
여기를 클릭하면 크기와 색 변경
</div>
</body>
</html>
document.write() 사용시 주의할 점
HTML 택스트를 HTML 문서에 추가하기 위해 document.write()를 사용한다.
하지만 HTML 문서가 로드되어 출력이 모두 이루어지고 나면 document 객체가 닫히기 때문에
더이상 HTML 택스트를 추가(출력) 할 수 없다.
document 객체가 닫힌 후 document.write()가 실행되면
현재 HTML 문서가 지워지고 새 문서가 작성되는 결과를 보여준다.
(예)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>document.write() 사용시 주의할점</title>
</head>
<body onclick="document.write('<h3>클릭되었습니다.</h3>')">
<h3> write() 를 잘못 사용하는 예</h3>
<hr>
<p>웹 브라우져의 바탕 아무곳이나 클릭해 보세요</p>
</body>
</html>| 전 | 후 (전의 것이 지워진다.) |
 |
 |
visibility 프로퍼티
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>visibility 프로퍼티 </title>
<style>
span {
visibility: hidden;
color: green;
}
</style>
<script>
function show() {
var objArray = document.getElementsByTagName("span");
for (var i = 0; i < objArray.length; i++) {
var obj = objArray[i];
var style = window.getComputedStyle(obj);
var v = style.getPropertyValue("visibility");
if (v == "hidden")
obj.style.visibility = "visible";
else
obj.style.visibility = "hidden";
}
//window.getComputedStyle() 메소드는 인자로 전달받은 요소의 모든 CSS 속성 값을 담은 객체를 회신한다.
// 이 속성 값들은, 해당 요소에 대하여 활성 스타일시트와 속성값에 대한 기본 연산이 모두 반영된 결과 갑이다.
// 개별 CSS 속성 값은 객체를 통해 제공되는 API 또는 CSS 속성 이름을 사용해서 간단히 색인화해서 엑세스 할 수 있다.
}
</script>
</head>
<body>
<h3>다음 빈곳에 숨은 단어 ?
<button onclick="show()">show/hide</button>
</h3>
<hr>
<ul>
<li>I (<span>love</span>) you.</li>
<li>CSS is Cascading (<span>Style</span>) Sheet.</li>
<li>응답하라 (<span>2022</span>)</li>
</ul>
</body>
</html>
setAttribute()
setAttribute () : 선택한 요소(element)의 속성(attribute) 값을 정한다.
문법
element.setAttribute( 'attributename', 'attributevalue' )
attributename : 속성이름을, attributevalue : 속성 값을 넣는다.
(예)
document.getElementById( 'xyz' ).setAttribute( 'title', 'This is title')
id 값이 xyz인 요소의 title 속성을 This is title로 정한다.
만약 이미 속성값이 존재한다면 그 값을 지우고 새 값을 적용한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문서의 동적 구성</title>
<script>
function createDIV() {
var obj = document.getElementById("parent");
var newDIV = document.createElement("div");
newDIV.innerHTML = "새로 생성된 DIV 입니다.";
newDIV.setAttribute("class", "myDiv");
newDIV.style.backgroundColor = "yellow";
newDIV.onclick = function () {
var p = this.parentElement; // 부모 HTML 태그 요소 (여기서는 body)
p.removeChild(this); // 자신을 부모로 부터 제거
//this = mewDiV이므로 p인 body로 부터 this인 자기자신을 제거
};
obj.appendChild(newDIV); // 선택한 요소안에 자식을 추가
}
</script>
</head>
<body id="parent">
<h3>DIV 객체를 동적으로 생성, 삽입, 삭제하는 예제</h3>
<hr>
<p>
DOM 트리에 동적으로 객체를 삽입 할 수 있다.
createElement(), appendChild(), removeChild() 메소드를 이용하여 새로운 객체를 생성, 삽입, 삭제하는 예제이다.
</p>
<a href="javascript:createDIV()">DIV 생성</a>
<p></p>
<p></p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>document.getElementsByTagName()</title>
<script>
function change(){
var spanArray = document.getElementsByTagName("span");
for(var i = 0; i < spanArray.length; i++){
var span = spanArray[i];
span.style.color = "red";
span.style.fontSize = "25px";
}
}
</script>
</head>
<body>
<h3>내가 좋아하는 과일
<button onclick="change()">누르세요</button>
</h3>
<hr size="5" color="green">
저는 빨간 <span>사과</span>를 좋아해서 아침마다 한 개씩 먹고 있어요.
운동할 때는 중간 중간에 <span>바나나</span>를 먹지요.
탄수화물 섭취가 빨라 힘이 납니다.
또한 달콤한 향기를 품은 <span>체리</span>와 여름 냄새 물씬 나는 <span>자두</span>를 좋아합니다.
</body>
</html>'KH > JavaScript' 카테고리의 다른 글
| JS_BOM(2) screen 객체, history 객체 (0) | 2022.09.26 |
|---|---|
| JS_BOM (Browser Object Model) (1) | 2022.09.26 |
| JS_ 사용자 객체(Object) 생성 (0) | 2022.09.22 |
| JS_Math , String ,Equality,Identity (0) | 2022.09.22 |
| JS_ Javascript의 객체와 배열 (1) | 2022.09.21 |