Languages/Java Script

[Js] 노드 종류 API | 노드 변경 API | jQuery 노드 변경 API

모든 포스팅은 인프런 [생활코딩] 자바스크립트 강의의 내용을 담고 있으며

출처는 아래의 주소로 "egoing Lee"님의 자료입니다.

상업적인 의도가 아닌 공부한 것을 정리해놓는 목적으로 포스팅 한 것입니다.

www.inflearn.com/course/javascript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%95%EC%A2%8C#

웹브라우저 Javascript (자바스크립트) - 인프런

생활코딩 자바스크립트 강좌 입니다. 웹브라우저를 직접 제어할 수 있는 자바스크립트 레퍼런스를 공부해 봅니다. 초급 웹 개발 프로그래밍 언어 JavaScript 온라인 강의 자바스크립트 강좌

www.inflearn.com

이번 포스팅은 강의의 "Node객체" 중 노드 종류 API 강의와 노드 변경 API강의, 그리고 jQuery 노드 변경 API강의를 모두 포함하여 작성하였습니다.

노드 종류 API

노드 작업을 하게 되면 현재 선택된 노드가 어떤 타입인지를 판단해야 하는 경우가 있다.

이런 경우에 사용할 수 있는 API가 nodeType, nodeName이다.

Node.nodeType
node의 타입을 의미한다.
Node.nodeName
node의 이름 (태그명을 의미한다.)

Node Type

노드의 종류에 따라서 정해진 상수가 존재한다. 아래는 모든 노드의 종류와 종류에 따른 값을 출력하는 예제다.

for(var name in Node){
   console.log(name, Node[name]);
}

결과

ELEMENT_NODE 1 
ATTRIBUTE_NODE 2 
TEXT_NODE 3 
CDATA_SECTION_NODE 4 
ENTITY_REFERENCE_NODE 5 
ENTITY_NODE 6 
PROCESSING_INSTRUCTION_NODE 7 
COMMENT_NODE 8 
DOCUMENT_NODE 9 
DOCUMENT_TYPE_NODE 10 
DOCUMENT_FRAGMENT_NODE 11 
NOTATION_NODE 12 
DOCUMENT_POSITION_DISCONNECTED 1 
DOCUMENT_POSITION_PRECEDING 2 
DOCUMENT_POSITION_FOLLOWING 4 
DOCUMENT_POSITION_CONTAINS 8 
DOCUMENT_POSITION_CONTAINED_BY 16 
DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC 32

몇가지 예를 들어서 실행시켜 보면 노드타입을 알 수 있다.

각각의 노드 타입은 숫자를 다 외우기가 힘들 것을 고려하여 문자(변수)로 전부 제공된다.

즉, 노드타입은 해당되는 노드가 엘리먼트 인지 또는 속성인지 코멘트인지 텍스트 인지.. 등의 정보를 알려주는 것이고,

노드 네임은 조금더 디테일 한 정보 ex: 태그의 이름 등을 알려주는 프로퍼티이다.

아래 예제는 노드 종류 API를 이용해서 노드를 처리하는 예제다.

함수가 자기 자신을 호출하는 것을 재귀함수라고 하는데 본 예제는 재귀 함수의 예를 보여준다.

<!DOCTYPE html>
<html>
<body id="start">
<ul>
    <li><a href="./532">html</a></li> 
    <li><a href="./533">css</a></li>
    <li><a href="./534">JavaScript</a>
        <ul>
            <li><a href="./535">JavaScript Core</a></li>
            <li><a href="./536">DOM</a></li>
            <li><a href="./537">BOM</a></li>
        </ul>
    </li>
</ul>
<script>
function traverse(target, callback){
    if(target.nodeType === 1){
        //if(target.nodeName === 'A')
        callback(target);
        var c = target.childNodes;
        for(var i=0; i<c.length; i++){
            traverse(c[i], callback);       
        }   
    }
}
traverse(document.getElementById('start'), function(elem){//두번째로 호출 하는 함수 = "익명 함수"
    console.log(elem);
});
</script>
</body>
</html>

위와 같은 코드를 짜려면 함수 구성을 이해해야 한다. traverse함수가 내부적으로 어떻게 동작하였는지를 살펴보도록 하자. 아래 영상을 참고하길 바란다.

www.youtube.com/watch?v=RcDsVD_O8dQ&feature=youtu.be

노드 변경 API

노드를 추가, 제거, 변경하는 방법을 알아보자.

노드 추가

노드의 추가와 관련된 API들은 아래와 같다.

appendChild(child)
노드의 마지막 자식으로 주어진 엘리먼트 추가
insertBefore(newElement, referenceElement)
appendChild와 동작방법은 같으나 두번째 인자로 엘리먼트를 전달 했을 때 이것 앞에 엘리먼트가 추가된다.

노드를 추가하기 위해서는 추가할 엘리먼트를 생성해야 하는데 이것은 document 객체의 기능이다. 아래 API는 노드를 생성하는 API이다.

document.createElement(tagname)
엘리먼트 노드를 추가한다.
document.createTextNode(data)
텍스트 노드를 추가한다.

<ul id="target">
    <li>HTML</li>
    <li>CSS</li>
</ul>
<input type="button" onclick="callAppendChild();" value="appendChild()" />
<input type="button" onclick="callInsertBefore();" value="insertBefore()" />
<script>
    function callAppendChild(){//제일 끝에 노드 추가하기
        var target = document.getElementById('target');
        var li = document.createElement('li');
        var text = document.createTextNode('JavaScript');
        li.appendChild(text);//합쳐줘야함 
        target.appendChild(li);
    }
 
    function callInsertBefore(){//가장 앞에 노드 추가하기
        var target = document.getElementById('target');
        var li = document.createElement('li');
        var text = document.createTextNode('jQuery');
        li.appendChild(text);
        target.insertBefore(li, target.firstChild);//insertBefore : 앞에 추가
    }
</script>

노드 제거

노드 제거를 위해서는 아래 API를 사용한다. 이 때 메소드는 삭제 대상의 부모 노드 객체의 것을 실행해야 한다는 점에 유의하자.

removeChild(child)

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li id="target">JavaScript</li>
</ul>
<input type="button" onclick="callRemoveChild();" value="removeChild()" />
<script>
    function callRemoveChild(){
        var target = document.getElementById('target');
        target.parentNode.removeChild(target);
    }
</script>

노드 바꾸기

노드 바꾸기에는 아래 API가 사용된다.

replaceChild(newChild, oldChild)

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li id="target">JavaScript</li>
</ul>
<input type="button" onclick="callReplaceChild();" value="replaceChild()" />
<script>
    function callReplaceChild(){
        var a = document.createElement('a');
        a.setAttribute('href', 'http://opentutorials.org/module/904/6701');
        a.appendChild(document.createTextNode('Web browser JavaScript'));
 
        var target = document.getElementById('target');
        target.replaceChild(a,target.firstChild);
    }
</script>

모두 합쳐본다면 아래와 같다.

<ul id="target">
    <li>HTML</li>
    <li>CSS</li>
    <li id = "tata">JavaScript</li>
</ul>
<input type="button" onclick="callAppendChild();" value="appendChild" />
<input type="button" onclick="callInsertBefore();" value="insertBefore" />
<input type="button" onclick="callRemoveChild();" value="remove" />

<input type = "button" onclick ="callReplaceChild();" value="change"/>

<script>
    function callAppendChild(){
        var target = document.getElementById('target');
        var li = document.createElement('li');
        var text = document.createTextNode('JavaScript');
        li.appendChild(text);
        target.appendChild(li);
    }
 
    function callInsertBefore(){
        var target = document.getElementById('target');
        var li = document.createElement('li');
        var text = document.createTextNode('jQuery');
        li.appendChild(text);
        target.insertBefore(li, target.firstChild);
    }
    function callRemoveChild(){
        var tata = document.getElementById('tata');
        tata.parentNode.removeChild(tata);
    }

    function callReplaceChild(){
        var a = document.createElement('a');
        a.setAttribute('href','https://lucete1230-cyberpolice.tistory.com/manage/posts/');
        a.appendChild(document.createTextNode('my blog~~'));

        var tata = document.getElementById('tata');
        tata.replaceChild(a,tata.firstChild);


    }
</script>

결과

jQuery 노드 변경 API

jQuery를 이용해서 노드를 제어하는 방법을 알아보자. jQuery에서 노드를 제어하는 기능은 주로 Manipulation 카테고리에 속해 있다.

http://api.jquery.com/category/manipulation/

Manipulation | jQuery API Documentation

Adds the specified class(es) to each element in the set of matched elements. Insert content, specified by the parameter, after each element in the set of matched elements. Insert content, specified by the parameter, to the end of each element in the set of

api.jquery.com

추가

추가와 관련된 주요한 메소드는 4가지다. 각각의 관계를 그림으로 나타내면 아래와 같다.

아래 코드는 위의 API를 이용해서 문서의 구조를 변경한 예이다. (실행)

<div class="target">
    content1
</div>
 
<div class="target">
    content2
</div>
 
<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
<script>
    $('.target').before('<div>before</div>');
    $('.target').after('<div>after</div>');
    $('.target').prepend('<div>prepend</div>');
    $('.target').append('<div>append</div>');
</script>

각 메소드가 어디에 위치되는지 확인해보자.

www.youtube.com/watch?v=sONnwMyHNQQ&feature=youtu.be

제거

제거와 관련된 API는 remove와 empty가 있다. remove는 선택된 엘리먼트를 제거하는 것이고 empty는 선택된 엘리먼트의 텍스트 노드를 제거하는 것이다. (실행)

<div class="target" id="target1">
    target 1
</div>
 
<div class="target" id="target2">
    target 2
</div>
 
<input type="button" value="remove target 1" id="btn1" />
<input type="button" value="empty target 2" id="btn2" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
    $('#btn1').click(function(){
        $('#target1').remove();
    })
    $('#btn2').click(function(){
        $('#target2').empty();
    })
</script>

바꾸기

replaceAll과 replaceWith는 모두 노드의 내용을 교체하는 API이다. replaceWith가 제어 대상을 먼저 지정하는 것에 반해서 replaceAll은 제어 대상을 인자로 전달한다. (실행)

<div class="target" id="target1">
    target 1
</div>
 
<div class="target" id="target2">
    target 2
</div>
 
<input type="button" value="replaceAll target 1" id="btn1" />
<input type="button" value="replaceWith target 2" id="btn2" />
<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
  
<script>
    $('#btn1').click(function(){
        $('<div>replaceAll</div>').replaceAll('#target1');
    })
    $('#btn2').click(function(){
        $('#target2').replaceWith('<div>replaceWith</div>');
    })
</script>

복사

노드를 복사하는 방법을 알아보자. (실행)

<div class="target" id="target1">
    target 1
</div>
 
<div class="target" id="target2">
    target 2
</div>
 
<div id="source">source</div>
 
<input type="button" value="clone replaceAll target 1" id="btn1" />
<input type="button" value="clone replaceWith target 2" id="btn2" />
<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
<script>
    $('#btn1').click(function(){
        $('#source').clone().replaceAll('#target1');
    })
    $('#btn2').click(function(){
        $('#target2').replaceWith($('#source').clone());
    })
</script>

이동

dom manipulation API의 인자로 특정 노드를 선택하면 이동의 효과가 난다. (실행)

<div class="target" id="target1">
    target 1
</div>
 
<div id="source">source</div>
 
<input type="button" value="append source to target 1" id="btn1" />
<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
<script>

<script>
    $('#btn1').click(function(){
        $('#target1').append($('#source'));
    })
</script>

'Languages > Java Script' 카테고리의 다른 글

[Js ] Document 객체 (0)	2021.02.10
[Js] 문자열로 노드 제어 (0)	2021.02.10
[Js] Node 객체 \| Node 관계 API (0)	2021.02.10
[Js] jQuery 속성 제어 API \| jQuery 조회 범위 제한 \| javascript (0)	2021.02.10

Contents

새소식

인기 검색어