JavaScript - NODE 객체 :: 아빠개발자의 노트

JavaScript - NODE 객체

2019. 2. 27. 09:48

모든 엘리먼트들의 거희 조상이다.

여러가지 형태의 HTML코드를 객체화 시킨게 DOM 이다.

NODE 관계

엘리먼트는 서로 부모,자식,혹은형제자매 관계로 연결되어 있다.

각각의 Node가 다른 Node와 연결된 정보를 보여주는 API를 통해서 문서를 프로그래밍적으로 탐색할 수 있다.

Node.childNodes

Node.firstChild <-- node 객체의 첫번째 node

Node.lastChild

Node.nextSibling

Node.previousSibling

Node.contains()

Node.hasChildNodes()

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <script src="http://code.jquery.com/jquery.min.js"></script>
</head>
<body id = "body">
    <ol>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
    </ol>
    <ul>
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
    </ul>
    <script>
        var body = $('body') // var body = document.ElementById('body'); 와 같다
        body[0].firstChild // #text body 태그 다음 자식의 첫번째 노드를 출력하는 api다
            //결과가 text인 이유는 body 태그다음 줄바꿈 문자가 있어서 그렇다
        body[0].firstChild.nextSibling 
            // nextSibling 는 같은 노드의 다음 형제 자매를 부른다 같은 레벨에 있는 node들
        body[0].firstChild.previousSibling
            // previousSibling 는 같은 레벨의 노드중 이전 노드를 부른다
        body[0].firstChild.parentNode
            // parentNode는 부모의 노드를 부른다
        body[0].childNodes
            //자식 노드들을 유사배열로 담아서 호출
    </script>
</body>
</html>

노드의 종류

Node 객체는 모든 구성요소를 대표하는 객체이기 때문에 각각의 구성요소가 어떤 카테고리에 속하는 것인지를 알려주는 식별자를 제공한다.

Node.nodeType //node의 타입을 의미한다 node의 종류에따라서 정해진 상수가 존재한다

for (name in Node){  //각 노드들의 정해진 상수
console.log(name,Node[name]);
}
///////출력결과///////////
VM684:2 ELEMENT_NODE 1
VM684:2 ATTRIBUTE_NODE 2
VM684:2 TEXT_NODE 3
VM684:2 CDATA_SECTION_NODE 4
VM684:2 ENTITY_REFERENCE_NODE 5
VM684:2 ENTITY_NODE 6
VM684:2 PROCESSING_INSTRUCTION_NODE 7
VM684:2 COMMENT_NODE 8
VM684:2 DOCUMENT_NODE 9
VM684:2 DOCUMENT_TYPE_NODE 10
VM684:2 DOCUMENT_FRAGMENT_NODE 11
VM684:2 NOTATION_NODE 12
VM684:2 DOCUMENT_POSITION_DISCONNECTED 1
VM684:2 DOCUMENT_POSITION_PRECEDING 2
VM684:2 DOCUMENT_POSITION_FOLLOWING 4
VM684:2 DOCUMENT_POSITION_CONTAINS 8
VM684:2 DOCUMENT_POSITION_CONTAINED_BY 16
VM684:2 DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC 32

이상수를 body.firstChild.nodeType === Node.TextNODE // true 이런식으로 노드객체가 뭔지 확인가능

Node.nodeName

body[0].firstChild.nextSibling.nodeName

// UL 이렇게 BODY 태그의 첫번째자식의 다음번쨰 노드의 이름을 출력한다 (엘리먼트객체의이름)

값

Node 객체의 값을 제공하는 API

Node.nodeValue

Node.textContent

NODE 추가,변경,삭제 (자식관리)

Node 객체의 자식을 추가하는 방법에 대한 API

Node.appendChild() <-- 인수에 맨뒤에 노드 추가

Node.removeChild() <-- 인수에 노드 제거

Node.replaceChild()

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <!-- <script src="http://code.jquery.com/jquery.min.js"></script> -->
</head>
<body id = "body">
    <ol id="ol">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li id='li4'><a href="#">4</a></li>
    </ol>
    <ul>
        <li id = 'target'>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
    </ul>
    <script>
        var body = document.getElementById('body') 
        var ol = document.getElementById('ol');
        var li4 = document.getElementById('li4');
        var li = document.createElement('li'); // li 변수에 li엘리먼트를 담음
        var text = document.createTextNode('text입니다'); // text 변수에 text노드를 담음
        li.appendChild(text); //li 엘리먼트에 text 노드 추가
        ol.appendChild(li); // ol엘리먼트에  맨 뒷부분에 li 추가

        body.insertBefore(li,body.firstChild); // body의 첫번째 자식 앞에 li 를 추가
        li4.parentNode.removeChild(li4); 
        // li4를 제거하기위해서 부모노드로 갔다가 제거 노드 이름을 줘야하는 불편함이있다
        
        var target = document.getElementById('target'); //id 가 target 인걸 담는다
        var a = document.createElement('a'); // a태그 엘리먼트를 만든다
        a.setAttribute('href','http://naver.com/'); // a태그의 속성으로 href를 추가한다
        a.appendChild(document.createTextNode('네이버')); 
         //a태그의 첫번째 자식으로 텍스트를 추가한다
        target.replaceChild(a,target.firstChild); 
        // target의 첫번째 자식을(텍스트노드: A) a태그로 바꾼다 
        
    </script>
</body>
</html>

    <script>
        function traverse(target , callback){

            if(target.nodeType === Node.ELEMENT_NODE) { //노드의 타입이 엘리먼트노드만
            callback(target); // 아래의 익명함수 인자 elem 을 target 로 넣는다
            var c = target.childNodes; // body 태그의 자식노드들을 유사배열로 만든다
            for (var i=0; i<c.length;i++){  // 유사배열의 자식노드들을 차례대로 콘솔출력
                traverse(c[i],callback);
            }
        }
    }
        traverse(document.getElementById('body'),function(elem){ 
            console.log(elem)
            })
    </script>

위에 써논 기술들의 총집합 요약 소스라고해야하나? 하튼 그렇다..

'프로그래밍 > JavaScript' 카테고리의 다른 글

자바스크립트 - 제어대상 찾기 (dom요소 찾기) (0)	2019.02.27
JavaScript - .map , ELEMENT (0)	2019.02.27
javascript - let,var,const 차이 (0)	2019.02.27
javascript - DOM 선택 STYLE 바꾸기 (0)	2019.02.27
javascript - 바닐라자바스크립트 예제(nomad by nicollas) (0)	2019.02.27

아빠개발자의 노트

JavaScript - NODE 객체

'프로그래밍 > JavaScript' 카테고리의 다른 글

+ Recent posts

티스토리툴바