[JavaScript] 노드 리스트

 

노드 리스트(node list)는 getElementsByTagName() 메소드나 childNodes 프로퍼티의 값으로 반환되는 객체입니다. 이 객체는 HTML 문서와 같은 순서로 문서 내의 모든 노드를 리스트 형태로 저장하고 있습니다.

리스트의 각 노드는 0부터 시작하는 인덱스를 이용하여 접근할 수 있습니다. 다음 예제는 인덱스를 활용해 접근하는 방법을 보여주고 있습니다.

var listItems = document.getElementById('list').childNodes;

listItems[1].firstChild.nodeValue = 'HTML 요소의 내용을 변경했습니다';

위 예제에서 자식 노드 중 첫 번째 <li> 요소를 선택할 때 인덱스를 0이 아닌 1을 사용하고 있습니다. 그 이유는 HTML DOM에서 각 요소 노드 다음에는 별도의 텍스트 노드가 존재하기 때문에 이를 항상 염두하고 있어야합니다. 이러한 별도의 텍스트 노드를 확인하고 싶다면 다음 예제처럼 확인할 수 있습니다.

var listItems = document.getElementById('list').childNodes;

console.log(listItems[0].nodeValues);

노드 리스트 객체는 리스트에 노드를 추가하거나 삭제되면 자신의 상태 정보를 스스로 갱신합니다. 따라서 이 노드 리스트에 저장된 노드들의 개수를 알고싶다면 다음 예제처럼 확인할 수 있습니다.

var listItems = document.getElementsByTagName('li')

console.log(listItems.length);

노드를 추가하는 방법은 매우 간결합니다.

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

function appendNode(){
	var parent = document.getElementById('list')
    var newItem = document.getElementById('item')
    parent.appendChild(newItem);
}

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

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

function appendNode(){
	var parent = document.getElementById('list')
    var item = document.getElementById('item')
    var title = document.getElementById('title')
	parent.insertBefore(title,item);
}

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

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

var text = document.getElementById('text').firstChild

function appendText(){
	text.insertData(6,'hello');
}

기존의 노드에 새로운 노드를 추가하는 것이 아닌 새로운 요소의 노드도 만들 수 있습니다.

• createElement() : 새로운 요소 노드를 만들 수 있습니다.

function createNode(){
	var thisNode = document.getElmentById('text');
    var newNode = document.createElement('p')
    newNode.innerHTML = '새로운 단락입니다'
    document.body.insertBefore(newNode,thisNode)
}

• createAttribute() : 새로운 속성 노드를 만들 수 있습니다. 만약 같은 이름의 속성 노드가 이미 존재하면 기존의 속성 노드는 새로운 속성 노드로 대체됩니다. 이미 존재하는 요소 노드에 속성 노드를 생성하고자 할 때에는 setAttribute() 메소드를 사용할 수 있습니다.

function createNode(){
	
    var text = document.getElementById('text')
    var newAttribute = document.createAttribute('style')
    newAttribute.value = 'color : black'
    text.setAttributeNode(newAttribute)
}

• createTextNode() : 새로운 텍스트 노드를 만들 수 있습니다.

function createNode(){
	
    var elementNode = document.getElementById('text')
    var newText = document.createTextNode('새로운 텍스트입니다.')
    elementNode.appendChild(newText)
}

 

불필요한 특정 노드를 제거할 수 있습니다.

• removeChild() : 자식 노드 리스트에서 특정 자식 노드를 제거합니다. removeChild()는 성공적으로 노드가 제거되면 제거된 노드를 반환하며 제거될 때에는 제거되는 노드의 모든 자식 노드들도 다 같이 제거됩니다.

var parent = document.getElementById('list')
var removedItem = document.getElementById('item')
parent.removeChild(removedItem)

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

var text = document.getElementById('text')
text.removeAttribute('style')

기존 노드를 복사해야한다면 cloneNode() 메소드를 사용할 수 있습니다. cloneNode() 메소드는 기존의 존재하는 노드와 똑같은 새로운 노드를 생성하여 반환합니다.

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

function cloneElement(){
	var parent = document.getElementById('list')
    var originItem = document.getElementById('item')
    parent.appendChild(originItem.cloneNode(true))
}

 

텍스트 노드의 값 변경

var para = document.getElementById('tetx')
function changeText(){
	para.firstChild.nodeValue = '변경'
}

속성 노드의 값 변경

var para;
function changeAttribute(){
	document.getElementByTagName('p')[0].setAttribute('class','para')
}

요소 노드의 교체

교체할노드 = 부모노드.replaceChild(새로운자식노드, 기존자식노드)