DOM note-Method

노드 만들기

---

1. createElement
  - 새로운 노드를 만든다.

// 노드를 만든다
para = document.createElement("p");
// 속성 부여
para.setAttribute("title", "단락내용");
// 노드를 추가한다. 노두 추가 후 속성 부여도 가능함
document.body.appendChild(para);

2. createTextNode
  - 새로운 텍스트 노드를 만든다.

// 새로운 텍스트 노드 생성
var message = document.createTextNode("hello world!");
// 새로운 노드 생성
var container = document.createElement("p");
// 생성한 노드에 텍스트 노드를 추가
container.appendChild(message);
// 생성한 노드를 body에 추가
document.body.appendChild(container);

3. cloneNode
  - 노드 복사
  - parameter가 true이면 자식노드끼지 복사하고 false이면 자식노드는 복사되지 않음

// 자식노드까지 복사
var para = document.createElement("p");
var message = document.createTextNode("hello world");
para.appendChild(message);
var newpara = para.cloneNode(true);

// 자식노드는 복사하지 않음
var para = document.createElement("p");
var message = document.createTextNode("hello world");
para.appendChild(message);
var newpara = para.cloneNode(false);

// 새로 복사된 노드는 문서에 추가해야 나타남
document.body.appendChild(newpara);

노드 추가

---

1. appendChild
  - 새 자식 노드 추가 (가장 마지막에)
  - 복사가 아니라 위치가 변경됨
  - 추가하려는 노드가 자식노드를 가지고 있을 경우 자식노드도 함께 추가됨

// 텍스트 노드 생성
var message = document.createTextNode("hello world");
// document의 요소 중 content라는 id를 가진 노드를 찾음
var container = document.getElementById("content");
// 찾은 노드에 생성한 텍스트 노드를 추가
container.appendChild(message);

2. insertBefore
  - 새 자식 노드 추가 (특정 요소의 앞에 추가)
  - 복사가 아니라 위치가 변경됨
  - 추가하려는 노드가 자식노드를 가지고 있을 경우 자식노드도 함께 추가됨

// container 노드
var container = document.getElementById("content");
// fineprint 노드
var message = document.getElementById("fineprint");
// p 요소 생성
var para = document.createElement("p");
// 생성된 p 요소를 container.fineprint 요소 앞에 추가
container.insertBefore(para, message);

// 노드의 위치를 이동시키는데에도 사용함
// container가 fineprint를 가지고 있다고 가정하고 headline을 fineprint 앞에 추가함
var container = document.getElementById("content");
var message = document.getElementById("fineprint");
var announcement = document.getElementById("headline");
container.insertBefore(announcement, message);

노드 삭제

---

1. removeChild
  - 특정 부모 노드에서 자식 노드를 제거
  - 하위 자식 노드도 모두 제거됨

// content.fineprint 제거
var container = document.getElementById("content");
var message = document.getElementById("fineprint");
container.removeChild(message);

노드 바꾸기

---

1. replaceChild
   - 특정 부모 노드 아래 자식 노드를 다른 노드로 교체
  - 교체 당한 자식 노드는 삭제됨

// content.fineprint를 새로 생성한 para노드로 교체
var container = document.getElementById("content");
var message = document.getElementById("fineprint");
var para = document.createElement("p");
container.replaceChild(para, message);

노드 값 변경

---

1. setAttribute
  - 특정 요소 노드의 기존 속성 값을 바꾸거나 새롭게 추가

// fineprint의 title 속성값을 "제목을 설정합니다."로 변경
// 원래 title이란 속성이 있었다면 변경되고 없었다면 추가됨
var message = document.getElementById("fineprint");
message.setAttribute("title", "제목을 설정합니다.");

노드 찾기

---

1. getAttribute
  - 지정 요소의 속성 노드의 이름에 해당하는 값을 찾아 반환
  - 지정한 이름에 해당하는 속성 노드가 없다면 빈 문자열이 반환

// fineprint 노드 포인터
var message = document.getElementById("fineprint");
// fineprint.title 값을 titletext에 저장
var titletext = message.getAttribute("title");
// titletext의 속성값으로 newtext라는 텍스트노드 생성
var newtext = document.createTextNode(titletext);
// fineprint에 생성한 텍스트 노드 추가
message.appendChild(titletext);

2. getElementById
  - 특정 id 속성을 가진 요소를 찾음
  - 실패시 null 반환
  - 문서 내에 같은 id를 가진 요소가 2개 이상 있을 경우 getElementById 함수는 예측할 수 없는 방식으로 동작

// container에 fineprint의 부모노드를 저장
var message = document.getElementById("fineprint");
var container = message.parentNode;

// fineprint의 title값을 변경
var message = document.getElementById("fineprint");
message.setAttribute("title", "제목을 설정합니다.");

3. getElementsByTagName
  - 특정 태그명에 해당하는 모든 요소들을 배열형태로 반환

// 문서 내의 모든 P 요소를 찾아 배열로 저장하고 갯수를 howmany라는 변수에 저장
var paras = document.getElementsByTagName("p");
var howmany = paras.length;

// 문서 내의 모든 P 요소를 찾아 title 속성값을 빈 값으로 만듬
var paras = document.getElementsByTagName("p");
for (var i=0; i<paras.length; i++) {
  // = paras.item(i)
  paras[i].setAttribute("title", "");
}

// 특정 노드 내의 특정 태그명 요소를 반환
var container = document.getElementById("content");
var paras = container.getElementsByTagName("p");
var howmany = paras.length;

4. hasChildNodes
  - 특정 요소에 자식노드가 있는지 여부를 아는 데 사용
  - 있으면 true, 없으면 false

var message = document.getElementById("fineprint");
// 만약 message 노드가 자식노드를 가지고 있다면
if (message.hasChildNodes) {
  // children 에 자식노드를 가져옴
  var children = message.childNodes;
}