자바스크립트는 왜 웹에서 빠질 수 없을까?: <BOM>과 <DOM>

자바스크립트, 왜 쓸까?

자바스크립트는 인터프리터 언어이므로,
C, JAVA에 비해 훨씬 느립니다.
그렇다고 자바스크립트가 Python처럼 연산에 특화된 강력한 함수들을 가지고 있는 것도 아닙니다.

뭔가 특별할 게 없는 언어인데, 왜 지금 프론트엔드 개발자들은 자바스크립트를 배워야만 할까요?

서버를 구축할 때,
JAVA, 자바스크립트, Ruby, Python 등으로 가능합니다.

하지만 만약 우리가 웹 브라우저를 컨트롤하고 싶을 땐, 자바스크립트 밖에 없습니다.
이렇게 웹 브라우저를 컨트롤할 수 있는 요소들이 바로 BOM, DOM, Node입니다.

(+) 자바스크립트의 강점

자바스크립트는 빠르거나 강력한 연산 능력 때문에 사용하는건 아닙니다.

✔️ 브라우저 유일 스크립트 언어로써의 독점성 → 웹을 위한 유일무이한 선택지
✔️ 풍부한 프레임워크와 생태계 (Vue, React, Svelte 등)
✔️ Node.js 기반 서버 사이드까지 커버 가능
✔️ 커뮤니티와 인재 풀

BOM (Browser Object Model)

웹 브라우저의 다양한 기능을 객체처럼 다루는 모델입니다.

window 객체

BOM은 여러 객체가 존재하는데, 그 중 대표적인 객체가 window 객체입니다.

Global Context(전역 공간)이자, 브라우저 창을 나타내는 객체입니다.
- 함수를 실행하는 곳은 window 객체이므로, this = window {...} 입니다.

function testFunc() {
    console.log(this);
}

testFunc(); // Window

하지만 this = window는 브라우저의 전역 컨텍스트에서만 해당합니다.
strict mode나 모듈에서는 다르게 동작합니다.

"use strict";
function testFunc() {
    console.log(this);
}
testFunc(); // undefined

전역 변수나 전역 함수일 경우, window의 프로퍼티처럼 작동하게 됩니다.

var testValue = 'hahaha';

function testFunc() {
    console.log('hahaha');
}

window.testFunc();   // testFunc()도 되지만, window.testFunc()로도 접근 가능합니다.
window.testValue;    // testValue도 되지만, window.testValue로도 접근 가능합니다.

중요 프로퍼티
- innerWidth: 사용자가 볼 수 있는 웹 페이지의 너비
- innerHeight: 사용자가 볼 수 있는 웹 페이지의 높이
- screenX: 모니터에서 웹 브라우저가 x축(위)에서 몇 px에 위치하고 있는지
- screenY: 모니터에서 웹 브라우저가 y축(왼쪽)에서 몇 px에 위치하고 있는지
- scrollBy(a, b): 현재 멈춰있는 좌표 상태에서 x좌표로부터 apx, y좌표로부터 bpx만큼 떨어진 곳으로 스크롤이 이동
- scrollTo(a, b): 웹 브라우저 (0, 0) 기준에서 x좌표로부터 apx, y좌표로부터 bpx만큼 떨어진 곳으로 스크롤이 이동
- ...

screen 객체

사용자 환경의 디스플레이(모니터) 정보를 가지는 객체입니다.
중요 프로퍼티
- availHeight: 브라우저가 사용 가능한 높이
- availWidth: 브라우저가 사용 가능한 너비
- height: 모니터의 높이 크기
- width: 모니터의 너비 크기
- orientation
  - angle: 화면의 기울기
  - onchange: angle이 돌아갈 때 이벤트 결과값 반환
  - type: 'landscape-primary(가로)' | 'portrait-primary(세로)'
    - landscape-primary일 때 angle: 90도

window.matchMedia()

최신 웹 개발에서는 window.screen.orientation 속성 사용이 줄고,
대신 CSS 미디어 쿼리 또는 window.matchMedia() 등을 많이 활용합니다.

따라서 반응형 UI를 구성할 땐 대부분 CSS 미디어 쿼리나 matchMedia()를 통해 orientation을 감지합니다.

location 객체

사용자가 보고 있는 페이지의 URL을 다루는 객체입니다.
중요 프로퍼티
- href: 현재 웹 페이지 주소. location.href="주소" 입력 시, 해당 주소로 이동.
- reload(): 새로고침
- replace(url): 해당 주소로 이동

💡 href vsreplace(url) vsassign(url)

href: 해당 주소로 이동하므로, 뒤로 가기해도 전 페이지로 돌아갈 수 있다.
replace(url): 해당 주소 페이지로 교체해버리므로, 뒤로 가기해도 전 페이지로 돌아갈 수 없다(history 제거).
assign(url): href처럼 이동. 기록이 남는다.

navigator 객체

웹 브라우저 및 브라우저 환경 정보를 가지는 객체입니다.
중요 프로퍼티
- userAgent
  - 현재 브라우저가 어떤 환경에서 구동되고 있는지 정보를 보여준다.
  - 사용자가 어떤 기기에서 접속했는지 알 수 있다.
  - 참고로 userAgent는,
    최근 일부 브라우저에서 privacy 정책에 따라서
    가짜 값을 주거나, navigator.userAgentData로 대체되고 있다.

DOM (Document Object Model)

자바스크립트 Node 객체의 계층화된 트리

<html>, <head>, <body>, <title>, 주석, ... 각 태그들은 Node입니다.
이 노드들을 계층화하여 트리화한 모델이 DOM입니다.

document 노드

웹 페이지마다 존재하는 객체입니다.
웹 페이지 안의 모든 컨텐츠를 다루는 시작점입니다.
중요 프로퍼티
- title: <title>안에 적힌 값
- url
  - document.URL이 아니라, document.location.href로 대체되는 것이 보편적임
- doctype: <!DOCTYPE html>
- documentElement: <html>요소, 즉 루트 요소를 불러옴
- head: <head>요소를 불러옴
- body: <body> 요소를 불러옴
- getElementById: id로 요소를 찾아내는 셀렉터
- createElement: 요소를 만들어내는 함수
- querySelector: getElementById처럼 요소를 찾아내는 셀렉터
- readyState: document의 현재 상태 값을 반환
  - Loading: DOM 트리를 구축하고 있는 단계
  - Interactive: 이미지, CSS, JS와 같은 하위 자원 로딩 중인 단계
  - Complete: 문서와 모든 하위 자원 로딩 완료. window load가 실행되는 단계

window.addEventListener('load', function(){...})

element 노드

웹 페이지 안의 각 html 태그 요소들을 의미합니다.
중요 프로퍼티
- querySelector
- classList: 클래스 리스트 확인 가능
  - classList.contains("test"): 클래스에 해당 클래스 이름이 있는지 여부 확인
- dataset: 요소에서 값을 꺼낼 때 사용
- id: 요소의 id값 반환
- innerHTML: 요소 속 HTML 내용 출력
- parentNode: 부모 노드 반환
- nextSibling: 다음 형제 요소 반환
- previousSibling: 이전 형제 요소 반환

<!-- dataset -->
<body data-mydata="hello">
    ....
</body>

// data-set
document.body.dataset.mydata = "hello"

💡 document.querySelector vs element.querySelector

docuoment.querySelector: 전체에서 요소를 찾음
element.querySelector: 특정 요소 안에서 요소를 찾음
성능적으로는 당연히 element.querySelector가 더 빠르다.

💡 innerHTML vs textContent vs innerText

속성	설명
innerHTML	HTML 포함 텍스트 출력
innerText	사용자에게 보이는 텍스트 (스타일 적용 영향 있음)
textContent	실제 텍스트 콘텐츠 (스타일 무시)

✨ Recap

BOM은 브라우저 기능 자체를 다루는 모델: window, screen, location, navigator 등
DOM은 웹 문서 구조를 트리처럼 표현한 모델: document, element, text, comment 등
웹 개발자는 이 두 가지 모델을 통해 브라우저 제어와 화면 조작을 자유롭게 수행할 수 있습니다.

저작자표시 (새창열림)

'Front-End: Web > JavaScript' 카테고리의 다른 글

당신의 클릭은 어디까지 닿을까? 자바스크립트 <이벤트 흐름> 이야기 (0)	2025.07.15
브라우저는 어떻게 웹페이지를 그릴까? <브라우저 렌더링> (3)	2025.07.14
<호이스팅>이 뭘까? 함수/변수 선언이 끌어올려지는 이유 (0)	2025.07.13
ES6 클래스와 상속 쉽게 이해하기 (1)	2025.07.07
new 키워드 이후의 세계: JS 상속 구조 이해하기 (0)	2025.07.07

타닥타닥

자바스크립트는 왜 웹에서 빠질 수 없을까?: <BOM>과 <DOM>

자바스크립트, 왜 쓸까?

(+) 자바스크립트의 강점

BOM (Browser Object Model)

window 객체

screen 객체

location 객체

navigator 객체

DOM (Document Object Model)

document 노드

element 노드

✨ Recap

'Front-End: Web > JavaScript' 카테고리의 다른 글

티스토리툴바

자바스크립트는 왜 웹에서 빠질 수 없을까?: <BOM>과 <DOM>

자바스크립트, 왜 쓸까?

(+) 자바스크립트의 강점

BOM (Browser Object Model)

window 객체

screen 객체

location 객체

navigator 객체

DOM (Document Object Model)

document 노드

element 노드

✨ Recap

'Front-End: Web > JavaScript' 카테고리의 다른 글

'Front-End: Web/JavaScript' Related Articles

티스토리툴바