자바스크립트 문서 객체 모델(DOM)
문서 객체 모델(Document Object Model)
DOM은 웹 페이지의 컨덴츠와 구조에 스크립트 친화적인 관점을 제공하는데.
이러한 점은 웹 페이지를 동적으로 변경하기 위해 자바스크립트를 사용하려고 할 경우
매우 중한 부분입니다. DOM이란 렌즈를 통해서 보면, 페이지는 엘리먼트들이 나무에 메달린 것처럼
계층적인 형태로 보입니다. 나무에 있는 각각의 잎을 노드라고 하는데 노드는 페이지에 있는
각각의 엘리먼트와 직접적으로 연결되어 있습니다. 하나의 노드 및에 또 다른 노드가 있는 경우,
이 노드는 상위 노드의 자식처럼 취급됩니다.
ex ) 노드의 이미지 .
DOM은 웹 페이지를 계층적으로 구성된 나무에 매달린 노드처럼 “봅니다.”
DOM 노드들의 집합체 .
DOM 트리에 있는 모든 노드들은 그 타입에 따라 분류됩니다.
주요 노드의 타입은 페이지의 구조적인 부분과 대응되는데 ,
주로 엘리먼트 노드와 텍스트 노드로 구성됩니다.
DOCUMENT :
DOM 트리의 가장 상위 노드는 도큐먼트 그 자체를 나타내며 HTML 엘리먼트의 위에 위치합니다
ELEMENT :
임의의 HTML 엘리먼트는 HTML 코드에 있는 태그와 대응됩니다
TEXT :
엘리먼트를 위한 텍스트 컨텐츠는 항상 해당 엘리먼트 밑에 자식 노드로 저장됩니다.
ATTRIBUTE :
엘리먼트의 속성은 엘리먼트 노드를 통해서 접근할수 있는데 DOM트리상에서는 직접 보이지 않습니다.
웹 페이지를 위한 DOM 트리에 노드타입을 적용하면서 페이지의 각 요소
들이 DOM에 의해 어떻게 인지되는지를 정확히 분류하는데 도움이 됩니다
특별히 관심을 가지고 볼점은 TEXT노드는 항상 노드 컨텐츠의 일부(혹은 전체)
로써 ELEMENT노드의 바로 밑에 온다는 점입니다.
Document 검색함수
nodeValue :
노드에 저장된 값으로, 텍스트와 속성 노드(엘리먼트가 아닌) 에만 있습니다.
nodeType :
DOCUMENT나 TEXT같은 노드의 타입을 말하는데, 숫자로 표현
childNodes :
하나의 노드 밑에 있는 모든 자식 노드들을 포함하고 있는 배열을 말하는데 ,
HTML 코드에서 노드가 나타난 순서대로 배열에 저장됩니다.
firstChild
하나의 노드 밑에 있는 첫번째 자식 노드
lastChild
하나의 노드 밑에 있는 마지막 자식 노드
ex )1
document.getElementByTagName("body")[0].childNodes[1].lastChild
노드 텍스트 변경을 위한 세 가지 단계
자식 노드만 변경함으로써 노드의 컨텐츠를 변경하는 데에 따르는 문제는
다른 자식 노드들에 대해서는 어떠한 배려도 하고 있지 않는다는 점입니다. 따라서
하나의 노드의 컨텐츠를 변경하려면, 실제로 그 노드에 있는 모든 자식들을 지우고
새로운 컨텐츠를 갖고 있는 새로운 자식 노드들을 추가하는 것 입니다.
1 . 모든 자식 노드들을 제거합니다.
2 . 새로운 컨텐츠를 기준으로 해서 새로운 텍스트 노드를 생성합니다
3 . 새로 생성된 텍스트 노드를 자식 노드로 덧붙입니다.
이러한 작업은 세가지 DOM 메소드를 사용해서 처리할수 있습니다
1 . removeChild() :
- 노드로부터 자식 노드를 제거하고 , 제거된 자식 노드를 전달
2 . createTextNode() :
- 텍스트 문자열로 새로운 텍스트 노드를 생성
3 . appendChild() :
- 노드의 마지막 자식으로 노드를 추가하고 추가된 자식노드를 전달
ex )1
2
3
4
5
6var node = document.getElementById("story"); // <- 맨먼저 ID를 사용해서 엘리먼트(노드)를 가져온다
while(node.firstChild){ ///<- 더이상 자식노드가 없을때까지 루프문을 돌고
node.removeChild(node.firstChild); ///<- 첫번때 자식노드를 제거합니다
}
node.appendChild(document.createTextNode("새로운 텍스트"));
//모든 자식 노드를 제거한 후에 부모 노드에 새로운 텍스트 노드를 추가합니다.