문서 객체 모델(Document Object Model = DOM)★★★
웹에서 자바스크립트를 사용하는 이유는 어떤 조건에 맞거나 사용자의 동작이 있을때
웹 문서 전체 또는 일부분이 동적으로 반응하게 만들기 위해서이다.
이렇게 반응하게 하려면 웹 문서의 모든 요소를 따로 제어할 수 있어야 한다.
예를들어 웹 문서에 텍스트와 이미지가 들어있다면 웹 브라우저는 마크업 정보를 보면서 텍스트 단락이 몇 개고, 내용이 무엇인지 살펴 본 후 저장한다.
또 이미지가 몇 개고, 이미지의 파일 경로는 어디고, 대체 텍스트는 무엇인지도 파악해서 이미지 별로 다 정리해서 인식한다.
이런 텍스트나 이미지 요소를 브라우저가 제어하려면 두 요소를 따로 구별하여 인식해야 한다.
이러한 모든 정보 요소를 자바스크립트로 가져와서 프로그래밍할 때 DOM을 이용한다.
즉, 문서 객체 모델을 한 마디로 정의하면
: 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수있도록 객체를 사용해 웹 문서를 체계적으로 관리하는 방법을 말한다.
HTML문서로 작성한 웹 문서의 DOM을 HTML DOM이라고 부르고
XML문서에서 사용하는 XML DOM도 있다.
DOM은 웹 문서를 하나의 객체로 정의한다. 그리고 웹 문서를 이루는 이미지나 텍스트, 표 등의 모든 요소도 각각 객체로 정의한다. 웹 문서 전체는 document객체이고, 이미지는 image객체이다.
즉, 웹문서 안의 모든 태그는 객체로 인식하고 처리한다.
DOM트리
자바스크립트로 DOM을 조작하려면 실제 웹 문서가 DOM으로 어떻게 표현되는지
알아야 한다. DOM은 웹 문서의 요소를 부모요소와 자식요소로 구분한다.
예를들어 html최상위 객체 안에는 head와 body라는 자식요소가 있고,head안에는 title, meta, link와 같은 자식요소를 포함한다.
body안에는 div,header, main, footer와 같은 자식요소를 포함한다.
이 모습을 도표로 그려보면 마치 나무뿌리와 닮았다고 하여 DOM TREE라고 부른다.
DOM트리의 최상위 객체는 자바스크립트에서 document라고 표현한다.
또한 태그 요소는 여러 속성들이 들어간다. 태그요소 안에 들어있는 속성이나 내용들도 자식으로 나타낸다.
트리노드
DOM객체에서 부모와 자식구조로 나눠지는 모든 것을 '노드'라고 표현한다.
부모 자식 구조를 도표로 표시하면 나무 뿌리의 형태가 되므로 DOM트리라고 부른다고 했다.
DOM트리에서 가지가 갈라져나온 항목을 노드(node)라고 하고 DOM트리의 시작부분인 html노드를 나무 뿌리에 해당한다고 해서 root node라고 부른다.
루트 노드를 시작으로 웹 문서에서 사용한 요소는 계층 구조를 이룬다.
따라서 각 노드 사이의 관계를 부와 자식, 형제간으로 표현할 수 있다.
부모노드 (parent node)에는 자식노드 (child node)가 있고, 부모 노드가 같은 형제노드 (sibling node)가 있다.
DOM을 구성하는 기본 원칙
- 모든 html태그는 요소(element)노드이다.
- html에서 사용하는 텍스트 내용은 자식노드인 text노드이다.
- html태그에 있는 속성은 자식노드인 속성(attribute)노드이다.
- 주석은 주석(comment)노드이다.
DOM요소에 접근하고 속성 가져오기
CSS에서는 class, id, 태그등의 스타일을 각각 구별해서 정의해야한다.
이때 class,id, 태그 등을 '선택자(selector)'라고 한다.
DOM요소에 접근하려면 이 선택자들을 이용한다.
1. id선택자로 접근하는 getElementById()메서드
html태그의 id속성은 html요소가 문서 안에서 중복되지 않도록 사용하는 css선택자이다.
getElementById()를 사용하면 특정한 id가 포함된 해당 요소를 선택할 수 있다.
해당 메서드를 사용할 때 아이디명은 앞에 #을 붙이지 않고 이름만 분자열로 표현한다.
[기본형]
document.getElementById("아이디명")2. class 선택자로 접근하는 getElmentsByClassName()메서드
class선택자는 웹 문서 안에서 여러 요소에서 사용할 수 있으므로 getElmentByClassName()메서드를 사용한다.
해당 메서드를 사용하면 반환하는 요소가 2개 이상일 수 있다.
그래서 이 메서드 이름에는 반환 요소가 여러 개라는 뜻에서 Element에 s가붙는다. 불러오는 클래스명에는 .이 붙지 않으며, 문자열로 불러와야한다.
[기본형]
document.getElementsByClassName('클래스명')
