본문 바로가기
# Work/Javascript

자바스크립트 기초-7 object,DOM

by 호정찐 2012. 1. 2.
반응형

## object (객체)
- 이름과 값으로 이루어진 속성들을 포함하는 컨테이너
- 객체 안에 데이터를 정의하면 속성, propery라고 함
- 객체 안에 함수를 정의하면 메소드(method)라고 함

## 자바스크립트의 내장 객체들 : 시스템이 기본적으로 제공하는(built-in) 객체

 ## Dom (document object model)
- 자바스크립트는 Dom을 통해서 HTML을 제어한다.
- 문서에 프로그래밍적으로 엑세스하고 변형하기 위한 프로그래밍 인터페이스.
- Dom처리의 일반적인 순서

  1. 제어할 대상을 찾는다. - getElementById(), getElementsByName(), getElementsByTagName()
  2. 대상이 가지고 있는 메소드를 실행하거나, 이벤트 핸들러를 설치한다.

## Dom object

  • DOM Document - 문서를 제어하기 위한 API
  • DOM Events - 엘리먼트가 공통적으로 가지고 있는 이벤트
  • DOM Elements - 엘리먼트가 공통적으로 가지고 있는 API

    다음 객체들은 위의 Dom Events, Elements 의 API 외에 엘리먼트의 특성에 따라 추가되는 API 리스트임
  • DOM Anchor
  • DOM Area
  • DOM Base
  • DOM Body
  • DOM Button
  • DOM Form
  • DOM Frame/IFrame
  • DOM Frameset
  • DOM Image
  • DOM Input Button
  • DOM Input Checkbox
  • DOM Input File
  • DOM Input Hidden
  • DOM Input Password
  • DOM Input Radio
  • DOM Input Reset
  • DOM Input Submit
  • DOM Input Text
  • DOM Link
  • DOM Meta
  • DOM Object
  • DOM Option
  • DOM Select
  • DOM Style
  • DOM Table
  • DOM TableCell
  • DOM TableRow
  • DOM Textarea

    • ## 예제1

    <div style="background-color: gray;" id="output">output</div>
    <input type="text" value="egoing" id="title" onchange="document.getElementById('output').innerHTML=this.value">
    <script type="text/javascript">
    // title 엘리먼트를 찾는다.
    var title = document.getElementById('title');
    // output 엘리먼트를 찾는다.
    var output = document.getElementById('output');
    // output 엘리먼트안에 title의 값을 삽입한다.
    output.innerHTML = title.value;
    </script>

    - document.getElementById 를 이용해서 엘리먼트를 선택
    - 특수한 엘리먼트(DOM input text)의 속성(value)에 접근해서 값을 가져옴
    - 가져온 값을 div의 내용으로 추가

    ## 예제2

    <style type="text/css">
    .red{
    background-color:red;
    }
    .blue{
    background-color:blue;
    }
    .green{
    background-color:green;
    }
    </style>
    <div>red</div>
    <div>blue</div>
    <div>green</div>
    <script type="text/javascript">
    var divs = document.getElementsByTagName('div');
    for(var i=0; i<divs.length; i++){
    divs[i].setAttribute('class', divs[i].innerHTML)
    }
    </script>

    <html>
    <style tyep="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>

    ## DOM을 활용한 예제들!!
    http://www.w3schools.com/htmldom/dom_examples.asp

    반응형
    저작자표시 비영리 변경금지

    '# Work > Javascript' 카테고리의 다른 글

    Node.js란  (0) 2015.05.26
    if문의 축약형  (0) 2015.02.16
    자바스크립트 기초-6 이벤트  (0) 2011.12.30
    자바스크립트 기초-5 배열  (0) 2011.12.30
    자바스크립트 기초4 - 함수  (0) 2011.12.29

    관련글

    티스토리툴바