JavaScript · 브라우저 (Window · BOM · DOM)

🌐

한 줄 소개 — 브라우저에서 JavaScript 가 무엇을 어떻게 제어하는지 정리한 노트다. 모든 것의 뿌리인 전역 객체 Window 부터, 브라우저를 제어하는 BOM, 문서를 제어하는 DOM(트리·상속·찾기/조작 2단계), 그리고 이벤트·렌더링까지 — "JS 가 페이지를 어떻게 주무르는가"를 한 줄기로 본다.

1 · HTML 에서 JavaScript 실행하기

브라우저가 JS 를 인식하는 방법은 세 가지다. onclick 같은 HTML 속성은 HTML 문법, 그 값의 alert(...) 는 JS 문법 — 이미 약속된 연결이다.

// ① inline — HTML 속성에 직접 (정보와 제어가 섞여 유지보수 어려움)
<input type="button" onclick="alert('Hello world')" value="Hello World">

// ② 외부 파일 — 권장 (defer 로 HTML 파싱과 병렬 로드 후 실행)
<script src="main.js" defer></script>

// ③ 내부 스크립트
<script> /* JS code */ </script>

2 · 전역 객체 — Window

Window 는 브라우저의 전역 객체 다. DOM · BOM · JS 내장 객체, 그리고 내가 만든 전역 변수·함수까지 전부 Window 에 소속된다. 콘솔에 window 를 쳐 보면 그 아래 document·navigator 등이 보인다.

a = 1;                  // 전역 변수 선언
console.log(a);         // 1
console.log(window.a);  // 1  ← 사실 window 의 property 였다!

// 전역 변수/함수를 만든다 = window 의 property/method 를 만든다는 의미
function hello() {}     // === window.hello

DOM·BOM·JS 내장 객체와 내가 만든 전역 변수·함수까지 모두 window 안에 있다

3 · BOM — Browser Object Model

BOM 은 브라우저(창)를 제어 하기 위해 브라우저가 제공하는 객체들이다. 사용자와의 통신, 주소(URL), 브라우저 정보, 창 제어 등을 다룬다.

// 사용자와 통신
alert("저장되었습니다");
const ok = confirm("삭제할까요?");      // true / false
const name = prompt("이름?");           // 입력값

// location — 현재 URL 제어
console.log(location.href);             // 현재 주소
location.href = "https://taylee.dev";   // 페이지 이동
location.reload();                       // 새로고침

// navigator — 브라우저/기기 정보
console.log(navigator.userAgent);

// 창 제어
window.open("https://...", "_blank");
window.scrollTo(0, 0);

4 · DOM — Document Object Model

브라우저는 HTML 의 각 태그를 객체로 만들어 트리(DOM Tree)로 보관한다. JS 로 문서를 제어하는 건 늘 두 단계 — ① 제어 대상을 찾고 → ② 조작 한다.

모든 태그 객체(HTMLLIElement·HTMLAnchorElement …)는 HTMLElement 를 상속하고, 그 위로 Element → Node → Object 로 이어진다. 특히 Node 는 모든 DOM 객체의 시조라서, 서로 다른 가지의 노드끼리도 부모·자식·형제 관계를 탐색할 수 있다.

Object → Node → Element → HTMLElement → 각 태그 객체. document·Element·Text 모두 Node 의 후손이다

5 · Step 1 — 제어 대상 찾기

먼저 조작할 Element 를 이름(태그) 또는 식별자(id·class) 로 찾는다. 찾은 결과가 하나인지(Element) 여럿인지(HTMLCollection/NodeList) 구분하는 게 중요하다.

document.getElementById("title");          // id 로 1개
document.getElementsByClassName("item");    // class 로 여러 개 (HTMLCollection)
document.getElementsByTagName("li");        // 태그로 여러 개
document.querySelector(".item");            // CSS 선택자로 첫 1개
document.querySelectorAll(".item");         // CSS 선택자로 전부 (NodeList)

6 · Step 2 — 조작 & Node API

찾았으면 속성·내용·스타일을 바꾸거나, 노드를 만들고 붙이고 지운다. Node 객체는 부모·자식·형제 관계 탐색 API 와 추가·삭제·교체 API 를 제공한다.

const el = document.querySelector("#title");

// 속성 / 내용 / 스타일 조작
el.setAttribute("class", "active");
el.textContent = "안녕하세요";
el.style.color = "crimson";

// 노드 생성·추가·삭제 (document = 생성, Node = 추가/삭제)
const li = document.createElement("li");
li.textContent = "JavaScript";
const ul = document.querySelector("ul");
ul.appendChild(li);          // 자식으로 추가
ul.removeChild(ul.firstChild);

// 관계 탐색 (Node API)
el.parentNode; el.children; el.nextElementSibling;
document.childNodes;         // [<!DOCTYPE html>, <html>…]

7 · 이벤트 & 렌더링

사용자 행동(클릭·입력 등)에 반응하려면 Element 에 이벤트 핸들러 를 등록한다. 그리고 브라우저가 화면을 그리는 렌더링 과정을 알면 "왜 DOM 조작이 비싼가"가 보인다.

const btn = document.querySelector("#save");
btn.addEventListener("click", function (e) {
    console.log("clicked", e.target);
    document.querySelector("#msg").textContent = "저장됨";
});

HTML→DOM, CSS→CSSOM 을 합쳐 Render Tree → Layout → Paint. 잦은 DOM 변경은 리플로우를 유발한다

📓 2022년 제가 웹 프론트엔드를 공부하며 브라우저의 JavaScript(Window·BOM·DOM)를 직접 정리한 노트입니다 · 원본 Notion 에서 보기 ↗