반응형
DOM(Document Object Model)
- 브라우저의 출력영역(document 객체)을 기반으로 제공되는 자바스크립트 객체
- 자바스크립트에서는 요청 웹프로그램(웹문서)의 실행결과를 응답받아 출력되는 영역을 document 객체로 표현하며 document 객체에 출력되는 태그(박스모델)는 Element 객체로 표현하여 처리
1. DHTML 작성하는 법 (동적인페이지)
브라우저에서 이벤트가 발생될 경우에는??
- 이벤트 처리 명령으로 박스모델(Element 객체)을 조작하여 동적인 페이지 제공 >> DHTML (Dynamic HTML)
- 이벤트(Event) : 태그(박스모델)에서 발생되는 다양한 사건
- 이벤트 처리(Event Handle) : 태그에서 발생된 이벤트에 대한 처리 명령 - 자바스크립트 이용
- 페이지를 구성하는 모든 태그가 Element 객체로 표현되어 있어야지만 이벤트를 이용하여 동적인 페이지 구현 가능
- DOM Tree 완성 후 Element 객체 조작 가능
DOM Tree
- document 객체를 최상위 부모 객체로 두고, 모든 태그가 Element 객체로 트리(Tree) 형식의 계층적 구조로 메모리에 표현되어 있는 상태
- DOM Tree는 웹문서를 모두 읽어 DOM Parser에 의해 해석(parsing)된 경우 완성됨
35_onload.html
방법1) "onload 이벤트" 속성 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<script type="text/javascript">
//이벤트 처리 함수
function load() {
alert("DOM Tree가 완성되어 동적인 페이지 구현이 가능합니다.")
}
</script>
</head>
<!-- body 태그의 onload 이벤트 속성 : body 태그를 모두 읽은 경우에 대한 이벤트 속성 - DOM Tree 완성 -->
<!-- => onload 이벤트 속성값으로 이벤트 처리 명령(자바스크립트 - 이벤트 처리 함수 호출) 설정 -->
<!-- javascript 접두사 생략 가능 -->
<body onload="javascript:load();">
</body>
</html>방법2) "onload 이벤트" 속성을 "window 객체의 프로퍼티"로 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<script type="text/javascript">
//태그의 이벤트 속성을 객체의 프로퍼티로 사용하여 이벤트 처리 함수 등록 가능
// => 태그에서 이벤트가 발생되면 이벤트 처리 함수가 자동 호출되어 실행
// => HTML을 건들일 필요가 없기 때문에 유지보수 쉬워짐
//윈도우 객체가 로드된다면(준비되었다면) - 출력까지 다 된 상태
window.onload = function() {
alert("DOM Tree가 완성되어 동적인 페이지 구현이 가능합니다.")
}
</script>
</head>
<body>
</body>
</html>방법3) "body 태그의 마지막 자식 태그"로 script태그 작성 - 권장
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<!-- body 태그의 마지막 자식 태그로 script 태그 작성 -->
<script type="text/javascript">
//onload 이벤트를 사용하지 않아도 동적인 페이지 구현 가능 - 가독성 증가
alert("DOM Tree가 완성되어 동적인 페이지 구현이 가능합니다.")
</script>
</body>
</html>🔥 하나의 HTML 문서 내 <script> 태그를 사용하는 최적의 방법
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<!-- 🔥함수 등록하는 것이 좋음 -->
<script type="text/javascript">
</script>
</head>
<body>
<!-- HTML 작성 -->
<!-- 🔥 동적인페이지 구현을 위한 명령을 작성하는 것이 좋음 - DOM Tree 조작 사용 -->
<script type="text/javascript">
</script>
</body>
</html>
2. Element 객체
- 노드(Node) = Element 객체 라고 생각하기
<!--노드(Node) : 태그(TagNode)와 태그내용(TextNode)을 객체로 표현-->
<li>li 태그에 의해 출력되는 내용</li>
<!--Element 객체 : 태그(TagNode)만을 객체로 표현-->
<li></li>36_element.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<h1>DOM(Document Object Model) - Element 객체</h1>
<hr>
<p>Node 객체 : 태그(TagNode)와 태그내용(TextNode)을 객체로 표현</p>
<p>Element 객체 : 태그(TagNode)만을 객체로 표현</p>
<hr>
<h2 id="headline">h2 태그에 의해 출력되는 내용</h2>
<ul>
<li>li 태그에 의해 출력되는 내용-1</li>
<li>li 태그에 의해 출력되는 내용-2</li>
<li>li 태그에 의해 출력되는 내용-3</li>
</ul>
<p class="text">p 태그에 의해 출력되는 내용</p>
<script type="text/javascript">
//1.
//🖤document.getElementById(id) : 태그의 id 속성값으로 태그를 검색하여 Element 객체를 반환하는 메소드
// => document 객체의 자식태그 중 하나의 태그를 검색하여 Element 객체로 반환
// => document 객체 대신 부모 Element 객체를 사용하여 자식 Element 객체를 검색하여 반환
var h2E=document.getElementById("headline");
//alert(h2E);//[object HTMLHeadingElement]
//2.
//🖤Node.nodeName : Node(Element) 객체의 노드명(태그명)을 저장한 프로퍼티
//alert(h2E.nodeName);//H2
//3.
//🖤Node.nodeValue : Node(Element) 객체의 노드값(태그내용)을 저장한 프로퍼티
//alert(h2E.nodeValue);//null
//4.
//🖤Node.firstChild : Node(Element) 객체의 첫번째 자식 Node(Element) 객체를 저장한 프로퍼티
//alert(h2E.firstChild);//[object Text] - TextNode
//alert(h2E.firstChild.nodeName);//#text
//alert(h2E.firstChild.nodeValue);//h2 태그에 의해 출력되는 내용 - 태그내용
//Node 객체의 nodeValue 프로퍼티의 저장값 변경 - 태그내용 변경
//h2E.firstChild.nodeValue="h2 태그의 내용 변경";
/*
//5.
//🖤document.getElementsByTagName(tagName) : 태그명을 이용하여 태그를 검색하여 NodeList 객체로 반환하는 메소드
// => 다수의 태그를 검색하여 Element 객체의 모임(List 객체)으로 반환
// => document 객체 대신 부모 Element 객체를 사용하여 자식 Element 객체들을 검색하여 반환
//NodeList 객체 : Node(Element) 객체가 다수 저장된 콜렉션 객체
var liList=document.getElementsByTagName("li");
//alert(liList);//[object HTMLCollection]
//6.
//🖤NodeList.length : NodeList 객체에 저장된 Node 객체의 갯수를 저장한 프로퍼티
//alert(liList.length);
for(i=0;i<liList.length;i++) {
//7.
//🖤NodeList.item(index) : NodeList 객체에 첨자(Index) 위치의 Node(Element) 객체를 반환하는 메소드
var liE=liList.item(i);
//alert(liE);//[object HTMLLIElement]
//alert(liE.nodeName);
alert(liE.firstChild.nodeValue);
}
*/
/*
//8.
//🖤document.getElementsByClassName(class) : 태그의 class 속성값을 이용하여 태그를 검색하여 NodeList 객체로 반환하는 메소드
// => 다수의 태그를 검색하여 Element 객체의 모임(List 객체)으로 반환
// => document 객체 대신 부모 Element 객체를 사용하여 자식 Element 객체들을 검색하여 반환
var pList=document.getElementsByClassName("text");
//alert(pList);//[object HTMLCollection]
//alert(pList.item(0).nodeName);//P
alert(pList.item(0).firstChild.nodeValue);//p 태그에 의해 출력되는 내용
*/
/*
//9.
//🖤document.querySelector(selector) : CSS 선택자로 태그를 검색하여 Element 객체를 반환하는 메소드
// => document 객체의 자식태그 중 하나의 태그를 검색하여 Element 객체로 반환
// => document 객체 대신 부모 Element 객체를 사용하여 자식 Element 객체를 검색하여 반환
var pE=document.querySelector(".text");
//alert(pE);//[object HTMLParagraphElement]
//alert(pE.nodeName);//P
alert(pE.firstChild.nodeValue);//p 태그에 의해 출력되는 내용
*/
//10.
//🖤document.querySelectorAll(selector) : CSS 선택자로 태그들을 검색하여 NodeList 객체를 반환하는 메소드
// => 다수의 태그를 검색하여 Element 객체의 모임(List 객체)으로 반환
// => document 객체 대신 부모 Element 객체를 사용하여 자식 Element 객체를 검색하여 반환
var pList=document.querySelectorAll(".text");
//alert(pList);//[object NodeList]
//alert(pList.item(0).nodeName);//P
alert(pList.item(0).firstChild.nodeValue);//p 태그에 의해 출력되는 내용
</script>
</body>
</html>
3. Element 객체 생성 및 추가
37_add_element.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<h1>DOM(Document Object Model) - Element 객체 생성 및 추가</h1>
<hr>
<div id="imageDiv"></div>
<script type="text/javascript">
//1.
//🖤document.createElement(nodeName) : 전달값의 태그명을 가진 Element 객체를 생성하여 반환하는 메소드 - 태그 생성
var h2E=document.createElement("h2");//<h2></h2>
//alert(h2E);//[object HTMLHeadingElement]
//2.
//🖤document.createTextNode(content) : 전달값을 태그내용으로 가진 Text 객체를 생성하여 반환하는 메소드 - 태그내용 생성
var h2T=document.createTextNode("h2 태그의 내용");
//alert(h2T);//[object Text]
//3.
//🖤Node.appendChild(newNode) : Node(Element) 객체의 마지막 자식 Node 객체로 추가하는 메소드
h2E.appendChild(h2T);//<h2>h2 태그의 내용</h2>
//4.
//🖤document.body : body 태그를 Element 객체로 표현하여 사용 가능 - 웹문서에 하나의 body 태그만 존재
//alert(document.body);//[object HTMLBodyElement]
document.body.appendChild(h2E);//DOM Tree에 Node 객체 배치 >> 출력
var imgE=document.createElement("img");//<img>
/*
//5.
//🖤Element.attributeName : Element 객체의 프로퍼티로 태그의 속성을 표현하여 사용 가능
imgE.src="images/Koala.jpg";//<img src="images/Koala.jpg">
//alert(imgE.src);//http://localhost:8000/web/js/images/Koala.jpg - 절대경로
imgE.width="300";//<img src="images/Koala.jpg" width="300">
*/
/6.
//🖤Element.setAttribute(name, value) : Element 객체의 태그 속성을 변경하는 메소드
imgE.setAttribute("src", "images/Koala.jpg");//<img src="images/Koala.jpg">
//7.
//🖤Element.getAttribute(name) : Element 객체의 태그 속성값을 반환하는 메소드
//alert(imgE.getAttribute("src"));//images/Koala.jpg - 상대경로
imgE.setAttribute("width", "300");//<img src="images/Koala.jpg" width="300">
//Element 객체를 반환받아 마지막 자식 Element 객체로 태그 배치 - 출력
var imageDiv=document.getElementById("imageDiv");
imageDiv.appendChild(imgE);
var hrE=document.createElement("hr");//<hr>
//alert(hrE);//[object HTMLHRElement]
//8.
//🖤Node.insertBefore(newElement, before) : 기존 Node(Elemet) 객체전에 새로운 Node(Element) 객체를 삽입하는 메소드
document.body.insertBefore(hrE, h2E);
</script>
</body>
</html>
4. Element 객체 삭제
38_remove_element.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<h1>DOM(Document Object Model) - Element 객체 삭제</h1>
<hr>
<h2>엘리먼트-1</h2>
<h2 id="remove">엘리먼트-2</h2>
<h2>엘리먼트-3</h2>
<script type="text/javascript">
//1)
//🏀id(식별자)가 있는 엘리먼트 삭제하는 법
/*
var h2E=document.getElementById("remove");
//1.
//🖤Node.removeChild(oldNode) : Node(Element) 객체의 자식 Node(Element) 객체를 삭제하는 메소드
//document.body.removeChild(h2E);
//2.
//🖤Node.parentNode : Node(Element) 객체의 부모 Node(Element) 객체를 저장한 프로퍼티
h2E.parentNode.removeChild(h2E);
*/
//2)
//🏀id(식별자)가 없는 엘리먼트 삭제하는 법
var h2List=document.getElementsByTagName("h2");
var removeE=h2List.item(1);
removeE.parentNode.removeChild(removeE);
</script>
</body>
</html>
5. Element 객체 변경 & innerHTML
39_innerHTML.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<h1>DOM(Document Object Model) - innerHTML</h1>
<hr>
<ul>
<li>메뉴-1</li>
<li>메뉴-2</li>
<li>메뉴-3</li>
</ul>
<ul>
<li>메뉴-4</li>
<li>메뉴-5</li>
<li>메뉴-6</li>
</ul>
<hr>
<div id="text"></div>
<script type="text/javascript">
//🍒원하는 Element 객체 선택 → 원하는 값으로 변경
var ulList=document.getElementsByTagName("ul");
var liList=ulList.item(0).getElementsByTagName("li");
var liE=liList.item(1);//<li>메뉴-2</li>
/*
//방법1)
//🖤Node(Element) 객체의 첫번째 자식 객체(Text 객체)의 노드내용 변경 - 태그내용 변경
liE.firstChild.nodeValue="신메뉴";//<li>신메뉴</li>
*/
//방법2)
var liT=document.createTextNode("신메뉴");//Text 객체 생성하여 변수에 "저장"
//🖤Node.replaceChild(newChild, oldChild) : Node(Element) 객체의 자식 Node(Element) 객체를 변경하는 메소드
liE.replaceChild(liT, liE.firstChild); //자식 객체 "변경"
//🍇원하는 노드(Node) 객체 생성 → 태그(TagNode) + 태그내용(TextNode) 합체 → 노드(Node) 객체 출력
/*
var pE=document.createElement("p");//<p></p>
var pT=document.createTextNode("p 태그의 내용");
pE.appendChild(pT);//<p>p 태그의 내용</p>
var textE=document.getElementById("text");
textE.appendChild(pE);
*/
//🍇"innerHTML" 이용해 노드 객체 생성 후 바로 출력!!!
var textE=document.getElementById("text");
//🖤Node.innerHTML : Node(Element) 객체의 하위태그를 저장한 프로퍼티
// => Node.innerHTML 프로퍼티를 사용하여 Node(Element) 객체의 하위태그 변경 가능
textE.innerHTML="<p>p 태그의 내용</p>";
</script>
</body>
</html>
6. 디지털 시계
40_clock.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<style type="text/css">
#displayDiv {
width: 600px;
margin: 0 auto;
padding: 30px 0;
font-size: 2em;
font-weight: bold;
text-align: center;
border: 2px solid black;
}
</style>
</head>
<body>
<h1>DOM(Document Object Model) - 시계</h1>
<hr>
<div id="displayDiv">2022년 11월 21일 17시 08분 30초</div>
<script type="text/javascript">
//태그를 검색하여 Element 객체를 반환받아 변수에 저장
var displayDiv=document.getElementById("displayDiv");
//함수를 생성하여 변수에 저장
var displayClock=function() {
var now=new Date();//클라이언트의 현재 날짜와 시간이 저장된 Date 객체 생성
var printNow=now.getFullYear()+"년 "+(now.getMonth()+1)+"월 "+now.getDate()+"일 "
+now.getHours()+"시 "+now.getMinutes()+"분 "+now.getSeconds()+"초";
displayDiv.innerHTML=printNow;
}
displayClock();//함수 호출 - 현재 날짜와 시간 출력
//1초마다 함수 호출 - 동적인 페이지 구현
setInterval(displayClock, 1000);
</script>
</body>
</html>
반응형
'web > javascript' 카테고리의 다른 글
| [js] 10. 자바스크립트 예외처리(Exception Handle) (0) | 2024.05.18 |
|---|---|
| [js] 9. 이벤트 처리 함수 | this 키워드 | 기본 이벤트 | 이벤트전달 | EventListener | DHTML | form태그이벤트 (0) | 2024.05.18 |
| [js] 7. BOM(Browser Object Model) | window | screen | navigator | location | document (0) | 2024.05.17 |
| [js] 6. 자바스크립트 표준내장객체 (클래스함수) Number|String|Date|Math|JSON (0) | 2024.05.16 |
| [js] 5. Object 클래스함수 | Array 클래스함수 | JSON | 구조분해할당 (0) | 2024.05.16 |
