1. 메소드
□ 노드 만들기
○ createElement : 특정 태그 내에 포함된 새로운 요소 노드를 만들 때 사용. 새로 만들어진 요소 반환
reference = document.createElement(element);
var para = document.createElement("p");
document.body.appendChild(para);
para.setAttribute("title", "단락 내용");
○ createTextNode : 특정 Text를 포함하는 새 Text Node를 생성. 새로 만들어진 요소 반환
reference = document.createTextNode(text);
var message = document.createTextNode("Hello World");
var container = document.createElement("p");
container.appendChild(message);
document.body.appendChild(container);
□ 노드 복사
○ cloneNode : 특정 Node를 복사. 새로 복사된 노드 반환
reference = node.cloneNode(deep);
reference = node.cloneNode(true) // 복사한 Node와 같은 자식을 가지는 것
reference = node.cloneNode(false) // 속성만 복사됨
var para = document.createElement("p");
var message = document.createTextNode("Hello World");
para.appendChild(message);
document.body.appendChild(para);
var newpara = para.cloneNode(true);
document.body.appendChild(newpara);
□ 노드 추가
○ appendChild : 요소 Node에 새 자식 Node를 추가
reference = element.appendChild(newChild);
var para = document.createElement("p");
var message = document.createTextNode("Hello World");
para.appendChild(message);
document.body.appendChild(para);
// 문서 내에 있는 요소를 옮길 수 있음
var message = document.getElementById("fineprint");
var container = document.getElementById("content");
container.appendChild(message);
○ insertBefore : 특정 요소의 자식 Node 앞에 새로운 Node를 추가
reference = element.insertBefore(newNode, targetNode);
var container = document.getElementById("content");
var message = document.getElementById("fineprint");
var para = document.createElement("p");
var text = document.createTextNode("Here comes the fineprint");
para.appendChild(text);
container.insertBefore(para, message);
// 기존 노드를 문서 내에서 이동할 수 있음
var container = document.getElementById("content");
var message = document.getElementById("fineprint");
var announcement = document.getElementById("headline");
container.insertBefore(announcement, message);
□ 노드 삭제
○ removeChild : 특정 부모 Node에서 자식 Node를 제거
reference = element.removeChild(node);
var container = document.getElementById("content");
var message = document.getElementById("fineprint");
container.removeChild(message);
// 상위 노드의 이름을 알지 못하는 경우 parentNode 프로퍼티 사용
var message = document.getElementById("fineprint");
var container = message.parentNode;
container.removeChild(message);
□ 노드 바꾸기
○ replaceChild : 특정 부모 Node 아래 자식 Node를 다른 Node로 교체
reference = element.replaceChild(newChild);
var container = document.getElementById("content");
var message = document.getElementById("fineprint");
var announcement = document.getElementById("headline");
container.replaceChild(announcement, message);
□ 노드 값 변경
○ setAttribute : 특정 요소 Node의 기존 속성 값을 바꾸거나 새롭게 추가
element.setAttribute(attributeName, attributeValue);
var para = document.createElement("p");
para.setAttribute("id", "fineprint");
var container = document.getElementById("content");
content.appendChild(para);
□ 노드 찾기
○ getAttribute : 지정 요소의 속성 Node의 이름에 해당하는 값을 찾아서 반환
attributeValue = element.getAttribute(attributeName);
var message = document.getElementById("fineprint");
var titletext = message.getAttribute("title");
var newtext = document.createTextNode(titletext);
message.appendChild(titletext);
○ getElementById : 특정 Id 속성을 가진 요소를 찾아 반환
element = document.getElementById(ID);
var message = document.getElementById("fineprint");
message.setAttribute("title", "제목을 설정합니다.");
var container = message.parentNode;
○ getElementsByTagName : 특정 Tag 명에 해당하는 모든 요소들을 찾아 반환
element = document.getElementsByTagName(tagName);
var paras = document.getElementsByTagName("p");
for(var i=0; i < paras.length; i++) {
paras[i].setAttribute("title", "");
}
○ hasChildNodes : 특정 요소에 자식 Node가 있는지 여부를 아는 데 사용
booleanValue = element.hasChildNodes;
var message = document.getElementById("fineprint");
if(message.hasChildNodes) {
var children = message.childNodes;
}
2. 프로퍼티 □ 노드 프로퍼티
○ nodeName : 특정 Node의 이름을 포함한 문자열 반환 (읽기 전용)
name = node.nodeName;
속성 Node = 속성 이름
Text Node = "#text"
value = node.nodeValue;
속성 Node = 속성 값
Text Node = Text 내용
요소 Node = null
var message = document.getElementById("fineprint");
if(message.firstChild.nodeType == 3) {
message.firstChild.nodeValue = "이 명령문은 실행됩니다.";
}
□ 노드 내부 구조 보기
○ childNodes : 특정 요소 Node의 자식 Node를 배열 값으로 반환 (읽기 전용)
nodeList = node.childNodes;
nodeType, nodeName, nodeValue 같은 Node 프로퍼티로 구성
Text Node, 속성 Node 는 자식 노드 없음. childNodes는 빈 배열 값 포함이 반환
document.childNodes[0].nodeName 은 "HTML"
○ firstChild : 지정 요소 Node의 첫 번째 자식 노드를 반환 (읽기 전용)
reference = node.firstChild;
nodeType, nodeName, nodeValue 같은 Node 프로퍼티로 구성
Text Node, 속성 Node 는 자식 노드 없음. childNodes는 빈 배열 값 포함이 반환
node.firstChild = node.childNodes[0]
○ lastChild : 지정 요소 Node의 마지막 자식 노드를 반환 (읽기 전용)
reference = node.lastChild;
nodeType, nodeName, nodeValue 같은 Node 프로퍼티로 구성
Text Node, 속성 Node 는 자식 노드 없음. childNodes는 빈 배열 값 포함이 반환
node.firstChild = node.childNodes[elementNode.childNodes.length-1]
○ nextSibling : 지정 Node와 이웃하고 있는 Node 중 뒤의 것을 반환 (읽기 전용)
reference = node.nextSibling;
nodeType, nodeName, nodeValue 같은 Node 프로퍼티로 구성
○ parentNode : 지정 Node의 부모 노드를 반환 (읽기 전용)
reference = node.parentNode;
nodeType, nodeName, nodeValue 같은 Node 프로퍼티로 구성
반환되는 Node는 항상 요소 Node.
○ previousSibling : 지정 Node와 이웃하고 있는 노드 중 앞의 것을 반환 (읽기 전용)
reference = node.previousSibling;
nodeType, nodeName, nodeValue 같은 Node 프로퍼티로 구성
