BOM DOM에 대한 이해

공부하면서 BOM DOM과 같은 개념에 대한 이해가 깊지 않은 것 같아 정리해 본다.

 

DOM(문서 객체 모델)이란?

: 객체 지향 모델로서 구조화된 문서를 표현하는 형식이다.

모든 요소들과의 관계를 부자관계로 표현할 수 있는 트리 구조로 구성한 것.

자바스크립트를 통해 동적으로 변경할 수 있다.

 

이미지 제어를 위해 이미지 태그를 가져올 수 있다.

'getElememtByTagname'은 document 객체에 있는 메서드이다.

해당 메서드를 통해 이미지를 제어할 수 있다.

 

<script>

var images = document.getElementsByTagName('img');

</script>

**여기서 getElement 's' 복수형으로 쓰여있는 것은 모든 img태그를 선택한다는 의미이다.

리턴값은 배열이 된다.

 

DOM은 Window객체의 하위객체이기 때문에 개발자 도구에서 Window.document 로 접근이 가능하다.

생략하여 document로도 접근이 가능하다. 

 

BOM(브라우저 객체 모델)이란?

 

:자바스크립트가 브라우저와 소통하기 위해 만들어진 모델이다.

Window객체를 통해 접근이 가능하다.

 

navigator: 브라우저 명과 버전 정보를 속성으로 가짐

window: 최상위 객체고, 각 프레임 별로 하나씩 존재.

document: 현재 문서에 대한 정보

location : 현재 URL에 대한 정보. 브라우저에서 사용ㅈ가 요청하는 URL

history: 현재의 브라우저가 접근했던 URL history :뒤로가기할 때 볼 수 있음.

screen: 브라우저의 외부환경에 대한 정보를 제공.