[JavaScript] BOM과 DOM: HTML 계층 구조
🍁BOM과 DOM
CSS는 태그를 조작할 때 선택자(HTML 태그 검색)로 접근을 하고 나서 조작했다.
마찬가지로 JavaScript에서도 HTML 태그를 검색하여 접근한 뒤에 조작한다.
이는 HTML 계층 구조를 활용하여 JavaScript로 탐색하는, 즉 태그를 찾는 방법에 대한 얘기이다.
BOM이란?
자바스크립트 BOM (브라우저 객체 모델)은 브라우저의 창, 프레임 등의 브라우저의 요소를 객체로서 제어할 수 있게 해준다.
BOM으로 브라우저와 상호작용하여 브라우저의 창 크기, 위치, 히스토리, 쿠키, 알림 등을 다룰 수 있다.
BOM 객체로는 window, screen, location, history, navigator, document 등이 있으며, 이러한 객체들을 사용하여 웹 페이지의 동적인 기능을 개발한다.
BOM (Browser Object Model)
BOM(Browser Object Model)에 대해서는 위 그림을 참고하도록 한다.
BOM은 브라우저마다 차이가 있으며, frames, navigator 등 현재는 사장된 기능들도 있다.
🍂HTML 계층 구조
- Tree 구조
HTML은 부모와 자식 구조의 Tree 구조를 이루고 있다.
가장 꼭대기에는 HTML 태그(루트 태그, 루트 엘리먼트)가 있다.
Tree 구조를 만드는 방법 중 하나가 BOM이고, 다른 하나가 DOM이다.
1. BOM
초창기 모델로, 현재까지도 계속 사용한다.
BOM은 선택적 모델로, 계층 구조에 일부 태그만 포함되어 있다.
이미지, 링크, 폼태그만을 조작할 수 있으며, 계층 구조에 포함되지 않는 태그는 조작할 수 없다.
태그의 name을 사용해서 접근하며, id와 class는 인식할 수 없다.
2. DOM
BOM에서 발전된 모델로, 현재까지도 계속 사용한다.
DOM은 전역 모델로, 계층 구조에 모든 태그가 포함되어 있다.
모든 태그를 조작할 수 있으며, name, id, class 모두 인식한다.
계층 구조 접근
- window: 윈도우 객체 > 현재 문서가 실행되는 브라우저 창을 참조한다.
- document: 문서 객체 > 현재 문서를 참조한다.
태그 검색
<input id="search" class="search-input-style">document.getElementsByTagName('input'); //tag로 찾기
document.getElementById('search'); //id로 찾기
document.getElementsByClassName('search-input-style'); //className으로 찾기
document.querySelector('.search-input-style') //cssSelector로 찾기 (첫 번째 요소)
document.querySelectorAll('.search-input-style') //cssSelector로 찾기 (모든 요소)방식에 따라서 찾는 해당 요소를 모두 선택하게 된다.
태그 조작
window.document.form1.txt1.value = 'Isaac';
window
window.close();윈도우 객체(window)는 가장 상위의 오브젝트로, 현재 문서가 실행되는 브라우저의 창을 참조한다.
실행 문서를 보고 있는 실행 창이므로 위 코드를 실행하면 창이 꺼진다.
document
<body>
<h1 name="title">BOM (Browser Object Model)</h1>
<form name="form1">
<input type="text" name="txt1">
</form>
<script>
window.document.form1.txt1.value = 'Isaac';
</script>
</body>
문서 객체(document)는 HTML 문서를 전체적으로 관리한다.
window나 document는 유일하기 때문에 예약어로 접근할 수 있지만, form, image 등은 유일하지 않기 때문에 각각의 이름이 필요하다.
BOM 모음
window 객체
[JavaScript] BOM: window 객체
🍁window 객체 window.open(URL, name, options); URL: 새 창의 URL name: 새 창의 이름 options: 새 창 옵션들 window로 창을 새로 만들었을 때 만들어진 창을 자식창이라고 한다. 옵션들 사이는 띄어쓰기를 해도 되
isaac-christian.tistory.com
screen 객체
[JavaScript] BOM: screen 객체
🍁screen 객체 screen 객체는 화면 정보를 제공한다. availWidth, availHeight console.log(window.screen.availWidth); console.log(window.screen.availHeight); 위 숫자는 현재 보고 있는 모니터의 해상도를 의미한다. 내가 만
isaac-christian.tistory.com
location 객체
[JavaScript] BOM: location 객체
🍁location 객체 location 객체는 현재 창의 페이지 주소(URL)와 관련된 객체이다. 읽기 (현재 페이지) console.log(window.location.href); 읽기를 하면 현재 페이지의 주소를 읽어온다. 쓰기 (페이지 이동) window
isaac-christian.tistory.com
history 객체
[JavaScript] BOM: history 객체
🍁history 객체 history 객체에는 브라우저의 발자취가 남아 있다.👣 발자취는 브라우저가 방문한 탐색 기록을 의미한다. 그리고 이 탐색 기록을 접근하는 게 history 객체이다. 탐색 기록이 필요한
isaac-christian.tistory.com
