자바스크립트 DOM

Aug 5, 2013

DOM이란?

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

DOM의 처리 순서

DOM Method

이러한 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 - 조작

Traversing - 탐색