JavaScript_DOM, BOM

DOM(Document Object Model)

 

• 문서 객체 모델
• HTML, XML 등의 문서를 엑세스하는 표준을 정의하고 있다
  • DOM은 w3c에서 HTML, XML 문서를 다루는 표준(인터페이스) 정의
  • DOM에 정의된 표준에 대한 구현은 브라우저 제조사, 프로그래밍 언어 개발사, 라이브러리 개발자가 담당
  • DOM에서 정의한 표준은 브라우저 종류나, 프로그래밍 언어의 종류에 상관없이 동일한 API로 구현

 

DOM의 특징

• 모든 엘리먼트는 객체
• 모든 엘리먼트의 프로퍼티를 정의하고 있다
• 엘리먼트를 엑세스하는 메소드를 정의하고 있다
• 모든 엘리먼트의 이벤트를 정의하고 있다

 

 

DOM의 주요 객체

객체	설명
Document	웹 브라우저 HTML 문서를 로딩했을 때, Document 객체가 된다
Element	HTML의 태그를 표현하는 객체 Document 객체에 현재 로딩된 HTML문서의 모든 태그에 대한 Element 객체가 포함되어 있다
Attr	HTML 태그의 속성을 표현하는 객체
HTMLCollection	Element 객체를 여러 개 포함할 수 있는 배열 객체(정확히는 배열과 유사한 객체)
Event	사용자가 웹페이지와 상호작용할 때 마다 엘리먼트에서 발생되는 객체다

 

 

 

DOM의 주요 API

 

Document 객체

 

Method

반환값	메소드명	설명
Element	getElementById	지정된 id속성값으로 Element 를선택 (일치하는 엘리먼트가 없으면 null을 반환한다) 지정된 id속성값과 일치하는 엘리먼트가 여러 개 있으면 첫번째 엘리먼트를 반환한다
HTMLCollection	getElementsByTagName	지정된 태그명에 해당하는 모든 Element객체를 HTMLCollection 에 담아서 반환
HTMLCollection	getElementsByClassName	지정된 클래스를 가지고 있는 모든 Element객체를 HTMLCollection 에 담아서 반환
Element	querySelector("CSS 선택자")	지정된 선택자로 검색된 첫번째 Element 객체 반환
HTMLCollection	querySelectorAll ("CSS 선택자")	지정된 선택자로 검색된 모든 Element 객체를  HTMLCollection 에 담아서 반환

 

 

 

 

 

Element 객체

 

Property(멤버변수)

프로퍼티명	설명
tagName	태그명이 저장되어 있다
nodeTpye	노드타입이 저장되어 있다
textContent	태그의 텍스트컨텐츠가 저장되어 있어 조회/변경 할 수 있다
InnerHTML	태그의 내부 HTML 컨텐츠가 저장되어 있어 조회/변경 할 수 있다
id	태그의 id 속성값이 저장되어 있다
name	form, input, select, textarea의 name값을 반환한다
classList	태그의 class 속성값이 배열 유사객체로 저장되어 있다
style	태그의 css 속성값이 저장되어 있다
value	input, select, textarea Element(폼 입력값)의 값을 조회/ 변경 할 수 있다
disabled	input, select, textarea, button Element의 비활성화 여부를 조회/변경할 수 있다 true는 비활성화, false는 활성화
checked	checkbox, radio Element의 체크여부를 조회/변경 할 수 있다 true는 체크상태, false는 체크상태아님

 

 주요 Method

반환값	메소드명	설명
HTMLCollection	getElementsByTagName("태그명")	지정된 태그명에 해당하는 모든 Element객체를 HTMLCollection에 담아서 반환
HTMLCollection	getElementsByClassName("클래스")	지정된 클래스를 가지고 있는 모든 Element객체를 HTMLCollection에 담아서 반환
Element	querySelector("CSS 선택자")	지정된 선택자로 검색된 첫번째 Element객체 반환
HTMLCollection	querySelectorAll("CSS 선택자")	지정된 선택자로 검색된 모든 Element객체를 HTMLCollection에 담아서 반환
	remove( )	엘리먼트를 삭제
String	getAttribute("속성명")	해당 엘리먼트에서 지정된 속서명에 해당하는 속성값을 반환
	setAttribute("속성명", "속성값")	해당 엘리먼트에서 속성을 변경/추가한다

 

HTMLCollection 객체

 

Property

프로퍼티명	설명
length	저장된 갯수를 반환

 

Method

반환값	메소드명	설명
Element	item(index)	인덱스 번호에 해당하는 Element 객체를 반환

 

  var collections = document.getElementsByTagName("p")
  for (var i=0; i<collections.length; i++) {
    var el = collections.item(i);
    var el = collections[i];
  }

 

 

Event 객체

 

Property

프로퍼티명	설명
target	이벤트가 발생된 엘리먼트 객체를 반환
type	발생된 이벤트이름을 반환
dataTransfer	drag & drop 에서 값을 전달하기 위한 객체를 반환
pageX, pageY	마우스의 현재 좌표를 반환
which	입력한 문자의 아스키코드값을 반환

 

Method

메소드명	설명
preventDefault( )	해당 엘리먼트에 특정 이벤트 발생시 실행할 기본동작이 지정되어 있는 경우  그 동작의 실행을 취소시킨다 <form> 태그안에서 button, submit 버튼 클릭시 폼이 전송되는 것 <a> 태그 클릭시 지정된 링크로 이동하는 것
stopPropagation( )	이벤트 버블링을 중지시킨다
stopImmediatePropagation( )	이벤트 버블링을 중지시킨다

 

 

 

 

BOM(Browser Object Model)

• 브라우저 내장 객체
• 최신 브라우저는 자바스크립트 상호 작용을 위해서 거의 동일한 메소드 및 속성을 가지고 있는 브라우저 내장객체를 제공

 

BOM의 종류

오브젝트명	설명
Window Object (전역객체 , 전역공간 )	웹 브라우저의 창을 표현하는 객체 웹 페이지의 스크립트 태그에서 작성하는 모든 변수, 모든 메소드는 Window Object의 담긴다 다른 BOM 객체를 모두 포함하고 있는 개체다
Document Object	HTML 문서를 표현하는 객체 Document Object가 제공하는 API를 이용해서 웹 페이지의 태그, 컨텐츠를 조작할 수 있다
Screen Object	사용자의 환경의 디스플레이 정보를 표현하는 객체 Screen Object가 제공하는 API를 이용해서 브라우저나 디스플레이의 중앙에 위치시킬 수 있다
Location Object	현재 페이지의 URL 정보를 표현하는 객체(주소창의 URL 정보를 표현하는 객체) Location Object가 제공하는 API를 이용해서 주소를 변경해 다른 페이지로 이동할 수 있다
History Object	웹 페이지의 방문이력 정보를 표현하는 객체 History Object가 제공하는 API를 이용해서 이전페이지, 다음페이지로 이동할 수 있다
Naviation Object	사용자의 웹브라우저 정보를 표현하는 객체 Navigation Object가 제공하는 API를 이용해서 웹 브라우저 정보 조회 가능

 

 

Method

반환값	메소드명	설명
	alert("메세지")	경고메세지창을 표시한다
boolean	confirm("메세지")	확인/취소 버튼을 포함하고 있는 확인창을 표시 확인을 클릭하면 true값이 반환
Window	open("url", "name", space)	새로운 창을 연다
	close( )	현재 창을 닫는다
정수	parseInt('문자열')	문자열을 정수로 변환 문자열의 첫글자는 반드시 숫자여야 한다 첫글자가 숫자가 아닌 경우 NaN이 반환
실수	parseFloat('문자열')	문자열을 실수로 변환 문자열의 첫글자는 반드시 숫자여야 한다 첫글자가 숫자가 아닌 경우 NaN이 반환
정수	setTimeout(함수, 밀리초)	지정된 시간만큼 경과된 후 해당 함수가 한번 실행된다
정수	setInterval(함수, 밀리초)	지정된 시간간격이 경과될 때마다 해당 함수가 반복 실행
	clearTimout(숫자값)	실행중인 setTimeout( )을 중지시킨다 숫자값은 setTimeout( ) 함수가 반환하는 숫자값을 넣는다
	clearInterval(숫자값)	실행중인 setInterval( )을 중지시킨다 숫자값은 setInterval( ) 함수가 반환하는 숫자값을 넣는다