CHAPTER 10. DOM과 이벤트 처리, 입력 검증
문서 객체 모델(DOM) DOM은 HTML 문서의 계층적인 구조를 트리(tree)로 표현
DOM과 BOM HTML 문서를 객체로 표현한 것을 DOM 웹브라우저를 객체로 표현한 것을 BOM(Browser Object Model)
HTML 요소 찾기 동적인 웹페이지를 작성하려면 원하는 요소를 찾아야 한다. id로 찾기 태그 이름으로 찾기
id로 HTML 요소 찾기 <!DOCTYPE > <html> <head> <script> function process() { var obj = document.getElementById("target"); alert(obj.value); } </script> </head> <body> <form name="myform"> <input type="text" id="target" name="text1"> <input type="submit" value="제출" onclick="process()"> </form> </body> </html>
입력 양식 찾기 <!DOCTYPE > <html> <head> <script> function process() { var obj = document.myform.text1; alert(obj.value); } </script> </head> <body> <form name="myform"> <input type="text" id="target" name="text1"> <input type="submit" value="제출" onclick="process()"> </form> </body> </html>
태그 이름으로 HTML 요소 찾기 <!DOCTYPE > <html> <body> <ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> <li>List item 5</li> </ul> <script> var list = document.getElementsByTagName('ul')[0]; var allItems = list.getElementsByTagName('li'); for (var i = 0, length = allItems.length; i < length; i++) { alert(allItems[i].firstChild.data); } </script> </body> </html>
DOM 트리 순회
HTML 요소의 내용 변경 <!DOCTYPE html> <html> <head> <title></title> <script> function get() { var val = document.getElementById("ex").innerHTML; alert(val); } function set(v) { document.getElementById("ex").innerHTML = v; </script> </head> <body> <div id="ex">여기가 div로 선언되었습니다.</div> <a href="#" onclick="get()">div 요소 내용 출력하기</a><br /> <a href="#" onclick="set('변경되었습니다.')">div 요소 내용 변경하기</a> </body> </html>
실행결과
요소의 속성 변경하기 <!DOCTYPE html> <html> <body> <img id="image" src="pome.png" width="120" height="100"> <script> function changeImage() { document.getElementById("image").src = "poodle.png"; } </script> <input type="button" onclick="changeImage()" value="눌러보세요" /> </body> </html>
요소의 스타일 변경하기 <!DOCTYPE html> <html> <body> <p id="p1">This is a paragraph.</p> <script> function changeStyle() { document.getElementById("p1").style.color = "red"; document.getElementById("p1").style.fontFamily = "Century Schoolbook"; document.getElementById("p1").style.fontStyle = "italic"; } </script> <input type="button" onclick="changeStyle()" value="눌러보세요" /> </body> </html>
새로운 HTML 요소 생성 <script> function addtext(t) { if (document.createTextNode) { var node = document.createTextNode(t); document.getElementById("target").appendChild(node); } </script> <div id="target" onclick="addtext('동적으로 텍스트가 추가됩니다.')" style="font: 20px bold;">여기를 클릭하세요.</div>
HTML 요소 삭제 <!DOCTYPE html> <html> <head> <script> function removeNode() { var parent = document.getElementById("target"); var child = document.getElementById("p1"); parent.removeChild(child); } </script> </head> <body> <div id="target"> <p id="p1">첫번째 단락</p> <p id="p2">두번째 단락</p> </div> <button onclick="removeNode()">누르세요!</button> </body> </html>
브라우저 객체 모델 브라우저 객체 모델(BOM: Browser Object Model): 웹 브라우저가 가지고 있는 모든 객체를 의미 최상위 객체는 window이고 그 아래로 navigator, location, history, screen, document, frames 객체가 있다.
새로운 윈도우 오픈 예제 <!DOCTYPE html> <html> <head></head> <body> <form> <input type="button" value="구글창 열기" onclick="window.open('http://www.google.com', '_blank', 'width=300, height=300', true)"> </form> </body> </html>
setTimeout()
예제 <!DOCTYPE html> <html> <head> <script> function showAlert() { setTimeout(function () { alert("setTimeout()을 사용하여 표시됩니다.") }, 3000); } </script> </head> <body> <p>버튼을 누르면 3초 후에 경고 박스가 화면에 표시됩니다. </p> <button onclick="showAlert()">눌러보세요</button> </body> </html>
setInterval()
예제 <!DOCTYPE html> <html> <head> <script> var id; function changeColor() { id = setInterval(flashText, 500); } function flashText() { var elem = document.getElementById("target"); elem.style.color = (elem.style.color == "red") ? "blue" : "red"; elem.style.backgroundColor = (elem.style.backgroundColor == "green") ? "yellow" : "green"; function stopTextColor() { clearInterval(id); </script> </head>
예제 <body onload="changeColor();"> <div id="target"> <p>This is a Text.</p> </div> <button onclick="stopTextColor();">중지</button> </body> </html>
screen 객체
예제 <script> function maxopen(url, winattributes) { var maxwindow = window.open(url, "", winattributes) maxwindow.moveTo(0, 0); maxwindow.resizeTo(screen.availWidth, screen.availHeight) } </script> <a href="#" onClick="maxopen('http://www.google.com', 'resize=1, scrollbars=1, status=1'); return false">전체 화면 보기</a>
location 객체
예제 <script> function replace() { location.replace("http://www.google.com") } </script> <a href="#" onClick="replace()">이동하기</a>
navigator 객체
예제 <script> for (var key in navigator) { value = navigator[key]; document.write(key + ": " + value + "<br>"); } </script>
이벤트 처리
onclick 이벤트 <!DOCTYPE html> <html> <head> <script> function changeColor(c) { document.getElementById("target").style.backgroundColor = c; } </script> </head> <body id="target"> <form method="POST"> <input type="radio" name="C1" value="v1" onclick="changeColor('lightblue')">파랑색 <input type="radio" name="C1" value="v2" onclick="changeColor('lightgreen')">녹색 </form> </body> </html>
onload와 onunload 이벤트 <html> <head> <script> function onLoadDoc() { alert("문서가 로드되었습니다."); document.body.style.backgroundColor = "red"; } </script> </head> <body onload="onLoadDoc();"> </body> </html>
onchange 이벤트 <!DOCTYPE html> <html> <head> <script> function sub() { var x = document.getElementById("name"); x.value = x.value.toLowerCase(); } </script> </head> <body> 영어단어: <input type="text" id="name" onchange="sub()"> <p>입력필드를 벗어나면 소문자로 변경됩니다.</p> </body> </html>
onmouseover 이벤트 <html> <head> <script> function OnMouseIn(elem) { elem.style.border = "2px solid red"; } function OnMouseOut(elem) elem.style.border = ""; </script> </head> <body> <div style="background-color: yellow; width: 200px" onmouseover="OnMouseIn (this)" onmouseout="OnMouseOut (this)"> 마우스를 이 요소 위에 이동하세요. </div> </body> </html>
onmousedown 이벤트 <html> <head> <script> function OnButtonDown(button) { button.style.color = "#ff0000"; } function OnButtonUp(button) { button.style.color = "#000000"; </script> </head> <body> <button onmousedown="OnButtonDown (this)" onmouseup="OnButtonUp (this)">눌러보세요!</button> </body>
계산기 예제 <html> <head> <script> var expression=""; function add(character) { expression = expression + character; document.getElementById("display").value = expression; } function compute() { document.getElementById("display").value = eval(expression); function clearDisplay() { expression = ""; document.getElementById("display").value = "0"; </script>
계산기 예제 <body> <form> display <input id="display" value="0" size="30"> <br> <input type="button" value=" 7 " onclick="add('7')"> <input type="button" value=" 8 " onclick="add('8')"> <input type="button" value=" 9 " onclick="add('9')"> <input type="button" value=" / " onclick="add('/')"> <input type="button" value=" 4 " onclick="add('4')"> <input type="button" value=" 5 " onclick="add('5')"> <input type="button" value=" 6 " onclick="add('6')"> <input type="button" value=" * " onclick="add('*')"> <input type="button" value=" 1 " onclick="add('1')"> <input type="button" value=" 2 " onclick="add('2')"> <input type="button" value=" 3 " onclick="add('3')"> <input type="button" value=" - " onclick="add('-')"> <input type="button" value=" 0 " onclick="add('0')"> <input type="button" value=" + " onclick="add('+')"> <input type="button" value=" Clear " onclick="clearDisplay()"> <input type="button" value=" Enter " name="enter" onclick="compute()"> </form> </body> </html>
실행 결과 웹브라우저 실행
폼의 유효성 검증 입력 필드에서의 잘못을 검증하는 작업 <h3>회원가입</h3> <form> 이름: <input type='text' id='name' /><br /> 주소: <input type='text' id='addr' /><br /> 생일: <input type='date' id='birthday' /><br /> 아이디(6-8 문자): <input type='text' id='username' /><br /> 이메일: <input type='email' id='email' /><br /> 휴대폰: <input type='tel' id='phone' /><br /> <input type='submit' value='확인' /><br /> </form>
공백 검증 <script> function checkNotEmpty(field) { if (field.value.length == 0) { alert("필드가 비어있네요!"); field.focus(); return false; } return true; </script> <form> 이름: <input type='text' id='user' /> <input type='button' onclick="checkNotEmpty(document.getElementById('user'))" value='확인' /> </form>
데이터 길이 검증 <script> function checkLength(elem, min, max) { var s = elem.value; if (s.length >= min && s.length <= max) { return true; } else { alert(min + " 문자와 " + max + " 문자 사이로 입력해주세요!"); elem.focus(); return false; } </script> <form> 이름(6-8 문자): <input type='text' id='name' /> <input type='button' onclick="checkLength(document.getElementById('name'), 6, 8)" value='확인' /> </form>
정규식 정규식(regular expression): 특정한 규칙을 가지고 있는 문자열들을 표현하는 수식이다 (예) ^[0-9]+abc$
숫자 검증 예제 <script> function checkNumeric(elem, msg) { var exp = /^[0-9]+$/; if (elem.value.match(exp)) { return true; } else { alert(msg); elem.focus(); return false; } </script> <form> 전화번호(-없이 입력): <input type='text' id='phone'/> <input type='button' onclick="checkNumeric(document.getElementById('phone'), '숫자만 입력하세요!')" value='확인' /> </form>
Q & A