자바스크립트 DOM

Aug 5, 2013

DOM이란?

Document Object Model의 약자로 HTML을 제어할 수 있는 API의 역할을 한다.

DOM의 처리 순서

  • 제어 대상 탐색
  • 제어 대상 메소드 실행 및 이벤트 핸들러 등록

DOM Method

  • createElement : HTML 요소를 생성
  • appendChild : 자식에 요소를 추가
  • getAttribute : 속성을 가져옴
  • setAttribute : 속성을 넣음
  • getElementById : ID 속성으로 요소를 가져옴
  • getElementsByName : NAME 속성으로 요소를 가져옴(배열)
  • getElementsByTagName : 엘리먼트명으로 요소를 가져옴(배열)

이러한 DOM 메소드를 어떻게 사용하는지 알아본다.

HTML

<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

<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 : 선택된 요소의 자식 요소를 선택한다.
See Also