JavaScript DOM : 문서 동적화

 

 

 

기존 HTML만 으로 구성된 웹페이지의 경우 사용자의 동작에 따라 변경되거나 하는 부분이 불가능 한 정적인 페이지였다. 허나 사람들의 요구사항이 늘어나고, 사용자들이 조금 더 편리 하게 사용할 수 있도록 웹 페이지를 동적으로 변화하고 변경하는 기능이 필요했고, 그것을 가능하게 하는 것이 자바스크립이다. 

 

기본적으로 JS에서 DOM을 다루려면 HTML과 CSS에 대한 이해가 있어야 한다.

요소를 선택하기 위해서는 태그에 부여한 id 또는 class로 접근해야 하기 때문에 기본적인 이해가 선행되어야 한다.

 

 

• 웹브라우저에서 HTML 문서 내용을 추가하거나 변경하는 것은 자바스크립만 가능
• CSS 속성과 HTML5의 다양한 API 기능 제어

 

 

DOM :

Document Object Model, HTML 문서 내에 객체화된 구성 요소

 

문서 객체 모델(DOM, Document Object Model)은 넓은 의미로 웹 브라우저가 HTML 페이지를 인식하는 방식, 좁은 의미로는 document 객체와 관련된 객체의 집합

 

DOM을 사용하면 HTML 페이지에 태그를 추가, 수정, 제거 가능

(보통 자바스크립로만 다루면 복잡해서 Jquery로 쓴다.)

 

 

ㅇ DOM 메서드

• document.getElementById(id명)  아이디를 사용해 문서 객체(요소) 선택
• document.querySelector(CSS 선택자)  CSS 선택자를 사용하는 방식(IE 8 이상)

 

ㅇ 여러 문서 객체 선택 메서드

• 이름이 같은 요소가 존재한다면 그 개수만큼 배열의 형태로 문서 개체를 선택
• document.getElementByTagName(요소명)  태그명으로 여러 문서 객체 선택
• document.getElementsByClassName(클래스명)  클래스명으로 여러 문서 객체 선택(IE 9 이상)
• document.querySelectorAll(CSS 선택자)  CSS 선택자로 여러 문서 객체 선택(IE 9 이상)