Node 객체

DOM tree의 최상단에 위치하는 객체. 모든 DOM 객체들은 Node 객체를 상속 받는다.

-Node의 주요기능

  • 관계 : 엘리먼트는 서로 부모, 자식 혹은 형제 자매 관계로 연결되어 있다. 각각의 Node가 다른 Node와 연결된 정보를 보여주는 API ( Node.childNodes, firstChild, lastChild, nextSibling, previousSibling, contains, hasChildNodes )

  • 노드 종류 : Node는 모든 구성요소를 대표하는 객체이므로 각각의 구성요소가 어떤 카테고리에 속하는지 식별해주는 API ( Node.nodeType, nodeName )

  • 값 : Node 객체의 값 ( Node.nodeValue, textContent )

  • 자식 관리 : 객체의 자식을 추가\/제거하는 방법에 대한 API ( Node.appendChild, removeChild )

-Node 관계 API

<body id="start"> <ul> <li><a href="">html<\/a><\/li> <li><a href="">css<\/a><\/li> <ul> <li><a href="">Javascript<\/a><\/li> <li><a href="">DOM<\/a><\/li> <\/ul> <\/li> <\/ul> <script> var s = document.getElementById('start'); console.log( s.firstChild ); \/\/ #Text var ul = s.firstChild.nextSibling; \/\/ ul

-> body 태그와 ul 태그 사이에 공백 or 줄바꿈이 있기 떄문에 s.firstChild의 결과가 Text 객체가 나오는것이다! (ul태그라고 생각하기 쉬운 케이스)

-Node 종류 API

현재 선택한 노드가 어떤 타입, 태그명이 무엇인지를 판단하는 API (타입 - nodeType, 태그명 - nodeName)

recursive function을 이용해서 부모->자식 노드를 조회할때 노드의 특정 타입, 태그명만을 골라서 원하는 기능을 구현할 수 있음

function traverse(target, callback){ if(target.nodeType === Node.ELEMENT_NODE){ if(target.nodeName === 'A') callback(target); } var c = target.childs; for(var i = 0; i < c.length; i++){ traverse(c[i], callback); } traverse(document.getElementById('start'), function(elem){ console.log(elem) });

-Node 변경 API

  • 노드 추가 API (appendChild, insertBefore)

※ 노드를 추가하기 위해서는 추가할 엘리먼트를 생성해야 하는데 이것은 Node가 아니라 document 객체의 기능이다. (document.createElement, document.createTextNode)

<body> <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); }

-> 'CSS' list 뒤에 Javascript라는 list를 하나 더 추가하고 싶은 것이 목적이다. 이 때, li 태그를 생성하고, Javascript라는 텍스트를 담고 있는 TextNode를 생성하는게 전부가 아니다. 그 둘을 붙여주는 li.appendChild(text)가 있어야한다.

  • 노드 제거 API (removeChild)

※ 삭제 대상의 부모 노드 객체의 메소드를 실행해야 한다

ex, target을 지우고 싶다면..

var target = document.getElementById('target'); target.parentNode.removeChild(target);

-> 삭제하려는 대상도 알아야되고, 삭제하려는 대상의 부모도 알아야되는 불편한 점이 있다.

  • 노드 변경 API (replaceChild)

노드의 내용을 변경하는 API

<li id="target">Javascript<\/li> <script> function callReplaceChild(){ var a = document.createElement('a'); a.setAttribute('href', 'http:\/\/www.naver.com'); a.appendChild(document.createTextNode('Web browser JavaScript');

    var target = document.getElementById\('target'\);
    target.replaceChild\(a, target.firstChild\);
}

<\/script>

-> a 태그 생성. a 태그에 속성 부여, a 태그 내부에 텍스트 노드 생성 후에 appendChild로 붙여줌. 이후 li 태그 객체를 가져온 후에 li 태그의 firstChild, 즉 'Javascript'라는 텍스트노드를 replace 하는 과정

-jQuery Node 변경 API (Manipulation category)

  • 노드 추가 API (before, prepend, append, after)

before : 제어 대상의 형제 노드 형태로 앞에prepend : 제어 대상의 자식 노드 형태로 content 앞에append : 제어 대상의 자식 노드 형태로 content 뒤에after : 제어 대상의 형제 노드 형태로 뒤에노드 제거 API (remove, empty)remove : 제어 대상을 제거하는 것 empty : 제어 대상의 텍스트 노드를 제거하는 것노드 변경 API (replaceWith, replaceAll)

replaceWith : 제어대상을 먼저 지정 ( $('#target2').replaceWith('<div>replaceWith<\/div>'); ) replaceAll : 제어대상이 되는 것을 인자로 전달 ( $('<div>replaceAll<\/div').replaceAll('#target1'); )

-> 둘다 #target1, #target2 엘리먼트에 <div>태그의 내용을 집어 넣는 방법이다.

  • 노드 복사 API

$('#source').clone().replaceAll('#target1'); $('#target2').replaceWith($('#source').clone());

-> source를 복사해서 target1, target2를 대체하는 코드.

  • 노드 이동 API

$('#target1').append($('#source')); append, prepend, before, after 가능

-> source를 target1 엘리먼트 뒤로 이동한다.

-문자열로 노드 제어

innerHTML : 선택한 element 미포함 하위 엘리먼트를 보여줌

var target = document.getElementById('target'); target.innerHTML = "<li>Javascript core<\/li><li>BOM<\/li><li>DOM<\/li>";

outerHTML : 선택한 element 포함 하위 엘리먼트를 보여줌

innerText, outerText : 보여줄 때는 태그 없이, 바꿀 때는 태그 내용 인식 없이 텍스트 그대로 변경

insertAdjacentHTML : 좀 더 정교하게 문자열을 이용해서 노드를 변경하고 싶을 때 사용

<ul id="target"> <li>CSS<\/li> <\/ul> var target = document.getElementById('target'); target.insertAdjacentHTML('beforebegin', '<h1>Client side<\/h1>'); target.insertAdjacentHTML('afterbegin', '<li>HTML<\/li>'); target.insertAdjacentHTML('beforeend', '<li>Javascript<\/li>'); target.insertAdjacentHTML('afterend', '<h1>Server side<\/h1>');

beforebegin : 선택한 엘리먼트가 시작되기 전에 (ul 태그 위에)

afterbegin : 선택한 엘리먼트가 시작된 후에 (ul 태그 바로 다음에, CSS li 태그 위에)

beforeend : 선택한 엘리먼트가 끝나기 전에 (<\/ul> 태그 바로 위에, CSS li 태그 다음에)

afterend : 선택한 엘리먼트가 끝난후에 (<\/ul> 태그 바로 다음에)

results matching ""

    No results matching ""