Javascript 시작하기 - 객체

자바스크립트에서 window, document, DOM(Document Object Model)은 웹 페이지와 상호작용하는 데 중요한 역할을 하는 개념입니다. 각각의 역할과 기능을 자세히 설명하고, 추가로 중요한 객체들에 대해 알아보겠습니다.

1. window 객체

정의 및 역할

window 객체는 브라우저의 창 또는 탭을 나타내는 전역 객체입니다. 모든 자바스크립트 객체, 함수, 변수는 window 객체의 프로퍼티로 간주됩니다.

주요 기능 및 속성

• 전역 변수와 함수: 전역으로 선언된 변수와 함수는 window 객체의 프로퍼티로 자동으로 추가됩니다.

  var globalVar = "I'm a global variable";
  function globalFunction() {
    console.log("I'm a global function");
  }
  
  console.log(window.globalVar);  // "I'm a global variable"
  window.globalFunction();        // "I'm a global function"

• DOM과 BOM: window 객체는 DOM(Document Object Model)과 BOM(Browser Object Model)의 최상위 객체입니다. DOM은 문서의 구조를, BOM은 브라우저와의 상호작용을 다룹니다.

• 타이머 함수: setTimeout, setInterval 같은 타이머 함수들이 포함되어 있습니다.

  window.setTimeout(() => {
    console.log("This message is displayed after 2 seconds");
  }, 2000);

• 크기 및 위치: 브라우저 창의 크기와 위치를 제어할 수 있는 속성과 메서드들이 포함되어 있습니다.

  console.log(window.innerWidth);  // 브라우저 창의 내부 너비
  console.log(window.innerHeight); // 브라우저 창의 내부 높이

• 알림: alert, confirm, prompt와 같은 사용자 알림 기능이 포함되어 있습니다.

  window.alert("This is an alert box!");

2. document 객체

정의 및 역할

document 객체는 현재 웹 페이지를 나타내며, HTML 문서의 엔트리 포인트 역할을 합니다. document 객체를 통해 HTML 요소에 접근하고 조작할 수 있습니다.

주요 기능 및 속성

• HTML 요소 접근: 다양한 메서드를 통해 HTML 요소에 접근할 수 있습니다.

  const elementById = document.getElementById('myElement');  // ID로 요소 접근
  const elementsByClassName = document.getElementsByClassName('myClass');  // 클래스 이름으로 요소들 접근
  const elementsByTagName = document.getElementsByTagName('div');  // 태그 이름으로 요소들 접근
  const elementByQuery = document.querySelector('.myClass');  // CSS 선택자로 첫 번째 요소 접근
  const elementsByQueryAll = document.querySelectorAll('.myClass');  // CSS 선택자로 모든 요소들 접근

• 문서 정보: 문서의 타이틀, URL 등 문서 관련 정보를 가져올 수 있습니다.

  console.log(document.title);  // 현재 문서의 타이틀
  console.log(document.URL);    // 현재 문서의 URL

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

  const newDiv = document.createElement('div');  // 새로운 div 요소 생성
  newDiv.textContent = "Hello, World!";
  document.body.appendChild(newDiv);  // 새로운 요소를 문서의 body에 추가

• 이벤트 리스너: HTML 요소에 이벤트 리스너를 추가하여 사용자 상호작용을 처리할 수 있습니다.

  document.getElementById('myButton').addEventListener('click', function() {
    alert('Button was clicked!');
  });

3. DOM (Document Object Model)

정의 및 역할

DOM은 HTML 또는 XML 문서의 프로그래밍 인터페이스로, 문서의 구조를 트리 형태로 표현합니다. DOM을 통해 자바스크립트는 문서의 내용과 구조를 동적으로 변경할 수 있습니다.

주요 개념

• 노드(Node): DOM은 트리 구조로, 각 요소는 노드로 표현됩니다. 주요 노드 타입으로는 요소 노드(Element node), 텍스트 노드(Text node), 주석 노드(Comment node) 등이 있습니다.

  const elementNode = document.createElement('div');  // 요소 노드
  const textNode = document.createTextNode('Hello, World!');  // 텍스트 노드
  elementNode.appendChild(textNode);  // 요소 노드에 텍스트 노드를 자식으로 추가

• 트리 구조 탐색: 부모, 자식, 형제 노드를 탐색할 수 있는 다양한 속성이 있습니다.

  const parent = elementNode.parentNode;  // 부모 노드
  const children = elementNode.childNodes;  // 자식 노드들
  const firstChild = elementNode.firstChild;  // 첫 번째 자식 노드
  const nextSibling = elementNode.nextSibling;  // 다음 형제 노드

4. 추가 객체

navigator

• 정의 및 역할: navigator 객체는 브라우저의 상태와 정보를 나타내며, 브라우저가 제공하는 기능들에 접근할 수 있습니다.
• 주요 속성 및 메서드:

  console.log(navigator.userAgent);  // 브라우저의 사용자 에이전트 정보
  console.log(navigator.language);  // 브라우저의 언어 설정
  console.log(navigator.onLine);  // 브라우저의 온라인 상태 (true 또는 false)

location

• 정의 및 역할: location 객체는 현재 문서의 URL 정보를 나타내며, 브라우저의 URL을 변경하거나 페이지를 리디렉션할 수 있습니다.
• 주요 속성 및 메서드:

  console.log(location.href);  // 전체 URL
  location.href = 'https://www.example.com';  // URL 변경 및 페이지 이동
  console.log(location.hostname);  // 호스트 이름 (예: www.example.com)
  console.log(location.pathname);  // 경로 (예: /path/to/page)
  location.reload();  // 현재 페이지를 새로고침

history

• 정의 및 역할: history 객체는 사용자가 방문한 브라우저 세션의 기록을 나타내며, 사용자가 방문한 페이지로 이동할 수 있는 기능을 제공합니다.
• 주요 속성 및 메서드:

  history.back();  // 이전 페이지로 이동
  history.forward();  // 다음 페이지로 이동
  history.go(-2);  // 두 페이지 뒤로 이동
  console.log(history.length);  // 방문한 페이지 수

이와 같은 객체들을 이해하고 활용하면, 자바스크립트를 통해 웹 페이지와 상호작용하는 데 있어 강력한 기능을 사용할 수 있습니다.