🐧onload 이벤트
◈ 요청 웹프로그램(웹문서)의 실행결과를 응답받아 출력되는 영역을 자바스크립트에서는 document 객체로 표현하며 document 객체에 출력되는 태그(박스모델)는 Element 객체로 표현하여 처리
◈ DOM : 브라우저의 출력영역(document 객체)을 기반으로 제공되는 자바스크립트 객체
◈ 브라우저에서 이벤트가 발생될 경우 이벤트 처리 명령으로 박스모델(Element 객체)을 조작하여 동적인 페이지 제공 - DHTML(Dynamic HTML)
◈ 이벤트(Event) : 태그(박스모델)에서 발생되는 다양한 사건
◈ 이벤트 처리(Event Handle) : 태그에서 발생된 이벤트에 대한 처리 명령 - 자바스크립트 이용
◈ 페이지를 구성하는 모든 태그가 Element 객체로 표현되어 있어야지만 동적인 페이지 구현 가능 - DOM Tree 완성 후 Element 객체 조작 가능
◈ DOM Tree : document 객체를 최상위 부모 객체로 두고 모든 태그가 Element 객체로 트리(Tree) 형식의 계층적 구조로 메모리에 표현되어 있는 상태
◈ DOM Tree는 웹문서를 모두 읽어 DOM Parser에 의해 해석(parsing)된 경우 완성
📃35_onload.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JavaScript</title> <script type="text/javascript"> function load() {//이벤트 처리 함수 alert("DOM Tree가 완성되어 동적인 페이지 구현이 가능합니다."); } /* //태그의 이벤트 속성을 객체의 프로퍼티로 사용하여 이벤트 처리 함수 등록 가능 //→ 태그에서 이벤트가 발생되면 이벤트 처리 함수가 자동 호출되어 실행 window.onload=function() { alert("DOM Tree가 완성되어 동적인 페이지 구현이 가능합니다."); } */ </script> </head> <!-- body 태그의 onload 이벤트 속성 : body 태그를 모두 읽은 경우에 대한 이벤트 속성 - DOM Tree 완성 --> <!-- → onload 이벤트 속성값으로 이벤트 처리 명령(자바스크립트 - 이벤트 처리 함수 호출) 설정 --> <!--<body> --><!-- javascript 접두사 생략 가능 --> <body> <h1>DOM(Document Object Model) - onload 이벤트</h1> <hr> <p>요청 웹프로그램(웹문서)의 실행결과를 응답받아 출력되는 영역을 자바스크립트에서는 document 객체로 표현하며 document 객체에 출력되는 태그(박스모델)는 Element 객체로 표현하여 처리</p> <p>DOM : 브라우저의 출력영역(document 객체)을 기반으로 제공되는 자바스크립트 객체</p> <p>브라우저에서 이벤트가 발생될 경우 이벤트 처리 명령으로 박스모델(Element 객체)을 조작하여 동적인 페이지 제공 - DHTML(Dynamic HTML)</p> <p>이벤트(Event) : 태그(박스모델)에서 발생되는 다양한 사건</p> <p>이벤트 처리(Event Handle) : 태그에서 발생된 이벤트에 대한 처리 명령 - 자바스크립트 이용</p> <p>페이지를 구성하는 모든 태그가 Element 객체로 표현되어 있어야지만 동적인 페이지 구현 가능 - DOM Tree 완성 후 Element 객체 조작 가능</p> <p>DOM Tree : document 객체를 최상위 부모 객체로 두고 모든 태그가 Element 객체로 트리(Tree) 형식의 계층적 구조로 메모리에 표현되어 있는 상태</p> <p>DOM Tree는 웹문서를 모두 읽어 DOM Parser에 의해 해석(parsing)된 경우 완성</p> <!-- ======================================================================= --> <!-- body 태그의 마지막 자식태그로 script 태그 작성 --> <script type="text/javascript"> //onload 이벤트를 사용하지 않아도 동적인 페이지 구현 가능 - 가독성 증가 alert("DOM Tree가 완성되어 동적인 페이지 구현이 가능합니다."); </script> </body> </html>
🐧document
📌document.gerElementById(id) : 태그의 id 속성값으로 태그를 검색하여 태그에 대한 Element 객체를 반환하는 메소드
→ document 객체의 자식태그 중 하나의 태그를 검색하여 Element 객체로 반환
→ document 객체 대신 부모 Element 객체를 사용하여 자식 Element 객체를 검색하여 반환var h2E=document.getElementById("headline"); alert(h2E);
📌Node.nodeName : Node(Element) 객체의 노드명(태그명)을 저장한 프로퍼티
alert(h2E.nodeName);//H2
📌Node.nodeValue : Node(Element) 객체의 노드값(태그내용)을 저장한 프로퍼티
alert(h2E.nodeValue);//null
📌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 태그의 내용 변경";
📌document.getElementsByTagName(tagName) : 태그명을 이용하여 태그를 검색하여 NodeList 객체로 반환하는 메소드
→ 다수의 태그를 검색하여 Element 객체의 모임(List 객체)으로 반환
→ document 객체 대신 부모 Element 객체를 사용하여 자식 Element 객체들을 검색하여 반환
◈ NodeList 객체 : Node(Element) 객체가 다수 저장된 콜렉션 객체var liList=document.getElementsByTagName("li"); alert(liList);//[object HTMLCollection]
📌NodeList.length : NodeList 객체에 저장된 Node 객체의 갯수를 저장한 프로퍼티
📌NodeList.item(index) : NodeList 객체에 첨자(Index) 위치의 Node(Element) 객체를 반환하는 메소드
for(i=0;i<liList.length;i++) { var liE=liList.item(i); //alert(liE);//[object HTMLLIElement] // //alert(liE.nodeName); alert(liE.firstChild.nodeValue); }
📌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 태그에 의해 출력되는 내용
📌document.querySelectorAll(selector) : CSS 선택자로 태그를 검색하여 NodeList 객체를 반환하는 메소드
→ document 객체의 자식태그 중 하나의 태그를 검색하여 Element 객체로 반환
→ 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 태그에 의해 출력되는 내용
📃36_element.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JavaScript</title> </head> <body> <h1>DOM(Document Object Model) - Element 객체</h1> <hr> <h2 id="headline">h2 태그에 의해 출력되는 내용</h2> <p>Node 객체 : 태그(TagNode)와 태그내용(TextNode)을 객체로 표현</p> <p>Element 객체 : 태그만을 객체로 표현</p> <hr> <ul> <li>li 태그에 의해 출력되는 내용-1</li> <li>li 태그에 의해 출력되는 내용-2</li> <li>li 태그에 의해 출력되는 내용-3</li> </ul> <p class="text">p 태그에 의해 출력되는 내용</p> <script type="text/javascript"> //document.gerElementById(id) : 태그의 id 속성값으로 태그를 검색하여 태그에 대한 Element 객체를 반환하는 메소드 //→ document 객체의 자식태그 중 하나의 태그를 검색하여 Element 객체로 반환 //→ document 객체 대신 부모 Element 객체를 사용하여 자식 Element 객체를 검색하여 반환 var h2E=document.getElementById("headline"); //alert(h2E);//[object HTMLHeadingElement] //============================================================================== //Node.nodeName : Node(Element) 객체의 노드명(태그명)을 저장한 프로퍼티 //alert(h2E.nodeName);//H2 //============================================================================== //Node.nodeValue : Node(Element) 객체의 노드값(태그내용)을 저장한 프로퍼티 //alert(h2E.nodeValue);//null //============================================================================== //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 태그의 내용 변경"; //============================================================================== //document.getElementsByTagName(tagName) : 태그명을 이용하여 태그를 검색하여 NodeList 객체로 반환하는 메소드 //→ 다수의 태그를 검색하여 Element 객체의 모임(List 객체)으로 반환 //→ document 객체 대신 부모 Element 객체를 사용하여 자식 Element 객체들을 검색하여 반환 //NodeList 객체 : Node(Element) 객체가 다수 저장된 콜렉션 객체 var liList=document.getElementsByTagName("li"); //alert(liList);//[object HTMLCollection] //============================================================================== //NodeList.length : NodeList 객체에 저장된 Node 객체의 갯수를 저장한 프로퍼티 //alert(liList.length);//3 //============================================================================== /* for(i=0;i<liList.length;i++) { //NodeList.item(index) : NodeList 객체에 첨자(Index) 위치의 Node(Element) 객체를 반환하는 메소드 var liE=liList.item(i); //alert(liE);//[object HTMLLIElement] // //alert(liE.nodeName); alert(liE.firstChild.nodeValue); } */ //============================================================================== //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 태그에 의해 출력되는 내용 //============================================================================== //document.querySelectorAll(selector) : CSS 선택자로 태그를 검색하여 NodeList 객체를 반환하는 메소드 //→ document 객체의 자식태그 중 하나의 태그를 검색하여 Element 객체로 반환 //→ 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>
🐧Element 객체 생성 및 추가
📌document.createElement(nodeName) : 전달값의 태그명을 가진 Element 객체를 생성하여 반환하는 메소드 - 태그 생성
var h2E=document.createElement("h2");//<h2></h2>
📌document.createTextNode(content) : 전달값을 태그내용으로 가진 Text 객체를 생성하여 반환하는 메소드 - 태그 내용 생성
var h2T=document.createTextNode("h2 태그의 내용");
📌Node.appendChild(newNode) : Node(Element) 객체의 마지막 자식 Node 객체로 추가하는 메소드
h2E.appendChild(h2T);//<h2>h2 태그의 내용</h2>
📌document.body : body 태그를 객체로 표현 가능 - 웹문서에 하나의 body 태그만 존재
document.body.appendChild(h2E);//DOM Tree에 Node 객체 부착 >> 출력
var imgE=document.createElement("img");//<img>📌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";//http://localhost:8000/web/js/images/koala.jpg width="300"📌Element 객체를 반환받아 마직막 자식객체에 태그 배치 - 추가
var imageDiv=document.getElementById("imageDiv"); imageDiv.appendChild(imgE);
📌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"> */
📌Element.setAttribute(name, value) : Element 객체의 태그 속성을 변경하는 메소드
imgE.setAttribute("src", "images/Koala.jpg");//<img src="images/Koala.jpg">📌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]📌Node.insertBefore(newElement, before) : 기존 Node(Elemet) 객체전에 새로운 Node(Element) 객체를 삽입하는 메소드
document.body.insertBefore(hrE, h2E);
📃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"> //document.createElement(nodeName) : 전달값의 태그명을 가진 Element 객체를 생성하여 반환하는 메소드 - 태그 생성 var h2E=document.createElement("h2");//<h2></h2> //alert(h2E);//[object HTMLheadingElement] //============================================================================== //document.createTextNode(content) : 전달값을 태그내용으로 가진 Text 객체를 생성하여 반환하는 메소드 - 태그 내용 생성 var h2T=document.createTextNode("h2 태그의 내용"); //alert(h2T);//[object Text] //============================================================================== //Node.appendChild(newNode) : Node(Element) 객체의 마지막 자식 Node 객체로 추가하는 메소드 h2E.appendChild(h2T);//<h2>h2 태그의 내용</h2> //============================================================================== //document.body : body 태그를 객체로 표현 가능 - 웹문서에 하나의 body 태그만 존재 //alert(document.body);//[object HTMLBodyElement] document.body.appendChild(h2E);//DOM Tree에 Node 객체 부착 >> 출력 //============================================================================== var imgE=document.createElement("img");//<img> // /* //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"> */ //Element.setAttribute(name, value) : Element 객체의 태그 속성을 변경하는 메소드 imgE.setAttribute("src", "images/Koala.jpg");//<img src="images/Koala.jpg"> //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] //Node.insertBefore(newElement, before) : 기존 Node(Elemet) 객체전에 새로운 Node(Element) 객체를 삽입하는 메소드 document.body.insertBefore(hrE, h2E); </script> </body> </html>
🐧Element 객체 삭제
🎨id가 있을때 삭제 방법
📌Node.removeChilde(oldNode) : Node(Element) 객체의 자식 Node(Element) 객체를 삭제하는 메소드
document.body.removeChild(h2E);
📌Node.parentNode : Node(Element) 객체의 부모 Node(Element) 객체를 저장한 프로퍼티
h2E.parentNode.removeChild(h2E);
🎨id가 없을때 삭제 방법
var h2List=document.getElementsByTagName("h2"); var removeE=h2List.item(1); removeE.parentNode.removeChild(removeE);
📃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"> var h2E=document.getElementById("remove") // /* //id가 있을때 삭제 방법 //Node.removeChilde(oldNode) : Node(Element) 객체의 자식 Node(Element) 객체를 삭제하는 메소드 //document.body.removeChild(h2E); // //Node.parentNode : Node(Element) 객체의 부모 Node(Element) 객체를 저장한 프로퍼티 h2E.parentNode.removeChild(h2E); */ //============================================================================== //id가 없을때 삭제 방법 var h2List=document.getElementsByTagName("h2"); var removeE=h2List.item(1); removeE.parentNode.removeChild(removeE); </script> </body> </html>
🐧innerHTML
🎨첫번째 방법
◈ Node(Element) 객체의 첫번쨰 자식 객체(Text 객체)의 노드내용 변경 - 태그내용 변경
liE.firstChild.nodeValue="신메뉴";//<li>신메뉴</li>
🎨두번째 방법
var liT=document.createTextNode("신메뉴");//Text 객체 생성하여 변수에 저장📌Node.replaceChild(newChild, oldChild) : Node(Element) 객체의 자식 Node(Element) 객체를 변경하는 메소드
liE.replaceChild(liT, liE.firstChild);
🎨불편한 방법
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>"
📃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"> var ulList=document.getElementsByTagName("ul"); var liList=ulList.item(0).getElementsByTagName("li");//첫번째 ul 태그 //ulList.item(1);//두번째 ul 태그 var liE=liList.item(1);//<li>메뉴-2</li> // //첫번째 방법 //Node(Element) 객체의 첫번쨰 자식 객체(Text 객체)의 노드내용 변경 - 태그내용 변경 //liE.firstChild.nodeValue="신메뉴";//<li>신메뉴</li> //두번째 방법 var liT=document.createTextNode("신메뉴");//Text 객체 생성하여 변수에 저장 //Node.replaceChild(newChild, oldChild) : Node(Element) 객체의 자식 Node(Element) 객체를 변경하는 메소드 liE.replaceChild(liT, liE.firstChild); //============================================================================== /* //불편한 방법 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>
💯예제문제 - 시계
📃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>
