[JS] 08. 윈도우 객체, BOM과 DOM

블랑·2023년 3월 14일
0

[FE] - HTML/CSS/JavaScript

목록 보기
12/14

Web Browser와 Window 객체

Window 객체는 웹 브라우저를 관리한다.

Window 객체는 웹 브라우저에서 작동하는 JS의 최상위 객체라고 할 수 있다.
Window 객체에는 브라우저와 관련된 여러 객체와 속성, 함수가 존재하며, 여기에는 JavaScript에서 기본적으로 제공하는 프로퍼티와 함수 역시도 존재한다.

또한 BOM으로 불리기도 한다. (Browser Object Model)

alert, confirm, prompt

대표적인 다음 객체의 예시이다.

  1. alert() : 브라우저의 알림 창
  2. confirm() : 브라우저의 확인/취소 선택 창.
  3. prompt() : 브라우저의 입력 창.

Navigator 객체는 Window 객체의 프로퍼티 중 하나로, 현재 브라우저의 정보를 제공한다.

< 사용 예시 >
console.log("Browser CodeName : " + navigator.appCodeName);
console.log("Browser Name : " + navigator.appName);
console.log("Browser Version : " + navigator.appVersion);
console.log("Browser Enabled : " + navigator.cookieEnabled);
console.log("Platform : " + navigator.platform);
console.log("User-Agent header : " + navigator.userAgent);

location, history

location : 현재 페이지 주소와 관련된 정보들을 제공하는 객체.
history : 브라우저의 페이지 이력을 담는 객체.

location

location은 현재 브라우저의 URL 정보를 제공하는 객체이다.
해당 객체를 사용하면 웹 페이지의 URL을 변경하거나, URL의 각 부분을 액세스하고 수정할 수 있다.
예를 들어, location.href 속성을 사용하여 현재 URL을 가져오거나 변경할 수 있다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>location 객체 예시</title>
  </head>
  <body>
    <h1>location 객체 예시</h1>
    <p id="current-url"></p>
    <button onclick="changeUrl()">URL 변경</button>
    <script>
      function changeUrl() {
        // 현재 URL에서 "example" 문자열을 "new-example"으로 변경합니다.
        location.href = location.href.replace("example", "new-example");
      }
      // 현재 URL을 출력합니다.
      document.getElementById("current-url").textContent = "현재 URL: " + location.href;
    </script>
  </body>
</html>

history

history는 브라우저의 탐색 히스토리 정보를 제공하는 객체이다.
해당 객체를 사용하면 이전에 방문한 페이지로 이동하거나, 다시 앞으로 이동하는 등의 탐색 기능을 구현할 수 있다.
예를 들어, history.back() 메소드를 사용하여 이전 페이지로 이동할 수 있다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>history 객체 예시</title>
  </head>
  <body>
    <h1>history 객체 예시</h1>
    <button onclick="goBack()">이전 페이지로 이동</button>
    <button onclick="goForward()">다음 페이지로 이동</button>
    <script>
      function goBack() {
        // 이전 페이지로 이동합니다.
        history.back();
      }
      function goForward() {
        // 다음 페이지로 이동합니다.
        history.forward();
      }
    </script>
  </body>
</html>

새 창 열고 닫기

window 객체의 open(), close() 객체를 사용하여 새 창을 열 수 있다.

window.open("http://example.com", "example-window", "width=500,height=500");
window.close();

HTML과 DOM

DOM의 정의

DOM(Document Object Model)은 HTML과 XML 문서의 구조를 정의하는 API를 제공한다.

DOM은 문서의 계층 구조를 객체 모델로 표현한다.

예를 들어, HTML 문서에서 <h1> 제목 태그는 DOM에서 HTMLHeadingElement 객체로 표현되고, class 속성은 HTMLHeadingElement 객체의 className 속성으로 표현된다.

HTML 문서에서는 각각의 요소(element)가 다른 요소들을 포함할 수 있으며, 이렇게 요소들이 계층 구조를 이루게 된다. 이 계층 구조는 DOM에서도 동일하게 유지된다.

<!DOCTYPE html>
<html>
  <head>
    <title>DOM Example</title>
  </head>
  <body>
    <h1>Welcome to DOM Example</h1>
    <p>DOM 설명 예시</p>
    <ul>
      <li>First item</li>
      <li>Second item</li>
      <li>Third item</li>
    </ul>
  </body>
</html>

--------------- 이러한 계층 구조를 DOM으로 표현하면 다음과 같다.

Document
└── html
    ├── head
    │   └── title
    ├── body
    │   ├── h1
    │   ├── p
    │   └── ul
    │       ├── li
    │       ├── li
    │       └── li
    └──

즉, DOM 구조는 HTML의 계층 구조가 그대로 유지된다.

왜 쓰는가?

DOM은 웹 개발에서 중요한 역할을 하며,
웹 애플리케이션의 동적인 기능을 구현하는 데에 널리 사용된다. 그 이유는?

HTML은 웹 페이지의 구조와 내용을 표현하는 마크업 언어이지만, 웹 페이지를 동적으로 제어하고 수정하기 위해서는 JavaScript와 같은 스크립트 언어를 사용해야 한다.
이때, DOM을 사용해야 스크립트 언어에서 웹 페이지의 요소들을 객체로 다룰 수 있게 된다.

예를 들어, JavaScript를 사용하여 DOM 객체를 조작하면 웹 페이지의 내용을 변경하거나, 이벤트 처리, 애니메이션 등의 동작을 추가할 수 있다.

문서 객체 만들기

  1. 문서 객체는 text node를 가지는 객체와 가지지 않는 객체로 나뉘어진다.
  • createElement(tagName) : element node 생성
  • createTextNode(text) : text node를 생성
  • appendChild(node) : 객체에 node를 child로 추가
  1. 문서 속성을 설정하는 함수는 다음과 같다.
  • setAttribute(name, value) : 객체 속성을 지정
  • getAttribute(name) : 속성 가져오기
  1. 객체 가져오기
  • getElementById(id) : 태그의 id속성이 일치하는 요소의 객체를 얻는다.

위와 달리, 아래 메서드는 각각 일치하는 요소를 배열로 얻어온다.

  • getElementsByClassName(classname)
  • getElementsByTagName(tagname)
  • getElementsByName(name)

쿼리 관련 메서드는 다음과 같다.

  • querySelector(selector) : selector에 일치하는 첫번째 element 객체 얻기.
  • querySelectorAll(selector) : selector에 일치하는 모든 element 배열 얻기.
1. 문서 객체 만들기 : "Hello, World!"라는 텍스트를 포함한 제목 요소를 생성하고, body 요소에 추가.

var heading = document.createElement("h1");
var text = document.createTextNode("Hello, World!");
heading.appendChild(text);
document.body.appendChild(heading);



2. 객체의 속성 설정하기

//가장 간단한 방법이긴 하나, 웹 표준과 브라우저가 지원하는 태그 속성만 쓸 수 있음. 이런 제한 없이 쓰려면? 
var profile = document.createElement("img"); //생성
profile.src = "profile.png";
profile.width = 150;
profile.height = 200;

// setAttribute를 사용하여 속성을 지정할 수 있다.
profile.setAttribute("src", "profile.png");
profile.setAttribute("width", 150);
profile.setAttribute("height", 200);
profile.setAttribute("data-content", "myPicture");

// id가 "myLink"인 링크 요소의 href 속성을 "http://www.example.com"으로 변경하는 예시
var link = document.getElementById("myLink");
link.setAttribute("href", "http://www.example.com");



3. 정리 : setAttribute로 사용자가 원하는 속성을 지정하고, getAttribute로 받아올 수 있다. 
다만 이런 속성의 경우 HTML 규약에 따르지 않는 설정은 웹에서 적용되지 않을 수 있으니 주의할 것.
아래는 getAttribute와 setAttribute의 사용 예시이다.

var el = document.getElementById("myElement"); //저장
el.setAttribute("my-custom-attribute", "custom value");

var el = document.getElementById("myElement");
var attrValue = el.getAttribute("my-custom-attribute"); //가져오기
console.log(attrValue); // "custom value"

profile
안녕하세요.

0개의 댓글