javascript-Node객체란

Node 객체- 모든 DOM객체는 Node 객체를 상속 받는다. 

관계 API- 엘리먼트는 서로 부모, 자식, 혹은 형제자매 관계로 연결되어 있다. 각각의 Node가 다른 Node와 연결된 정보를 보여주는 API를 통해서 문서를 프로그래밍적으로 탐색할 수 있다.

Node.childNodes

Node.firstChild

Node.lastChild

Node.nextSibling

Node.previousSibling

Node.contains()

Node.hasChildNodes()

노드의 종류

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

Node.nodeType -노드의 종류에 따라서 정해진 상수가 존재한다.

for(var name in Node){

    console.log(name, Node[name]);

}

Node.nodeName

body.nodeName   -> "BODY"

재귀함수-어떠한 함수가 실행 될때 자기자신을 호출하는것

값 API - Node 객체의 값을 제공하는 API

Node.nodeValue

Node.textContent

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

Node.appendChild() -노드의 마지막 자식으로 주어진 엘리먼트 추가

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

<ul id="target">

   <li>html</li>

   <li>css</li>

</ul>

<input type="button" onclick="callAppendChild();" value="appendChild()"/>

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

<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('j Query');

     li.appendChild(text);

    target.insertBefore(li, target.firstChild);

}

</script>

Node.removeChild() -노드 제거

<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>

jQuery 노드 변경 API -jQuery에서 노드를 제어하는 기능은 주로 Manipulation 카테고리에 속해 있다.

추가.

<div class ="target">

    content1

</div>

금요일 오전 10시

<div class="target">

  content2

</div>

  

<script>

$('.target').before('<div>before</div>'); 모든 div태그 앞

$('.target').after('<div>after</div>');  모든 div태그 뒤

$('.target').prepend('<div>prepend</div>'); -값 전에 추가

$('.target').append('<div>append</div>'); -값 뒤에 추가

</scirpt> 

제거.

<div class ="target1">

    content 1

</div>

<div class="target2">

  content 2

</div>

<input type="button" value="remove target 1" id="btn1"/>

<input type="button" value="empty target 2" id="btn2"/>

<script>

 $('#btn1').click(function(){

    $('#target1').remove();

})

$('#btn2').click(function(){

$('#target2').empty();

})

</script>