Dom 이란?
Document Object Model의 약자로 HTML을 제어 할 수 있는 API의 역할을 한다.
DOM의 처리 순서
- 제어 대상 탐색
- 제어 대상 메소드 실행 및 이벤트 핸들러 등록
Dom Method
- createElement : HTML 요소를 생성
- appendChild : 자식에 요소를 추가
- getAttribute : 속성을 가져옴
- setAttribute : 속성을 넣음
- getElementById : ID속성으로 요소를 가져옴
- getElementsByName : NAME속성으로 요소를 가져옴(배열)
- getElementsByTagName : 엘리먼트명으로 요소를 가져옴(배열)
이러한 Dom 메소드를 어떻게 사용하는지 알아볼 것이다.
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<h1>testByTagName - 색 변경 - getElementsByTagName 예제</h1> <ul id="test1"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <h1>testByName - 색 변경, getElementsByName 예제</h1> <ul id="test2"> <li name="li_name">1</li> <li name="li_name">2</li> <li name="li_name">3</li> <li name="li_name">4</li> <li name="li_name">5</li> </ul> <h1>drawBox - 박스 그렸다 5초만에 지우기</h1> |
Javascript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<script type="text/javascript"> //DIV 박스를 body 태그 안에 추가해주는 함수 function drawBox() { // DIV 요소 생성 var div = document.createElement("div"); // DIV의 속성 지정 (id, style) div.setAttribute("id","testDiv"); div.setAttribute("style","border:1px solid #000000;padding:10px;height:100px;"); // DIV 내용으로 위에서 지정한 속성을 출력 div.innerHTML = div.getAttribute("style"); // DIV를 body 태그안에 추가해준다. document.body.appendChild(div); // 5초 보여주고 지우기 setTimeout(function() { // 요소 제거 document.body.removeChild(div); },5000); } function testByTagName() { // test1이란 아이디를 가진 요소를 JS 변수로 선언 var test2 = document.getElementById("test1"); // test2에서 tagName으로 검색해서 li인 것만 찾아서 배열로 저장 var arrLi = test2.getElementsByTagName("li"); // 배열 갯수 var cnt = arrLi.length; // 배열 루프 for(var i=0;i<cnt;i++) { // 선택된 li 요소의 색상 변경 arrLi[i].setAttribute("style","color:red;"); } } function testByName() { var arrLi = document.getElementsByName("li_name"); // 배열 갯수 var cnt = arrLi.length; // 배열 루프 for(var i=0;i<cnt;i++) { // 선택된 li 요소의 색상 변경 arrLi[i].setAttribute("style","color:blue;font-size:14px;"); } } // 함수 실행 drawBox(); testByName(); testByTagName(); </script> |
jQuery 에서는?
Manipulation – 조작
- append : 자식요소를 가장 뒤에 추가한다.
- prepend : 자식요소를 가장 앞에 추가한다.
- after : 형제요소를 뒤에 추가한다.
- before : 형제 요소를 앞에 추가한다.
- attr : 속성을 가져오거나 지정할 수 있다.(get/set)
- html : 선택된 요소 안에 HTML을 가져오거나 지정할 수 있다.(get/set)
- text : 선택된 요소 안에 텍스트만 가져오거나 지정할 수 있다.(get/set)
- val : 선택된 요소의 value 값을 가져오거나 지정할 수 있다.(get/set)
- css: 선택된 요소의 css 값을 가져오거나 지정할 수 있다.(get/set)
- remove : 선택된 요소를 삭제한다.
Traversing – 탐색
- find : 선택된 요소 아래에 있는 요소를 검색해서 선택한다.
- next : 선택된 요소 다음 요소를 선택한다.
- prev : 선택된 요소 이전 요소를 선택한다.
- parent : 선택된 요소의 부모 요소를 선택한다.
- children : 선택된 요소의 자식 요소를 선택한다.