DOM

DOM (Document Object Model)이란?

DOM은 HTML 문서를 객체(트리 구조)로 표현한 것 입니다.
자바스크립트는 이 DOM 구조를 통해 HTML 요소를 읽고 수정할 수 있다.

DOM 구성 요소

 

요소	설명
Element Node	HTML 태그 자체 (<div>, <p> 등)
Attribute Node	태그에 포함된 속성 (id, class 등)
Text Node	태그 안의 실제 텍스트 내용

 

예시

<p id="greeting">Hello World</p>

• Element Node: <p>
• Attribute Node: id="greeting"
• Text Node: Hello World

 

JavaScript 클로저 (Closure)

클로저란, 함수가 선언될 당시의 렉시컬 환경(Lexical Environment) 을 기억하고,함수 외부에서도 해당 변수에 접근할 수 있게 해주는 기능이다.

예시

function outer() {
  let count = 0;
  return function inner() {
    count++;
    console.log(count);
  };
}

const counter = outer();
counter(); // 1
counter(); // 2

inner 함수는 outer 함수의 지역 변수 count에 계속 접근할 수 있음 → 클로저

 

Window 객체와 함수 메모리 할당

자바스크립트에서 전역 컨텍스트는 window 객체입니다.
즉, 전역 변수나 함수는 window.변수명, window.함수명 으로 접근할 수 있습니다.

메모리 할당 시점

• 함수 정의 시점 → 메모리 할당 ❌ (코드만 저장)
• 함수 호출 시점 → 메모리 할당 ⭕ (실제 실행됨)

 

window.onload

window.onload는 웹 페이지의 모든 리소스(HTML, CSS, 이미지 등) 가 로드된 후 실행되는 이벤트 핸들러이다.

예시

window.onload = function () {
  // DOM 요소 조작 가능
  console.log("페이지 로드 완료");
};

DOM 트리가 완성되고, 리소스가 모두 로드된 이후에 실행되므로
DOM 조작 코드는 보통 여기 안에서 실행하는 것이 안정적이다.

 

익명 함수 (Anonymous Function)

함수 이름이 없는 함수로, 보통 변수에 저장하거나 콜백 함수로 사용된다.

예시

// 변수에 할당
const greet = function () {
  console.log("Hello");
};

// 이벤트 핸들러
document.onclick = function () {
  console.log("Clicked");
};

// 즉시 실행 함수 (IIFE)
(function () {
  console.log("즉시 실행 함수");
})();

일회성 실행 또는 콜백 함수 전달용으로 많이 사용된다.