dom 노드 찾기 방법

자바 스크립트로 dom을 활용하고 잘 때 가장 먼저 해야 할 것은 dom계층 구조의 엘리먼트 가운데 어떤 걸 변경할 까인가이다. dom계층구조 사용시 최상위 계층 구조를 의미하는 document를 사용해야 한다. document가 최상위이기 때문에 모든 노드는 document의 하위 모드로 찾아 낼수 있지만.. 문서가 복잡해지고 깊어 질수록 구조에서 헤매게 된다 그것을 위해 엘리먼트에 유일한 id를 부여 하게 된다.
 
<p id='hello'>

<div id='empty'><div>

다음과 같이 계층 노드는 각각의 유일한 id를 가지게 된다. 이 경우에는 어떠한 곳에 있던지 다음과 같이 찾을 수 있다.
var hello=document.getElementById('hello');

위와 같이 document에 해당하는 element에 대한 아이디로 찾게 되면 모두 찾을 수 있다. 현재의 웹 페이지가 documen로 참조 될 수 있다는 점도 참고 한다.

dom노드 생성에 관하여..

현재 문서에 들어 있는 dml노드에 손대기 전 새로운 노드를 만들어 문서에 추가해야 할 경우가 있다는 점이 있다.예전에 사용됐던 addNode()함수에서는 노드를 생성하는 표준 메소드인 document.createElement()와 document.createTextNode() 메소드를 사용했다.
createElement()는 다음과 같이 태그 유형만 지정하면 어떤 형태의 html태그라도 모두 만들어 낼수 있다.

var childEl=document.createElement("div");

createTextNod()메소드는 제목, div, 문단, 목록 등의 안에 나타나는 텍스트 노드를 만들어 준다.

var txtNode=document.createTextNode("some text");

현재 dom 표준은 텍스트 노드를 여타 html엘리먼트와 구분해서 정의한다.

만들어진 노드는 화면에 보이기 위해서는 문서에 붙여야 한다.
문서에 노드를 붙여 넣으려면 원하는 위치에 있는 dom노드의 appendChild() 메소드를 사용해야 한다.

el.appendChild(childEl);

문서에 새로운 항목을 추가하는 데는 위에서 설명한 세가지 메소드

createElement(), createTextNode(), appendChild() - 를 사용하는 것으로 충분하다.
이 세 가지로 추가를 했다면 이제는 스타일 시트를 적용하면 된다.

그럼 다음 화에서는 스타일 적용에 대해 알아보자.