window - 웹 브라우저 최 상위 객체

웹 브라우저 환경을 이야기 할때 window 객체와 document 객체를 이야기 합니다. 그러나  window 객체가 최상위 객체이며, document 객체는 window 객체의 속성으로 포함됩니다. 이를 통해 다음과 같은 계층 구조가 형성됩니다:

 

window 객체

window 객체는 브라우저 창 자체를 나타냅니다. 모든 전역 JavaScript 객체, 함수 및 변수는 window 객체의 속성으로 간주됩니다.

 

브라우저 기능:

window 객체는 타이머 (setTimeout, setInterval), 브라우저 제어 (alert, confirm, prompt), 그리고 위치 및 내비게이션 (location, history)와 같은 브라우저와 관련된 다양한 기능을 제공합니다.

window.alert("Hello, world!");

뷰포트와 화면:

브라우저 창의 크기와 위치, 화면 크기 등을 제어할 수 있습니다.

console.log(window.innerWidth);  // 브라우저 뷰포트의 너비

이벤트 핸들링:

전역 이벤트 핸들러 (onload, onresize, onscroll)를 설정할 수 있습니다.

window.onload = function() {
  console.log("페이지가 로드되었습니다.");
};

 

document 객체

document 객체는 현재 로드된 웹 페이지의 내용을 나타내며, HTML 문서를 조작하고 접근하는 데 사용됩니다.

DOM 접근 및 조작:

document 객체를 통해 HTML 요소를 선택하고 조작할 수 있습니다. 예를 들어, 요소를 추가, 수정, 삭제하는 작업이 가능합니다.

const element = document.getElementById("myElement");
element.textContent = "Hello, world!";

요소(element) 생성:

새로운 HTML 요소를 생성하고 DOM에 추가할 수 있습니다.

const newElement = document.createElement("div");
newElement.textContent = "새로운 요소";
document.body.appendChild(newElement);

이벤트 핸들링:

특정 요소에 이벤트 리스너를 추가할 수 있습니다.

document.getElementById("myButton").addEventListener("click", function() {
  alert("버튼이 클릭되었습니다.");
});

HTML 콘텐츠 읽기 및 쓰기:

innerHTML, textContent 등의 속성을 사용하여 HTML 콘텐츠를 읽고 쓸 수 있습니다.

document.body.innerHTML = "<h1>새로운 콘텐츠</h1>";