자바스크립트DOM - 노드 다루기

문서에서 특정 태그 이름을 지닌 노드 찾기

- Document 객체의 getElementsByTagName()을 이용하면 전체 문서에서 매개변수 값의 엘리먼트를 찾을 수 

  있습니다.

var divs = window.document.getElementsByTagName("div");

alert("문서내의 div 엘리먼트 개수 : " + divs.length);

for (var i = 0; i < divs.length; i++) {

var div = divs.item(i);

div.style.border = "1px solid #ff0000";

}

특정노드의 자식노드에서 특정태그 이름을 지닌 노드 찾기  

- 문서 전체가 아닌 특정 노드의 자식 가운데 특정 태그 이름을 가진 엘리먼트를 찾고 싶은 경우 Document 객체의 

  메서드인 getElementsByTagName() 대신 Element 객체의 메서드인 getElementsByTagName()을 사용합니다.

var divs = window.document.getElementsByTagName("div");

var div2 = divs[2];

var div2Child = div2.getElementsByTagName("div");

for (var i = 0; i < div2Child.length; i++) {

div2Child[i].style.border = "4px solid #ff0000";

}

문서에서 특정클래스가 적용된 노드 찾기

- 태그 이름이 아닌 클래스 이름을 알고 있거나 이 클래스가 적용된 엘리먼트를 문서 전체에서 찾고 싶을 때 

   Document 객체의  getElementsByClassName

var contentData = window.document.getElementsByClassName("content_data");

for(var i = 0; i < contentData.length; i++) {

contentData[i].style.border = "4px solid #ff0000";

}

문서에서 특정 ID를 지닌 노드 찾기

- Document 객체에는 문서 전체에서 아이디(id) 값으로  특정 엘리먼트를 찾는 getElementById() 메서드를 

   제공합니다.

var header = window.document.getElementById("header");

header.style.border ="4px solid #ff0000";

자식 노드 찾기

- 자식 노드를 모두 구하고 싶을 때

- 특정 엘리먼트의 하위 노드인 자식 노드에 접근하고 싶을 때는 Node 객체의 프로퍼티인 childNodes를 

   사용하면 됩니다.

- 자식노드중 N번쨰 노드에 접근하고 싶을 때

- 하위 노드 가운데 N번째 요소에 접근하고 싶을 때는 var node = page.childNodes[N] 또는 

   node = page.childNodes.item(N) 과 같은 식으로 하면 됩니다.

- 첫번쨰 자식 노드에 바로 접근

- Node에는 firstChild 라는 프로퍼티가 있어서 이를 이용하면 자식 노드중 첫번째 자식 노드에 바로 접근할 수 있

  습니다.

-마지막 자식 노드에 바로 접근하고 싶을 때

- 마지막 자식 노드에도 lastChild 라는 프로퍼티가 있어서 이를 이용하면 바로 마지막 노드에 접근 할 수 있

   습니다.

var page = window.document.getElementById("sample_page");

var nodes = page.childNodes;

alert("#sample_page의 자식 노드 개수는? " + nodes.length);

for (var i = 0; i < nodes.length; i++) {

var node = nodes.item(i);

if (node.nodeType == 1)

node.style.border = "1px solid #ff0000";

}

var firstChild = page.firstChild;

firstChild.style.color = "#ff0000";

var lastChild = page.lastChild;

lastChild.stlye.color = "#ff0000";

부모 노드 찾기

- 특정 엘리먼트의 부모노드에 접근하고 싶을 때는 Node  객체의 기본 프로퍼티인 parentNode를 사용합니다.

var header = document.getElementById("header");

header.parentNode.style.border = "4px solid #ff0000";

형제 노드 찾기

- DOM에서는 이런 형제노드를 쉽게 찾을 수 있게 몇가지 유용한 프로퍼티를 제공합니다.

- Node 객체의 프로퍼티인 previousSibling와 nextSibling을  이용하면 앞뒤로 인접한 형제노드에 각각 접근

  할 수 있습니다.

var content = document.getElementById("content");

content.previousSibling.previousSibling.style.border = "4px solid #ff0000";

content.nextSibling.nextSibling.style.border = "4px solid #ff0000";

노드 생성 및 추가하기

- 노드를 생성하고 추가하는 방법은 세가지가 있습니다.

- Document.createElement() 메서드 사용

- HTMLElement.innerHTML 프로퍼티 사용

- Node.cloneNode() 메서드 사용

- 위 세가지 방법을 경우에 따라 적절하게 독립적으로 또는 서로 조합해서 사용하면 됩니다.

- Document.createElement() 메서드를 사용하는 경우

- 첫번째 영역에 추가하기

1. 새로 생성할 노드를 추가할 위치의 기준이 되는 엘리먼트의 첫번째 자식노드를 찾습니다.

2. createElement() 메서드를 이용해 새로운 노드를 생성합니다.

3. 새롭게 생성한 텍스트를 추가하기 위해 createTextNode() 메서드를 이용해 텍스트 노드를  생성합니다.

4. 생성한 텍스트노드를 2번에서 생성한 자식 노드로 appendChild() 메서드를 이용해 추가합니다.

5. 끝으로 page.insertBefore(추가노드, 기준노드) 함수를 이용해 #sample_page 노드의 형제노드로 

    새로 생성된 노드를 추가합니다.

- 두번쨰 영역에 추가하기

첫번째와 같은 순서로 진행됩니다. 다만 새로 생성되는 노드가 많을 경우 자식노드를 모두 만들어 준 후 새로

생성되는 노드에 추가하는 구문이 들어갑니다.

- 세번째 영역에 추가하기

첫번째와 같은 순서로 진행됩니다. 새로 생성된 노드의 위치가 #sample_page 노드의 자식 노드로 추가되고

이를 위해 insertBefore() 메서드 대신 appendChild() 메서드를 사용합니다.

- HTMLElement.innerHTML 프로퍼티를 사용하는 경우

- Element의 내부에 들어있는 모든 자식을 문자열로 담은 프로퍼티입니다.

- innerHTML 프로퍼티 기능을 사용하면 새로 추가할 노드를 DOM 메서드를 이용해 일일이 생성하지 않고 문자

  열을 만들어 대입해주기만 하면 됩니다.

- Node.cloneNode() 메서드를 사용하는 경우

- 생성하고 싶은 내용이 이미 생성되 있는 요소와 똑같거나 다소 비슷하다면 Node객체에서 제공하는 

   cloneNode() 메서드를 이용해 똑같은 노드를 복사해서 생성할 수 있습니다.

노드 삭제 하기

- 지우려는 노드를 찾은 다음 Node 객체의 메서드인 removeChild()를 호출하여 사용합니다.

노드 이동시키기

- 이미 생성된 노드를 특정 위치로 이동 시키려면 노드 생성 및 추가시 사용한 appendChild(), insertBefore()를 

   그대로 사용하면 됩니다.(이미 존재하는 경우 기존의 위치에서 삭제한 후 추가 )

텍스트 노드 생성 및 추가하기 

- 텍스트 노드는 일반 엘리먼트 노드와 성격이 달라서 생성하는 방법이 조금 다릅니다.

- 택스트 노드를 생성하려면 생성하는 기능인 팩토리 메서드로 가득찬 Document 객체의 createTextNode() 메서드

   드를 이용하면 됩니다.

텍스트 노드 내용 변경하기 

- 바꾸려는 텍스트 노드를 찾아 Node 객체의 프로퍼티인 nodeValue에 원하는 값을 대입하면 변경할 수 있습니다.

출처 : jQuery를 이용한 인터렉티브 웹콘텐츠 제작