DOM

Document Object Model

• 문서객체 모델
• Html, Xml등의 문서를 엑세스하는 표준을 정의하고 있다. 
  • DOM은 w3c에서 HTML, XML문서를 다루는 표준(인터페이스)를 정의한 것이다. 
  • DOM에 정의된 표준에 대한 구현은 브라우저 제조사, 프로그래밍 언어 개발사, 라이브러리 개발자가 담당한다. 
  • DOM에서 정의한 표준은 브라우저 종류나 프로그래밍언어의 종류에 상관없이 동일한 API로 구현되어 있다. 
• 엘리먼트 삭제하는 것은 remove, 생성 create, id는 getelementById로 얻어오는 것 이런 류의 표준을 정의해놓은것을 DOM이라고 한다. 
• 조작할 때 사용하는 객체는 w3c에서 표준으로 정해놓은 것이다. 

• 

  DOM의 특징
• 데이터를 조회하기 쉽다. 
• 데이터를 추가하기 쉽다. 
• 데이터를 변경하기 쉽다. 
• 단, 호환성이 낮다. 
  • java에서 c로  c에서 javaScript로 주고받기 어렵다. 
  • 전송에 불리하다. 

Html컨텐츠 

• 특징 
  • 호환성이 높다. 
  • 전송하기 편하다 
  • text처리 못하는 프로그램은 없다. 
  • 주고받기 편하다. 
• 단점
  • 데이터를 조회하기 어렵다. 
  • 데이터를 추가하기어렵다. 
  • 데이터를 변경하기 어렵다. 

웹서버에서 html컨텐츠를 주고받을 때에는 화면에 뿌려져야하기 때문에 태그하나하나마다 객체를 만든다. 
그리고 해석후 element의 객체를 tree모양으로 만든다. dcument Object Model객체로 만든다. 
연결관계의 파악을 진행후 화면에 표시하게 된다. 

html하나씩 Document 객체가 1개씩 생성된다. 

• HtmlCollection객체 
  • 배열이라고 생각하면된다. 
  • property = length()
    • 저장된 갯수를 반환한다. 
  • method 
    • item 
      • 인덱스 번호에 해당하는 엘리먼트 객체를 반환한다. 

주요 메소드 

• getElementById
  • 지정된 id에 해당객체를 가져온다. 
• querySelector
  • 첫번째 것만 반환한다. 
• querySelectorAll
  • 해당하는 것을 모두 반환한다. 

• Document객체 
  • 전체적으로 elements를 감싼다. 
  • 특정엘리먼트를 찾는다. 
• Element객체 
  • 태그 1개를 표현하는 객체 
    • 그중 value부터는 input, select, textrea등 from요소의 엘리먼트에 해당되는 값이 들어간다. 
    •  readonly는 readonly, disable은 엘리먼트의 값은 true, false의 값으로 들어간다.  
• 메소드로 객체를 사용할 수 있다. 
• 내용을 읽어와야 엘리먼트를 삭제, 표현, 조작이 가능하다. 

BOM

• Browser Object Model
• 브라우저에 빌트인된 객체들이다. 
  • 브라우져에 내장된 객체이다. 
  • 정해진 규칙대로 빌트인에 객체를 담는다. 
• 자바스크립트를 사용해서 BOM객체들과 상호작용을 할 수 있다. 
• window
  • 브라우저의 윈도우를 표현하는 객체이다. 
  • 다른 BOM객체를 저장하고 있다. 
  • Docoument객체를 저장하고 있다. 
  • 자바스크립트의 전역객체(Global Object)다.
    • 자바스크립트로 생성하는 객체, 함수, 변수는 자동으로 Window객체의 멤버가 된다. 
  • 자바스크립트에서 특별한 객체의 이름을 지정하지 않고 변수와 함수를 사용하는 경우 기본적으로 window객체에서 찾는다. 
  • viewPort를 표현한다. 
  • 그래서 console.log를 사용하는 것이다. 
• Location
  • 현재 URL의 정보를 표현하는 객체다. 
• History 
  • 페이지의 방문정보를 가져온다. 
  • 뒤로가기, 특정몇번째인지 확인이 가능하다. 
• Navigator
  • 브라우져의 이름, 버젼을 나타낸다. 
• Screen
  • 사용자의 스크린정보를 가지고 온다. 새로운창을 열었을 대 폭을 확인하기 위해서 사용한다. 
• 우선적으로 Document객체를 획득할 때 전체적인 것을 획득한다. 
• document를 클릭하면 문서전체, HTML문서의 정보를 전부 획득할 수 있다. 
• window라는 내장객체에 위에 모든 객체가 포함된다. 
  • 자바스크립트에서는 Global객체라고 부른다. 
  • 모두window라는 그릇안에 들어가있다. 

var window {  //페이지가 열리면 
document : Document객체 //Html문서를 표현하는 객체
Location : Location객체 //주소표시창의 주소정보를 표현하는 객체
history : History객체 //페이지방문기록정보를 표현하는 객체
navigator : Navigator객체 //브라우져정보를 표현하는 객체
screen : Screen객체 //사용자의 모니터정보를 표현하는 해상도를 표현하는 객체
console : Console객체
alert  : function(message)객체 
parseInt : function(str) //문자열을 정수로 변환후 반환
parseFloat : function(str) //문자열을 실수로 변환후 반환

} 을 획득할 수 있다.