..

Search

48) 노드의 관리

48) 노드의 관리

노드의 관리


노드의 추가

다음 메소드를 사용하면 특정 위치에 새로운 노드를 추가할 수 있습니다.

 

1. appendChild()

2. insertBefore()

3. insertData()


appendChild() 메소드

appendChild() 메소드는 새로운 노드를 해당 노드의 자식 노드 리스트(child node list)의 맨 마지막에 추가합니다.

예제

function appendNode() {

    var parent = document.getElementById("list");  // 아이디가 "list"인 요소를 선택함.

    var newItem = document.getElementById("item"); // 아이디가 "item"인 요소를 선택함.

    parent.appendChild(newItem);                   // 해당 요소의 맨 마지막 자식 노드로 추가함.

}

코딩연습 ▶


insertBefore() 메소드

insertBefore() 메소드는 새로운 노드를 특정 자식 노드 바로 앞에 추가합니다.

 

insertBefore() 메소드의 원형은 다음과 같습니다.

원형

부모노드.insertBefore(새로운자식노드, 기준자식노드);

 

1. 새로운 자식 노드 : 자식 노드 리스트(child node list)에 새롭게 추가할 자식 노드를 전달합니다.

2. 기준 자식 노드 : 새로운 노드를 삽입할 때 기준이 되는 노드로, 이 노드 바로 앞에 새로운 노드가 추가됩니다.

 

예제

function appendNode() {

    var parent = document.getElementById("list");           // 아이디가 "list"인 요소를 선택함.

    var criteriaItem = document.getElementById("criteria"); // 아이디가 "criteria"인 요소를 선택함.

    var newItem = document.getElementById("item");          // 아이디가 "item"인 요소를 선택함.

    parent.insertBefore(newItem, criteriaItem); // 해당 노드를 기준이 되는 자식 노드의 바로 앞에 추가함.

}

코딩연습 ▶

 

기준 자식 노드에 null 값을 전달하면 새로운 노드는 자식 노드 리스트의 맨 마지막 노드로 추가됩니다.

즉, appendChild() 메소드와 완전히 같은 동작을 하게 됩니다.


insertData() 메소드

insertData() 메소드는 텍스트 노드의 텍스트 데이터에 새로운 텍스트를 추가합니다.

 

insertData() 메소드의 원형은 다음과 같습니다.

원형

텍스트노드.insertData(오프셋, 새로운데이터);

 

1. 오프셋(offset) : 오프셋 값은 0부터 시작하며, 기존 텍스트 데이터의 몇 번째 위치부터 추가할지를 전달합니다.

2. 새로운 데이터 : 새로이 삽입할 텍스트 데이터를 전달합니다.

 

예제

var text = document.getElementById("text").firstChild// 아이디가 "text"인 요소의 텍스트 노드를 선택함.

function appendText() {

    text.insertData(6, " 나른한 "); // 텍스트 노드의 6번째 문자부터 " 나른한 "이란 텍스트를 추가함.

}

코딩연습 ▶


노드의 생성

생성할 노드의 종류에 따라 다음과 같은 메소드를 사용할 수 있습니다.

 

1. createElement()

2. createAttribute()

3. createTextNode()


요소 노드의 생성

createElement() 메소드를 사용하여 새로운 요소 노드를 만들 수 있습니다.

예제

function createNode() {

    var criteriaNode = document.getElementById("text"); // 기준이 되는 요소로 아이디가 "text"인 요소를 선택함.

    var newNode = document.createElement("p");          // 새로운 <p> 요소를 생성함.

    newNode.innerHTML = "새로운 단락입니다.";

    document.body.insertBefore(newNode, criteriaNode);  // 새로운 요소를 기준이 되는 요소 바로 앞에 추가함.

}

코딩연습 ▶


속성 노드의 생성

createAttribute() 메소드를 사용하여 새로운 속성 노드를 만들 수 있습니다.

 

만약 같은 이름의 속성 노드가 이미 존재하면, 기존의 속성 노드는 새로운 속성 노드로 대체됩니다.

이미 존재하는 요소 노드에 속성 노드를 생성하고자 할 때에는 setAttribute() 메소드를 사용할 수 있습니다.

예제

function createNode() {

    var text = document.getElementById("text");           // 아이디가 "text"인 요소를 선택함.

    var newAttribute = document.createAttribute("style"); // 새로운 style 속성 노드를 생성함.

    newAttribute.value = "color:red";

    text.setAttributeNode(newAttribute);                  // 해당 요소의 속성 노드로 추가함.

}

코딩연습 ▶


텍스트 노드의 생성

createTextNode() 메소드를 사용하여 새로운 텍스트 노드를 만들 수 있습니다.

예제

function createNode() {

    var elementNode = document.getElementById("text");           // 아이디가 "text"인 요소를 선택함.

    var newText = document.createTextNode("새로운 텍스트에요!"); // 새로운 텍스트 노드를 생성함.

    elementNode.appendChild(newText);                            // 해당 요소의 자식 노드로 추가함.

}

코딩연습 ▶


노드의 제거

다음 메소드를 사용하면 특정 노드를 제거할 수 있습니다.

 

1. removeChild()

2. removeAttribute()


removeChild() 메소드

removeChild() 메소드는 자식 노드 리스트에서 특정 자식 노드를 제거합니다.

 

이 메소드는 성공적으로 노드가 제거되면 제거된 노드를 반환합니다.

노드가 제거될 때에는 제거되는 노드의 모든 자식 노드들도 다 같이 제거됩니다.

예제

var parent = document.getElementById("list");      // 아이디가 "list"인 요소를 선택함.

var removedItem = document.getElementById("item"); // 아이디가 "item"인 요소를 선택함.

parent.removeChild(removedItem);                   // 지정된 요소를 삭제함.

코딩연습 ▶


removeAttribute() 메소드

removeAttribute() 메소드는 속성의 이름을 이용하여 특정 속성 노드를 제거합니다.

예제

 

var text = document.getElementById("text"); // 아이디가 "text"인 요소를 선택함.

text.removeAttribute("style");              // 해당 요소의 "style" 속성을 제거함.

 

코딩연습 ▶


노드의 복제

cloneNode() 메소드를 사용하면 특정 노드를 복제할 수 있습니다.


cloneNode() 메소드

cloneNode() 메소드는 기존의 존재하는 노드와 똑같은 새로운 노드를 생성하여 반환합니다.

 

cloneNode() 메소드의 원형은 다음과 같습니다.

원형

복제할노드.cloneNode(자식노드복제여부);

 

- 자식 노드 복제 여부 : 전달된 값이 true이면 복제되는 노드의 모든 속성 노드와 자식 노드도 같이 복제하며, false이면 속성 노드만 복제하고 자식 노드는 복제하지 않습니다.

 

예제

function cloneElement() {

    var parent = document.getElementById("list");     // 아이디가 "list"인 요소를 선택함.

    var originItem = document.getElementById("item"); // 아이디가 "item"인 요소를 선택함.

    parent.appendChild(originItem.cloneNode(true));   // 해당 노드를 복제하여 리스트의 맨 마지막에 추가함.

}

코딩연습 ▶


연습문제