[JavaScript 요약 정리] 13. 문서 객체 모델(DOM)

13. 문서 객체 모델(DOM)

1) DOM(Document Object Model)

- 넓은 의미로는 웹 브라우저가 HTML 페이지를 인식하는 방식

- 좁은 의미로는 document 객체와 관련된 객체의 집합

- HTML 페이지는 트리 모양으로 구성, 각 요소를 노드라고 칭함

element node: html 태그 의미

text node: element node 안에 들어있는 텍스트

- 자바스크립트에서는 속성도 하나의 노드로 구분

2) document 객체 다루기

- document 객체는 텍스트 노드를 가진 객체와 텍스트 노드가 없는 객체로 분류

- document 객체의 노드 생성 메소드

createElement(tagName) : 요소 노드 생성

createTextNode(text) : 텍스트 노드 생성

- document 객체의 연결 메소드

appendChild(node) : 객체의 노드 연결

- document 객체의 속성 지정 방법

document 객체 노드 참조변수.속성 = 값;

- document 객체 생성 및 속성 지정 예시

var img=document.createElement('img');

img.src='1.jpg';

img.width=500;

- document 객체의 속성 관련 메소드

setAttribute(name, value) : 객체의 속성 지정

getAttribute(name) : 객체의 속성 반환

3) 쉽게 document 객체 생성

- 쉽게 document 객체를 생성하기 위해 innerHTML 속성을 사용

- 생성 양식

대상노드.innerHTML = 텍스트노드;

*대입시 기존 텍스트 노드는 전부 사라짐

- document 객체에 텍스트 노드 추가하는 방법

대상노드.innerHTML += 텍스트노드;

- innerHTML 대신 textContent를 이용하면 태그 그대로 출력 가능

- 단 보안성이 취약하다는 단점이 존재

4) 문서 객체 참조

- 웹페이지에 이미 존재하는 HTML 태그를 자바스크립트에서 참조하는 방법

- 참조 메소드

getElementByID(id) : id에 해당하는 document 객체를 참조

getElementsByName(name) : 태그의 name에 속성에 해당하는 document 객체를 참조

getElementsByTagName(tagName) : 태그에 해당하는 document 객체를 참조

- 사용 예시

var ele=document.getElementById('hello'); // hello라는 id를 갖는 객체 참조

ele.innerHTML='<img src=1.jpg>';

ele.src='2.jpg'; // ele에는 참조 주소값이 저장되었기 때문에 객체의 속성 변경 가능

- 주의점: document 객체의 경우 다양한 속성을 가지고 있기 때문에 for in 반복문이 아닌 기본 반복문을 사용해야 함

5) 선택자를 사용해서 객체 참조

- CSS 선택자로 document 객체를 참조 가능

- 선택자를 이용한 참조 방법

querySelector(선택자) : 선택자로 가장 처음 선택되는 문서 객체 참조

querySelectorAll(선택자) : 선택자에 해당하는 모든 문서 객체의 참조값을 배열로 반환

6) 스타일 조작

- document 객체의 style 속성을 이용해서 스타일 변경 가능

- 스타일 변경 방법

대상노드.style.스타일속성 = '속성값';

- 스타일 속성 중 '-' 이 들어가있는 속성은 하이픈 삭제 후 연결되는 첫 글자를 대문자로 변경

ex.// header.style.background-color = 'red'; // 에러

header.style.backgroundColor = 'red'; // 올바른 사용 방법

7) document 객체의 노드 제거

- 노드를 제거할 땐 노드 제거 메소드를 사용

- 노드 제거 메소드

removeChild(child) : document 객체의 자식 노드를 제거

- 일반적인 사용 방식

대상노드.parentNode.removeChild(대상노드); // 좌측의 형태로 제거