고급 웹 프로그래밍 - 정리 - 2

자바스크립트 객체

자바스크립트에는 사용자가 직접 객체를 만들어 사용할 수도 있지만, 기본적으로 제공되는 객체가 있습니다. 

• 자바스크립트에서 기본으로 제공되는 객체로 Array, Boolean, Date, Math등 기본객체가 있으며 이들을 코어 객체라고 합니다. 
• HTML DOM(Document Object Model)객체는 HTML태그들을 객체화 한것이며 주로, HTML 페이지의 내용과 속성 등을 제어하기 위해 사용됩니다.
• BOM(Browser Object Model)은 브라우저 관련 객체로 브라우저와 관련된 정보를 얻거나 제어할 수 있도록 해줍니다.

브라우저는 HTML페이지를 로드할때 각 태그에 해당하는 DOM객체를 생성합니다. 또한 태그의 포함관계에 따라 DOM객체의 포함관계도 이루어 집니다.

 

DOM객체가 HTML태그의 내용이나 속성 등을 제어하기 위함이었다면, BOM객체는 윈도우와 브라우저의 기능 등을 제어하기 위해 만들어진 객체입니다. BOM객체들의 최상위에는 window객체가 있으며, 모든 DOM객체와 BOM객체의 부모 객체입니다. BOM객체에는 window, screen, location, history, navigator, popup, alert, timing, cookies등이 있습니다.

 

DOM

HTML DOM은 standard object model입니다.

• HTML 원소들을 객체로 표현한 것입니다.
• HTML원소들의 모든 속성들을 표현합니다.
• HTML의 모든 원소들의 메소드들에 접근할 수 있습니다.
• HTML의 모든 이벤트에 접근할 수 있습니다.

다음과 같은 HTML문서가 있으면 오른쪽과 가은 DOM Tree를 구성하게 됩니다.

 

HTML DOM은 어떻게 HTML Element들을 get, change, add, delete하는지 정의하는 것입니다.

 

• createElement()
  • 요소 노드를 생성합니다.
• createTextNode()
  • 텍스트 노드를 생성합니다.
• appendChild()
  • 요소 노드를 body객체에 추가합니다.
• insertBefore()
  • 첫번쨰 인수로 전달한 요소를 두번쨰 인수로 준 요소 앞에 삽ㄷ입한다
• remove()
  • 해당 요소를 삭제한다.
• 속성 전달
  • domElement.src = 100;
  • domElement.setAttribute('src', 100);