노드의 조작
노드의 값 변경
nodeValue 프로퍼티를 사용하면 특정 노드의 값을 변경할 수 있습니다.
또한, setAttribute() 메소드는 속성 노드의 속성값을 변경할 수 있게 해줍니다.
요소 노드의 텍스트
요소 노드는 자신이 직접 텍스트값을 가지지는 않습니다.
요소 노드의 텍스트는 요소 노드의 자식 노드인 텍스트 노드(text node)에 저장됩니다.
따라서 요소 노드의 텍스트 값을 확인하거나 변경하고자 할 때는 요소 노드에 포함된 텍스트 노드에 접근해야 합니다.
텍스트 노드의 값 변경
nodeValue 프로퍼티를 사용하여 텍스트 노드의 값을 변경할 수 있습니다.
예제
var para = document.getElementById("text"); // 아이디가 "text"인 요소를 선택함.
function changeText() {
para.firstChild.nodeValue = "텍스트 변경 완료!";
}
속성 노드의 값 변경
속성 노드는 nodeValue 프로퍼티뿐만 아니라 setAttribute() 메소드를 사용하여 값을 변경할 수 있습니다.
setAttribute() 메소드는 속성값을 변경하려는 속성이 존재하지 않으면, 먼저 해당 속성을 생성한 후에 속성값을 설정합니다.
예제
var para;
function changeAttribute() {
// 모든 <p> 요소중에서 첫 번째 요소에 클래스 속성값으로 "para"를 설정함.
document.getElementsByTagName("p")[0].setAttribute("class", "para");
// 클래스가 설정되면 해당 클래스에 설정되어 있던 스타일이 자동으로 적용됨.
}
요소 노드의 교체
replaceChild() 메소드를 사용하면 기존의 요소 노드를 새로운 요소 노드로 교체할 수 있습니다.
replaceChild() 메소드의 원형은 다음과 같습니다.
원형
교체할노드 = 부모노드.replaceChild(새로운자식노드, 기존자식노드);
1. 새로운 자식 노드 : 자식 노드 리스트에 새롭게 추가할 요소 노드를 전달합니다.
2. 기존 자식 노드 : 자식 노드 리스트에서 제거할 요소 노드를 전달합니다.
다음 예제는 자식 노드 중에서 첫 번째 요소를 삭제하고, 그 대신에 세 번째 요소를 첫 번째 요소 자리에 삽입하는 예제입니다.
예제
var parent = document.getElementById("parent"); // 부모 노드를 선택함.
var first = document.getElementById("first");
var third = document.getElementById("third");
function changeNode() {
parent.replaceChild(third, first); // first 요소를 삭제하고, 그 대신 third 요소를 삽입함.
}
텍스트 노드의 데이터 교체
replaceData() 메소드를 사용하면 텍스트 노드의 텍스트 데이터를 바꿀 수 있습니다.
replaceData() 메소드의 원형은 다음과 같습니다.
원형
텍스트노드.replaceData(오프셋, 교체할문자수, 새로운데이터);
1. 오프셋(offset) : 오프셋 값은 0부터 시작하며, 기존 텍스트 데이터의 몇 번째 문자부터 교체할지를 전달합니다.
2. 교체할 문자 수 : 기존 텍스트 노드의 데이터로부터 교체할 총 문자 수를 전달합니다.
3. 새로운 데이터 : 새로이 삽입할 텍스트 데이터를 전달합니다.
예제
var text = document.getElementById("text").firstChild; // 아이디가 "text"인 요소의 텍스트 노드를 선택함.
function changeText() {
text.replaceData(7, 4, "저녁 7"); // 텍스트 노드의 7번째 문자부터 4개의 문자를 "저녁 7"로 교체함.
}
