생활코딩

코스 전체목록

닫기

DOM

본 수업은 폐지 예정입니다. 자바스크립트 언어 수업웹브라우저 자바스크립트로 수업이 리뉴얼 되었기 때문에 이것을 이용해주세요.

Dom - (document object model)

  • 자바스크립트는 Dom을 통해서 HTML을 제어한다.
  • 문서에 프로그래밍적으로 엑세스하고 변형하기 위한 프로그래밍 인터페이스.
  • Dom처리의 일반적인 순서
    1. 제어할 대상을 찾는다. - getElementById(), getElementsByName(), getElementsByTagName()
    2. 대상이 가지고 있는 메소드를 실행하거나, 이벤트 핸들러를 설치한다.

Dom Object

주요한 엘리먼트 메소드

제어 할 대상을 탐색

엘리먼트를 생성

  • document.createElement
  • document.createTextNode

엘리먼트를 제어

  • element.appendChild
  • element.setAttribute
  • element.getAttribute
  • element.innerHTML

예제

example1.html (jsfiddle, github)

  • document.getElementById 를 이용해서 엘리먼트를 선택
  • 특수한 엘리먼트(DOM input text)의 속성(value)에 접근해서 값을 가져옴
  • 가져온 값을 div의 내용으로 추가
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
		<script type="text/javascript">
			function sync() {
				// title 엘리먼트를 찾는다.
				var title = document.getElementById('title');
				// output 엘리먼트를 찾는다.
				var output = document.getElementById('output');
				// output 엘리먼트안에 title의 값을 삽입한다.
				output.innerHTML = title.value;
			}
		</script>
	</head>
	<body>
		<div style="background-color: gray;" id="output">
			output
		</div>
		<input type="text" value="egoing" id="title" onchange="sync()">
		<script>
			sync();
		</script>
	</body>
</html>

example2.html (jsfiddle, github)

  • document.getElementsByTagName을 이용해서 엘리먼트를 선택
  • 이 때 리턴 값은 여러개이기 때문에 배열(array)에 담겨짐
  • 엘리먼트의 class를 동적으로 변경해서 미리정의된 스타일시트의 설정을 동적으로 적용
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
		<style type="text/css">
			.red {
				background-color: red;
			}
			.blue {
				background-color: blue;
			}
			.green {
				background-color: green;
			}
		</style>
	</head>
	<body>
		<div>
			red
		</div>
		<div>
			blue
		</div>
		<div>
			green
		</div>
		<input type="button" value="color" onclick="colorize()" />
		<script type="text/javascript">
			function colorize() {
				var divs = document.getElementsByTagName('div');
				for(var i = 0; i < divs.length; i++) {
					divs[i].setAttribute('class', divs[i].innerHTML)
				}
			}
		</script>
	</body>
</html>

example3.html (jsfiddle, github)

	<html>
	    <style type="text/css">
	        .hide{display:none}
	        #menu{
	            padding-left:0;
	        }
	        #menu li{
	            float:left;
	            margin-left:20px;
	        }
	        #canvas{
	            clear:both;
	        }
	    </style>
	    <body>
	        <ul id="menu">
	            <li><a id="gogh" href="#tab1">고흐</a></li>
	            <li><a id="gaudi" href="#tab2">가우디</a></li>
	            <li><a id="albrecht" href="#tab3">알브레히트 뒤러</a></li>
	        </ul>
	        <div id="canvas">
	            <div id="gogh_img">
	                <img src="http://farm3.static.flickr.com/2435/3687464186_5ca34c866c.jpg" />
	            </div>
	            <div class="hide"  id="gaudi_img">
	                <img src="http://farm2.static.flickr.com/1027/5184060937_679f620225.jpg" />
	            </div>
	            <div class="hide"  id="albrecht_img">
	                <img src="http://farm5.static.flickr.com/4084/4979876994_5bce879910.jpg" />
	            </div>
	        </div>
	        <script type="text/javascript">
	            function addEvent(el, eType, fn, uC) {
	                if (el.addEventListener) {
	                    el.addEventListener(eType, fn, uC);
	                    return true;
	                } else if (el.attachEvent) {
	                    return el.attachEvent('on' + eType, fn);
	                } else {
	                    el['on' + eType] = fn;
	                }
	            }
	            function clickHandler(e){
	                var id = e.target.id;
	                var t = document.getElementById(e.target.id+'_img');
	                var p = document.getElementById('canvas');
	                for(var i = 0 ; i < p.childNodes.length ; i ++){
	                    var c = p.childNodes[i];
	                    if(c.nodeName == 'DIV'){
	                        c.setAttribute('class', 'hide');
	                    }
	                }
	                t.setAttribute('class', '');
	            }
	            addEvent(document.getElementById('gogh'), 'click', clickHandler)
	            addEvent(document.getElementById('gaudi'), 'click', clickHandler)
	            addEvent(document.getElementById('albrecht'), 'click', clickHandler)
	        </script>
	    </body>
	</html>

example4.html (jsfiddle, github, 예제출처)

<html>
	<head>
		<title>||Working with elements||</title>
	</head>

	<script type="text/javascript">
		var my_div = null;
		var newDiv = null;

		function addElement() {
			// create a new div element
			// and give it some content
			newDiv = document.createElement("div");
			newContent = document.createTextNode("Hi there and greetings!");
			newDiv.appendChild(newContent);
			//add the text node to the newly created div.

			// add the newly created element and it's content into the DOM
			my_div = document.getElementById("org_div1");
			document.body.insertBefore(newDiv, my_div);
		}
	</script>

	<body onload="addElement()">
		<div id='org_div1'>
			The text above has been created dynamically.
		</div>
	</body>
</html>

DOM을 이용한 예제들

http://www.w3schools.com/htmldom/dom_examples.asp

 

댓글

댓글 본문
  1. Jeon Young Ho
    DOM 예제 링크는 https://www.w3schools.com......asp 로 변경된 것 같아요.
  2. Dusskapark
    http://www.w3schools.com......asp

    맨 마지막에 돔 예제 링크가 바뀐 것 같습니다.
  3. egoing
    수정했습니다. 고맙습니다!
    대화보기
    •     <style tyep="text/css">
      오타가 있습니다!
      수업에 항상 감사합니다
    • artropism
      어휴 저도 헤매고 있었는데 이 대화를 보니 힘이 나는군요. 빨리 끝내고 jQuery 배우고 다시 와야겠습니다
      대화보기
      • 레이진
        잘 보고 갑니다 ^^
      • 할수있다
        넵! 믿고 따릅니다 ^^
        대화보기
        • egoing
          최근에 DOM을 직접 제어하는 일은 최소한 처음 자바스크립트에 입문하는 사람들에게는 극히 드문 일입니다. 그러니 너무 불안해하지 마시고 jQuery 쪽을 보시면 DOM을 직접 제어해서 하는 것과 같은 하지만 더 효율적이면서 매우 쉬운 방법들이 있습니다. 그러니 계속 고고 ~
          대화보기
          • 할수있다
            예제 2번에서 셋어트리뷰트가 어려워요..
            이해가 안가요 ㅠㅠ
          • GNyon
            NodeName에서 div를 찾을 때 왜 DIV 대문자인지 궁금합니다..
          • HwangTY
            styner007님에게 답변다시는 글을 저에게 다신것 같네요 ㅎㅎ
            휴일 잘 마무리하시고 활기찬 한 주 시작하세요 ^^
            대화보기
            • egoing
              질문이 잘 이해가 되지 않습니다. ^^

              아래 크롬 개발자 도구 수업은 혹시 알고 계신가요?
              http://opentutorials.org......580
              대화보기
              • styner007
                3번째 예제 소스 복사해서 제가 따로만든 html 파일에 붙여넣기 한후 크롬 개발자 도구 붙여넣고 디버깅 돌려보면 sources 창에 스크립트 부분만 나오고 html 부분은 나오지 않습니다.. css 부분이 적용이 안되 그림3개가 다나오는 듯한데,, 제가 mac에서 크롬으로 돌리기 때문에 나오는건가요 ,, 에고, 궁금하내요
              • HwangTY
                19분짜리 강의 알것같으면서도 왠지 복잡하고 어려워보이네요
              • 스톰레이지
                강좌 잘 봤습니다.
                그런데 해당 예제소스를 제가 jsfidle에 입력하고 'Run'을 실행해도 스크립트 적용이 안되네요..
                혹시 제가 잘못 입력했나 해서.. 링크를 클릭해서 오픈되는 jsfidle에서는 실행되는데.. 그 소스를 그대로 copy&paste하면 안되는 ...ㅜㅜ
              • egoing
                DOM을 직접 다루는 일은 흔치 않은 일이 되고 있습니다. 잘 이해가 안된다고 걱정하지 마시고 생코의 수업 중에 jQuery 수업이 있습니다. 이걸 보시면 훨씬 쉬울 것 같습니다
                대화보기
                • 어렵네유
                  전..무슨말인지모르겟어요 ㅠㅠㅠㅠㅠㅠㅠㅠ
                • 비기너
                  점점 운영자님이 존경스럽습니다...쉽게 설명해주시는데 제 머리가 못따라가네요 ㅠㅠ 자바스크립배우면서 dom 이 젤어려운듯 ㅠㅠ
                • 포스만빵
                  점 점 제 머리가 흐리멍텅해 지는 느낌이네요.. 쩝~
                • Jamesmoon
                  예제3에서 이미지 하나 더 추가해서 구성해보려는데 잘 안되네요... 함수 중에 어느 부분을 수정하거나 추가해야할까요? 아직 이해도가 부족해서 ^^; 조언 부탁 드립니다. 참고로 현재까지 제가 수정한 파일은


                  <script type="text/javascript" src="javascript/season.js">
                  function addEvent(el, eType, fn, uC) {
                  if (el.addEventListener) {
                  el.addEventListener(eType, fn, uC);
                  return true;
                  } else if (el.attachEvent) {
                  return el.attachEvent ('on' + eType, fn);
                  } else {
                  el['on' + eType] = fn;
                  }
                  }
                  //main active function
                  function clickHandler(e) {
                  var id=e.target.id;
                  var t=document.getElementById(id + '_img');
                  var p=document.getElementById('season');
                  for(var i=0; i < p.childNodes.length; i++) {
                  var c=p.childNodes[i];
                  if(c.nodeName == 'DIV') {
                  c.setAttribute('class', 'hide');
                  }
                  }
                  t.setAttribute('class', '');
                  }
                  addEvent(document.getElementById('spring'), 'click', clickHandler);
                  addEvent(document.getElementById('summer'), 'click', clickHandler);
                  addEvent(document.getElementById('fall'), 'click', clickHandler);
                  addEvent(document.getElementById('winter'), 'click', clickHandler);
                  </script>

                  이러합니다.
                • 엽기공쭈
                  예제 2번과 3번이 익스플로러에서 왜 작동이 안 될까요?
                  예제 2번은 오류는 나오지 않고 실행이 되질 않아요. 예제 3번은 clickHandler에서 target.id 가 개체가 없거나 null이라고 나오네요. 크롬에서는 동작하는데....
                  초보인 저로서는 이해도 안 되고 안 되는 이유를 찾을 수가 없습니다.
                  같이 공부하시는 님들 중에서도 혹시 아시는 계시면 답변 좀 부탁드리겠습니다.
                • 뉴올리언스
                  궁금한게 있는데요 example3 에서

                  addEvent(document.getElementById('gogh'), 'click', clickHandler)

                  이렇게 이벤트를 등록하기 위해서 호출을 하는데

                  function addEvent(el, eType, fn, uC) {
                  if (el.addEventListener) {
                  el.addEventListener(eType, fn, uC);
                  return true;
                  } else if (el.attachEvent) {
                  return el.attachEvent('on' + eType, fn);
                  } else {
                  el['on' + eType] = fn;
                  }
                  }

                  함수 원형에서 사용하는 uC 의 역할이 궁금합니다.
                • 소원아빠
                  그저 다른 말이 필요 없습니다. 대박!!!그 동안 뭐 어디에서 부터 손을 대야 할지 몰랐는데... 이해가 정말 잘 되요 ㅜㅜ정말 감사합니다.
                • Dong-young K
                  구글 개발도구에서 DOM 엘리먼트영역을 더블클릭후h1태그의 왼쪽부분에 id="title"을 적으신 뒤 var title=document.getElementById('title'); 하셔서 진행하시면됩니다.
                  대화보기
                  • Guest
                    동영상에서는 생활코딩 홈페이지에서 수업의 타이틀인 DOM을 값을 구글개발자도구 콘솔로 제어해서 그 뒤에 버튼을 추가하는 실습을 해요. 동영상에는 DOM의 id값이 "title"인데 지금은 class값으로 entry-title이라는 값을 가져요. 그래서 document.getElementById("title")대신document.getElementsByClassName("entry-title")을 써서 따라가긴 하는데 appendchild 속성 추가가 불가능 하고 그래용
                    대화보기
                    • 누렁이
                      example3의 소스코드에 style type을 지정하는 2번째 줄에서 type의 오타가 있습니다.(그치만실행은 잘되요) :)
                    • egoing
                      왜 그런가요? 확인을 하려니까 동영상을 다 봐야해서요. ^^
                      대화보기
                      • Guest
                        페이지가 개편되면서 세번째 동영상(dom3) 9분부터 실습을 따라할 수 가 없게됐어용ㅠ.ㅠ
                      • manorgass
                        마지막 예제 example4.html의 body 부분을 아래와 같이 변경해보세요. 다이나믹하게 생성된다는 뜻을 조금 더 직관적으로 이해할 수 있습니다. 참고가 되었으면 합니다. ;-)
                        *****body의 onload="addElement()"를 지워주세요.
                        <div id="org_div1"> The text above has been created dynamically. </div> <script> setTimeout(addElement, 2000); </script>

                        setTimeout(function, millisecond)는 매개변수 function을 millisecond 후에 실행하도록 해주는 자바스크립트 함수입니다.
                      • WEBM
                        이제야 javascript를 좀 알겠네요 ~~ ㄳ
                      • nick
                        DOM 이해가 잘 되네요..근데 w3school 에서 DOM 내용이 동영상에 나오는거랑 현재 페이지랑 꽤 많이 바뀐거 같아요.
                      • Lee. Seong Gwan
                        firefox는 주소창에 javascript: 가 실행되지 않는 것 같아요.chrome에선 되는데 말이죠.
                      • 정은교
                        정말 쉬운 강의 감사합니다!이제야 자바스크립트를 알 것 같네요!
                      버전 관리
                      egoing
                      현재 버전
                      선택 버전
                      graphittie 자세히 보기