[JavaScript] JavaScript - 문서객체모델(DOM, Document Object Model)

 

문서객체모델(DOM, Document Object Model)

- 넓은 의미 : 웹브라우저가 HTML 페이지를 인식하는 방식
- 좁은 의미 : document(body를 관리) 객체와 관련된 객체의 집합
- HTML 페이지에 태그를 추가, 수정, 제거할 수 있음

- 기본적인 자바스크립트만으로 DOM을 다루기에는 너무 복잡하므로, 간단한 내용만 살펴보고 자세한 내용은 jQuery와 함께 사용

 

 

DOM 관련 용어

- 문서 객체 : html or body 태그를 자바스크립트에서 이용할 수 있는 객체로 만들면 그것이 문서 객체.

- 노드 : 각 요소(head, body, title, script, h1, HEADER ...)

   1) 요소노드(Element Node):HTML 태그.
   2) 텍스트노드(Text Node) : 요소노드 안에 들어 있는 글자.

- 정적으로 문서 객체를 생성한다의 의미
: 웹페이지가 처음 HTML 페이지에 적혀있는 태그들을 읽으며 생성하는 것.

- 동적으로 문서 객체를 생성한다의 의미
: 자바스크립트를 사용해 원래 HTML 페이지에는 없는 문서 객체를 생성하는 것.

 

- document : body를 관리

- document의 객체를 통해서  css의 선택자 처럼 사용된다.   
- css, html의 태그를 javasctript의 노드라고 부른다. 

 

 

 

 

문서 객체 생성1

 

<출력값>  

<h2> Hello DOM</h2> 를 생성하여 출력합니다. 

 

window.onload = function(){} 안에 작성하는 이유:
boby 영역이 먼저 브라우저로 넘어간 이후에 실행되는데, 안에 들어있지 않으면 실행하는 순간  먼저 실행되지만 body 영역에 아무것도 올라가 있지 않기 때문에 error가 납니다. 결과적으로 boby 영역이 실행되어야지 함수가 적용되기 때문에 꼭 안에 넣어줘야 합니다. 

- window.onload = function(){} 는 한개만 등록해서 사용가능합니다. 여러개 등록되어 있으면 마지막에 입력한 데이터만 출력합니다. 

 

 

 

문서 객체 생성2

텍스트 노드 갖지 않는 노드 생성하는 방법

1) 웹표준이 정의하거나 웹브라우저가 지원하는 태그의 속성에만 사용

 

<출력값>  

속성이 있는 경우 = ( . ) 을 이용해서 동작 되어집니다. 

 

 

 

2) 웹브라우저가 지원하지 않는 속성(사용자 속성 추가)

 

( . ) 을 이용하여 지원 되지 않으므로, setAttribute()를 이용하여 적용할 수 있습니다. 

<출력값>  

직접 적용한 속성이 들어갑니다. 

 

 

 

 

문서 객체 생성3 

문서 객체의 innerHTML 속성 사용해 객체 생성.

-  innerHTML : 오른쪽의 값을 그대로 boby 영역 안에 추가

 

<출력값>  

 

 

 

문서 객체 가져오기1 

- 웹페이지에 이미 존재하는 HTML 태그를 자바스크립트로 가져오는 방법.
- getElementById() 메서드는 한 번에 한가지 문서 객체만 가져올 수 있습니다(제한적 사용) 

 

<출력값>  

 

 

 

문서 객체 가져오기2

- 아이디 속성으로만 가져올 수 있는 것이 아닙니다. 

 

getElementsByTagName('tagName')  : tagName과 일치하는 문서 객체를 배열로 가져옴
getElementsByName(name)  : 태그의 name 속성이 name과 일치하는 문서 객체를 배열로 가져옴

getElementsByClassName('className') : className 과 일치하는 문서 객체를 배열로 가져옴

 

* 인덱스를 통해서 접근하는데 시작값 = 0 입니다. 

 

 

<출력값> - tag의 인텍스를 통해서 출력 

 

 

 

 

문서 객체의 스타일 조작

 

<출력값> - 스타일 적용

 

 

 

 

문서 객체 제거 

 

방법1 : body 문서 객체 바로 아래에 제거하고자 하는 문서객체가 있을 때 가능한 코드

- body 객체 바로 알에 있어야지만 가능하므로 제한적입니다. 

 

 

<출력값> - h1 제거 

 

 

 

방법2 : 일반적으로 문서 객체를 제거 할 때 사용하는 코드

대상. parentNode.removeChild() 를 통해서 제거 

 

 

<출력값> - h2 제거

 

 

 

문서객체를 활용한 예제 

 

 

<출력값> - 동적으로 시간이 변경

 

- setInterval : 1초마다 함수를 불러옴.