[자바스크립트] DOM

DOM(문서객체 모델)

자바 스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는방법

DOM은 웹 문서와 그 안의 모든 요소를 '객체'로 인식하고 처리한다.

 

DOM트리

- 웹 문서에 있는 요소들 간의 부모, 자식 관계를 계층 구조로 표시한 것

- 노드(node) : DOM 트리에서 가지가 갈라져 나간 항목

- 루트 노드(root node) : DOM 트리의 시작부분(html)

- 각 노드사이의 관계를 부모와 자식, 형제간으로 표현한다.

  (부모 노드(parent node) 에는 자식 노드(childe node)가 있으며, 부모노드가 같은 형제 노드(sibling node)도 있다.)

 

DOM을 구성하는 기본 원칙

1. 모든 HTML태그는 요소(element) 노드 이다.
2. HTML 태그에서 사용하는 텍스트 내용은 자식노드인 텍스트(text) 노드이다.
3. HTML 태그에 있는 속성은 자식 노드인 속성(attribute) 노드이다.
4. 주석은 주석(comment) 노드이다.

DOM 트리와 노드 종류

---

DOM 요소에 접근

- getElementById("id명") : 특정 id가 포함된 DOM요소에 접근 가능

- getElementsByClassName("class명") : class선택자는 웹문서안의 여러 요소에서 사용할 수 잇으므로 반환하는 요소가 2개이상일 수 있다. 그래서 Element뒤에 s가 붙는다. 클래스 이름이 같은 DOM요소들이 HTMLCollection객체로 저장된다. HTMLCollection객체는 배열과 비슷하고 배열처럼 사용할 수 있다.

- getElementsByTagName("태그명") : 태그이름으로 DOM요소에 접근한다. 같은 태그를 사용하는 요소가 2개이상일 수 있으므로 반환한느 값은 HTMLCollection형태로 저장이되고 Elemet뒤에 s가 붙는다.

- 노드.querySelector(선택자) : 하나의 값만 반환

- 노드.querySlectorAll(선택자 또는 태그) :반환값 여러개일때 모두 반환, 노드 리스트에 저장

getElementById("id명"), getElementsByClassName("class명"), getElementsByTagName("태그명")메서드의 반환값은 HTMLElement 객체이다. 여기에는 HTML('p'나 'a' 같은 형태)만 저장된다.
DOM트리의 텍스트, 속성 노드까지 자유롭게 제어하려면 querySelector(), querySelectorAll()메서드를 사용해야한다. 
id 선택자 처럼 반환값이 하나라면 querySelector(), class선택자나 태그이름을 사용하여 여러 값이 한꺼번에 반환될 경우에는 querySelectorAll()메서드를 사용한다.

※  id이름 앞에는 해시 기호(#id), class 이름 앞에는 마침표(.class), 태그는 기호없이 태그명(태그) 사용

 

innerText, innerHTML프로퍼티

- 웹 요소의 내용을 수정하는 프로퍼티

- innerText : 텍스트 내용 지정 (요소명.innerText = 내용)

- innerHTML : HTML 태그까지 포함해서 텍스트 내용 지정 (요소명.innerHTML = 내용)

 

getAttribute()

- 속성 노드의 값을 가져옴

- getAttribute("속성명")

 

setAttribute()

- 속성 노드의 값을 바꿈

-setAttribute("속성명", "값")

 

---

DOM요소에 함수 연결

- DOM요소에 이벤트 처리기 함수를 직접 연결할 수 있다.

var cup = document.querySelector("#cup");
cup.onclick = function(){
	alert("이미지르 클릭하였습니다.");
}

 

- 함수를 따로 정의해 놓았다면 DOM요소에 함수 이름을 사용해 연결 할 수 있다. 이때 함수 이름다음 괄호()는 추가하지 않는다.

var cup = document.querySelctor("#cup");
cup.onclick=clickPic;
function clickPic(){
	alert("사진을 클릭하였습니다.");
}

 

 

DOM의 evnet 객체

- 웹 문서에서 이벤트 발생한 요소가 무엇인지, 어떤 이벤트가 발생했는지 등 정보가 담긴 객체

 

 

 addEventListener() 메서드 사용

- 이벤트 객체를 사용해 이벤트 처리기 연결

- 요소.addEventerListener(이벤트, 함수, 캡쳐 여부);

• 이벤트 : 이벤트 유형 지정 (단, clike과 keypress처럼 'on'을 붙이지 않고 사용)
• 함수 : 이벤트 발생시 실행할 명령, 함수 지정. 함수를 정의할 때는 event객체를 인수로 받아사용
• 캡쳐 여부 : 이벤트를 캡처하는지 여부를 지정하며 true, flase 중 선택할 수 있음. (기본값은 false)
  • true : 캡처링, DOM의 부모 노드에서 자식노드로 전달
  • false : 버블링, DOM의 자식노드에서 부모노드로 전달