Language/Ajax Ajax 기본
    Dexter_-   2018. 11. 13. 16:36
  • 728x90
    반응형

    Ajax 기본



    문서 객체 모델(DOM) 이란?


    문서 객체 모델(DOM, Document Object Model)은 HTML 문서나 XML 문서에 접근하기 위한 일종의 인터페이스이다.

    이 모델은 문서 내의 모든 요소의 목적과 특징을 정의하고, 각각의 요소에 접근하는 방법을 제공한다.


    Ajax 에서는 이러한 DOM을 이용하여 웹 페이지의 일부 요소만을 변경할 수 있다. 

    따라서 Ajax를 배우기 전에 DOM에 대한 기본적인 사항을 알아야만 한다.



    DOM 요소의 선택


    자바스크립트로 DOM 요소를 다루기 위해서는 우선 해당 요소를 선택해야한 한다.

    DOM요소를 선택하는 방법은 다음과 같다.


    1. 태그 이름(tag name)을 이용한 선택
    2. 아이디(id)를 이용한 선택
    3. 클래스(class)를 이용한 선택
    4. CSS 선택자(selector)를 이용한 선택
    5. HTML 객체 집합(object collection)을 이용한 선택

    DOM 요소의 내용 변경


    DOM을 이용하면 DOM 요소의 내용(content)이나 속성값 등을 손쉽게 변경할 수 있다.


    DOM 요소의 내용을 바꾸는 가장 쉬운 방법은 innerHTML 프로퍼티를 이용하는 것이다.

    또한, DOM 요소의 속성 이름을 이용하면 속성값을 바로 변경할 수도 있다.



    노드(node)


    DOM은 노드(node)라고 불리는 계층적 단위에 정보를 저장하고 있다.

    DOM은 이러한 노드들을 정의하고, 그들 사이의 관계를 설명해 주는 역할을 한다.



    노드 트리(node tree)


    문서의 정보는 노드 트리(node tree)라고 불리는 계층적 구조에 저장된다.

    이러한 노드 트리는 노드들의 집합으로, 노드 간의 관계를 보여준다.




    노드 간의 관계


    노드 트리의 모든 노드들은 서로 계층적 관계를 가지고 있다.


    노드 트리의 가장 상위에는 단 하나의 루트 노드(root node)가 존재한다.


    루트 노드를 제외한 모든 노드는 단 하나의 부모 노드(parent node)만을 가진다.

    모든 요소 노드는 자식 노드(child node)를 가질 수 있다.


    형제 노드(sibling node)란 같은 부모 노드를 가지는 모든 노드를 가리킨다.

    조상 노드(ancestor node)란 부모 노드를 포함해 계층적으로 현재 노드보다 상위에 존재하는 모든 노드를 가리킨다.

    자손 노드(descendant node)란 자식 노드를 포함해 계층적으로 현재 노드보다 하위에 존재하는 모든 노드를 가리킨다.



    노드로의 접근


    자바스크립트로 DOM 노드에 접근하는 방법은 다음과 같다.


    1. getElementByTagName( ) 메소드를 이용하는 방법
    2. 노드 간의 관계를 이용하여 접근하는 방법


    노드에 대한 정보


    DOM 노드에 대한 정보는 다음과 같은 속성을 통해 접근할 수 있다.


    1. nodeName : 노드 고유의 이름을 명시함.
    2. nodeValue : 노드의 값을 명시함.
    3. nodeType : 노드 고유의 타입을 명시함.
    노드에 대한 정보와 접근 방법에 대한 더 자세한 사항은 자바스크립트 노드로의 접근 수업에서 확인할 수 있다.


    노드 리스트(node list)


    노드 리스트는 getElementByTagName( ) 메소드나 childNodes 속성의 속성값으로 반환되는 객체이다.

    이 객체는 HTML 문서와 같은 순서로 문서 내의 모든 노드를 리스트 형태로 저장하고 있다.




    DOM API


    Ajax를 이용하여 웹 페이지의 일부분만을 갱신하려면 더욱 다양한 DOM 속성을 활용해야 한다.

    따라서 DOM과 관련된 다양한 API를 이용하여 노드를 동적으로 생성하고, 조작할 수 있어야만 한다.



    노드의 추가


    다음 메소드를 사용하면 특정 위치에 새로운 노드를 추가할 수 있다.


    1. appendChild( ) : 새로운 노드를 해당 노드의 자식 노드 리스트에 맨 마지막 노드로 추가함.
    2. insertBefore( ) : 새로운 노드를 특정 노드 바로 앞에 추가함.
    3. insertData( ) : 텍스트 노드의 텍스트 데이터에 새로운 텍스트를 추가함.
    다음 예제는 appendChild( ) 메소드를 이용하여 노드를 추가하는 자바스크립트 예제이다.

    예제

    function appendNode() {

        var parent = document.getElementById("list");  // 아이디가 "list"인 요소를 선택함.

        var newItem = document.getElementById("item"); // 아이디가 "item"인 요소를 선택함.

        parent.appendChild(newItem);                   // 해당 요소의 맨 마지막 자식 노드로 추가함.

    }


    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
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>JavaScript Node Manage</title>
    </head>
     
    <body>
     
        <h1>appendChild() 메소드</h1>
        <h2 id="item">JavaScript</h2>
        <div id="list">
            <p>HTML</p>
            <p>CSS</p>
            <p>JQuery</p>
        </div>
        <button onclick="appendNode()">노드 추가!</button>
        
        <script>
            function appendNode() {
                var parent = document.getElementById("list");    // 아이디가 "list"인 요소를 선택함.
                var newItem = document.getElementById("item");    // 아이디가 "item"인 요소를 선택함.
                parent.appendChild(newItem);                    // 해당 요소의 맨 마지막 자식 노드로 추가함.
            }
        </script>
        
    </body>
     
    </html>
    		cs


    실행 결과

    appendChild() 메소드

    JavaScript

    HTML

    CSS

    JQuery




    노드의 생성


    생성할 노드의 종류에 따라 다음과 같은 메소드를 사용할 수 있다.


    1. createElement( ) : 새로운 요소 노드를 생성함.
    2. createAttribute( ) : 새로운 속성 노드를 생성함.
    3. createTextNode( ) : 새로운 텍스트 노드를 생성함.
    다음 예제는 createElement( ) 메소드를 이용하여 노드를 생성하는 자바스크립트 예제이다.

    예제

    function createNode() {

        var criteriaNode = document.getElementById("text"); // 기준이 되는 요소로 아이디가 "text"인 요소를 선택함.

        var newNode = document.createElement("p");          // 새로운 <p> 요소를 생성함.

        newNode.innerHTML = "새로운 단락입니다.";

        document.body.insertBefore(newNode, criteriaNode);  // 새로운 요소를 기준이 되는 요소 바로 앞에 추가함.

    }


    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
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>JavaScript Node Manage</title>
    </head>
     
    <body>
     
        <h1>요소 노드의 생성</h1>
        <p id="text">새로운 단락을 생성하여 이 단락 앞에 추가할 것입니다.</p>
        <button onclick="createNode()">요소 노드 생성!</button>
     
        <script>
            function createNode() {
                var criteriaNode = document.getElementById("text");    // 기준이 되는 요소로 아이디가 "text"인 요소를 선택함.
                var newNode = document.createElement("p");            // 새로운 <p> 요소를 생성함.
                newNode.innerHTML = "새로운 단락입니다.";
                document.body.insertBefore(newNode, criteriaNode);    // 새로운 요소를 기준이 되는 요소 바로 앞에 추가함.
            }
        </script>
        
    </body>
     
    </html>
    		cs



    노드의 제거


    다음 메소드를 사용하면 특정 노드를 제거할 수 있다.


    1. removeChild( ) : 기존의 노드 리스트에서 특정 노드를 제거함.
    2. removeAttribute( ) : 속성의 이름을 이용하여 특정 속성 노드를 제거함.

    다음 예제는 removeChild( ) 메소드를 이용하여 노드를 제거하는 자바스크립트 예제이다.


    예제

    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
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>JavaScript Node Manage</title>
    </head>
     
    <body>
     
        <h1>removeChild() 메소드</h1>
        <button onclick="remove()">요소 노드 삭제!</button>
        <div id="list">
            <p>HTML</p>
            <p id="item">CSS</p>
            <p>JavaScript</p>
        </div>
        
        <script>
            function remove() {
                var parent = document.getElementById("list");        // 아이디가 "list"인 요소를 선택함.
                var removedItem = document.getElementById("item");    // 아이디가 "item"인 요소를 선택함.
                parent.removeChild(removedItem);                    // 지정된 요소를 삭제함.
            }
        </script>
        
    </body>
     
    </html>
    		cs


    문법

    removeChild() 메소드

    HTML

    CSS

    JavaScript




    노드의 복제


    cloneNode( ) 메소드를 사용하면 특정 노드를 복제할 수 있다.


    다음 예제는 clondNode( ) 메소드를 이용하여 노드를 복제하는 자바스크립트 예제이다.


    예제

    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
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>JavaScript Node Manage</title>
    </head>
     
    <body>
     
        <h1>cloneNode() 메소드</h1>
        <button onclick="cloneElement()">노드 복제!</button>
        <h2 id="item">JavaScript</h2>
        <div id="list">
            <p>HTML</p>
            <p>CSS</p>
            <p>JQuery</p>
        </div>
            
        <script>
            function cloneElement() {
                var parent = document.getElementById("list");            // 아이디가 "list"인 요소를 선택함.
                var originItem = document.getElementById("item");        // 아이디가 "item"인 요소를 선택함.
                parent.appendChild(originItem.cloneNode(true));            // 해당 노드를 복제하여 리스트의 맨 마지막에 추가함.
            }
        </script>
        
    </body>
     
    </html>
    		cs


    문법

    cloneNode() 메소드

    JavaScript

    HTML

    CSS

    JQuery




    노드의 값 변경


    nodeValue 프로퍼티를 사용하면 특정 노드의 값을 변경할 수 있다

    또한, setAttribute( ) 메소드는 속성 노드의 속성값을 변경할 수 있게 해준다.


    다음 예제는 nodeValue 프로퍼티를 이용하여 노드를 생성하는 자바스크립트 예제이다.


    예제

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>JavaScript Node Handle</title>
    </head>
     
    <body>
     
        <h1>텍스트 노드의 값 변경</h1>
        <p id="text">이 텍스트를 변경하고 싶어요!</p>
        <button onclick="changeText()">텍스트 변경!</button>
     
        <script>
            var para = document.getElementById("text");        // 아이디가 "text"인 요소를 선택함.
            function changeText() {
                para.firstChild.nodeValue = "텍스트 변경 완료!";
            }
        </script>
        
    </body>
     
    </html>
    		cs


    문법

    텍스트 노드의 값 변경

    이 텍스트를 변경하고 싶어요!




    노드의 교체


    replaceChild( ) 메소드를 사용하면 특정 노드 그 자체를 다른 노드로 바꿀 수 있다.


    다음 예제는 replaceChild( ) 메소드를 이용하여 노드를 교체하는 자바스크립트 예제이다.


    예제

    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
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>JavaScript Node Handle</title>
    </head>
     
    <body>
     
        <h1>요소 노드의 교체</h1>
        <div id="parent">
            <p id="first">첫 번째 요소입니다.</p>
            <p>두 번째 요소입니다.</p>
        </div>
        <p id="third">세 번째 요소입니다.</p>
        <button onclick="changeNode()">요소 노드 교체!</button>
     
        <script>
            var parent = document.getElementById("parent");    // 부모 노드를 선택함.
            var first = document.getElementById("first");
            var third = document.getElementById("third");
            function changeNode() {
                parent.replaceChild(third, first);            // first 요소를 삭제하고, 그 대신 third 요소를 삽입함.
            }
        </script>
        
    </body>
     
    </html>
    		cs


    문법

    요소 노드의 교체

    첫 번째 요소입니다.

    두 번째 요소입니다.

    세 번째 요소입니다.






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

    'Language > Ajax' 카테고리의 다른 글

    Ajax와 제이쿼리  (0) 2018.11.15
    Ajax (Ajax 요청/타입별 응답 처리)  (0) 2018.11.15
    Ajax/HTTP 헤더  (0) 2018.11.14
    Ajax/서버와의 통신  (0) 2018.11.13
    Ajax 기초 및 원리  (0) 2018.11.13

    관련글 관련글 더보기

Designed by Tistory.
상단으로

티스토리툴바