191224 수업 내용 정리

DOM (Document Object Model)

▶ html 문서나 xml문서를 읽어들여 그 문서의 구조(tree)대로
메모리(Ram)에 태그정보를 만들어서 관리해주는 API

※ 동적인 화면디자인에 사용

DOM Method

메서드	설명
getElementById("id명")	해당 id값의 요소를 가져옴
getElementsByTagName("태그명")	해당 태그명에 해당하는 모든 요소를 가져옴
createElement("태그명")	해당 태그명의 요소를 생성
createTextNode("출력할 문자열")	요소 내부에 포함될 문자열 생성 innerHTML속성과 동일
태그명.setAttribute("속성명", "속성값")	이미 생성된 태그에 속성을 부여
부모태그.appendChild(포함시킬 자식태그명)	부모태그에 자식태그를 포함시킴
부모태그명.removeChild(삭제할 자식태그명)	부모태그에서 자식태그를 삭제함
자식태그명.parentNode	해당 태그의 부모태그를 가져옴

※ 위에서부터 4가지 메서드는 앞에 document. 을 붙여서 사용함

§Function과 Method의 차이점

▶ 자바스크립트에서 모든 함수는 객체로 존재함

▷ Method는 객체와 관련된 기능을 수행하는 함수라고 할 수 있으며,
함수의 정의를 포함하는 속성이라고 할 수 있음

▶ 값(value)이 하나의 함수라면 그 값 역시 Method라고 할 수 있음

예제

JavaScript

     <script>
   var count = 0; //div 태그 id 체크

     function appendItem() { //버튼 추가 함수
         count +=1; // 버튼이 생성될 때마다 div의 id값이 1씩 증가
         //1.<div></div> 생성
         var newItem = document.createElement("div");

         /*2. div태그에 id 부여 : <div id = "item_1"></div>
             형식) 생성된 태그명.setAttribute("속성명", "속성값")*/
         newItem.setAttribute("id","item_"+count);

         //3. 문자열 생성 : createTextNode(짧은 문장) or innerHTML(긴 문장)
         var html = '새로 추가된 아이템['+count+']'+'<input type="button" value="삭제 "'+'onclick="removeItem('+count+')"/>';

         //4. 결합 : innerHTML, <div id = "item_1">새로 추가된~</div>
         newItem.innerHTML = html;

         //5. 부모의 태그정보 얻어오기 
         var itemListNode = document.getElementById("itemList");

         //6. 상위 div 태그와 결합 : 부모태그명.appendChild(자식태그명)
         itemListNode.appendChild(newItem);
     }

     function removeItem(idCount) { //버튼 삭제 함수, 매개변수 = 삭제시킬 div의 id값을 받아옴
         //1. 삭제할 태그를 변수에 저장
         var item = document.getElementById("item_"+idCount);

         /*2. 삭제 : 부모태그명.removeChild(삭제할 자식태그명)
         부모태그를 얻어오는 방법2 : 자식태그명.parentNode*/
         item.parentNode.removeChild(item);
     }
  </script>

HTML

      <body>
	<input type="button" value="추가" onclick="appendItem()">
	<div id="itemList">
	<!-- <div id = "item_1">새로 추가된 아이템1[삭제 버튼]</div> 
	    <div id = "item_2">새로 추가된 아이템2[삭제 버튼]</div> -->
	</div>
  </body>

화면을 동적으로 디자인하기 위해서는 DOM의 구조를 알고 JavaScript로 제어할 수 있어야 합니다.

저작자표시 (새창열림)