[javascript]-Node객체( 생성, 삽입, 삭제, 교체 )

자바스크립트 시리즈는 '생활코딩-클라이언트 과목의 '웹브라우저 자바스크립트' 강의'를 참고로
공부하고 기록하기 위한 용도입니다. 

 

* Node 객체 

: HTML 코드의 모든 구성 요소들은 Node 객체의 상속을 받고,

Node 객체는 firstChild,parentNode,nextSibling,previousSibling 과 같은 API 를 갖고 있다.

이러한 property 를 통해, 각 노드를 기준으로 형제, 부모, 자식 같은 관계를 알아낼 수 있다. 

 

• Node.childNodes - 자식노드들을 유사배열에 담아서 리턴 
• Node.firstChild - 첫번째 자식 노드 ( 두 태그 사이에 줄바꿈 이나 여백도 child 로 포함된다. )
• Node.lastChild - 마지막 자식 노드 
• Node.nextSiblink - 다음 형제 노드
• Node.previousSibling - 이전 형제 노드 

 

* nodeType 과 nodeName 

- nodeType : node 의 타입 

- nodeName : node 의 이름 , 태그명

s.nodeType
>> 1
s.nodeName
>> "BODY"
s.firstChild.nodeName
>> "#text"
s.firstChild.nextSibling.nodeType
>> 1
s.firstChild.nextSibling.nodeName;
>> "UL"

* HTML 요소 추가 

- createElement() : () 안의 속성을 가진 element 를 생성한다. 

var Btn = document.createElement('button'); // <button></button> 요소 생성 

var mine = document.createElement('a'); //<a></a> 태그 생성해서 mine 객체에 저장

- createTextNode(): () 안의 text를 생성한다. 

 

* 노드 변경 API

- appendChild(child) : 생성한 노드를 원하는 객체의 자식으로 붙일 수 있다. 

- insertBefore(newElement, referenceElement) : newElement 객체를 referenceElement 객체 앞에 삽입 

   <ul id='target'>
      <li>html</li>
      <li >css</li>
      <li id='tar'>jsp</li>
    </ul>

  <input type="button" onclick="callAppendChild();" value="appendChild()" />
  <input type="button" onclick="callInsertBefore();" value="insertBefore()" />
  <input type="button" onclick="callRemoveChild();" value="removeChild()" />
  <input type="button" onclick="callReplaceChild();" value="replaceChild()" />

---

- 노드 추가하기 

function callAppendChild(){
  var t = document.getElementById('target');
  var li = document.createElement('li'); //document의 creatElement 객체
  var text = document.createTextNode('javascript');
  li.appendChild(text);
  t.appendChild(li); //target 객체인 t의 child로 붙이기
}

-노드 추가 : 중간이나 정한 위치에 

function callInsertBefore(){
  var t = document.getElementById('target');
  var li = document.createElement('li'); //document의 creatElement 객체
  var text = document.createTextNode('jQuery');
  li.appendChild(text);
 t.insertBefore(li, t.firstChild);
 //**t에 insert하는데, li를 firstChild 전에
 //firstChild 는 ul과 li 사이 줄바꿈
}

-노드 삭제 

function callRemoveChild(){
  var tar = document.getElementById('tar');
  tar.parentNode.removeChild(tar); //삭제할 객체의 부모의 자식 삭제
}

-노드 바꾸기(replace)

function callReplaceChild(){
  //대체할 노드 먼저 생성
  var a = document.createElement('a');
  a.setAttribute('href', 'www.naver.com');
  a.appendChild(document.createTextNode('replacething'));
 var tar = document.getElementById('tar');
 tar.replaceChild(a, tar.firstChild); //tar의 첫번째child 를 a 로 replace 

}