FrontEnd/JavaScript

브라우저 환경과 다양한 명세서

valleycho-tech 2025. 2. 21. 18:39

브라우저 환경과 다양한 명세서

[브라우저 환경시 기능들]

 

브라우저는 최상단의 window라는 루트 객체로 이루어져있습니다.

 

문서 객체 모델(DOM)

문서 객체 모델(Document Object Model)은 웹 페이지 내의 모든 콘텐츠를 객체로 나타냅니다. 

 

DOM의 주요 개념

1. 트리 구조

DOM은 문서를 트리 형태의 계층적 구조로 표현합니다.

HTML 문서 구조 예)

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

위 문서는 DOM 트리로 표현하면 다음과 같은 구조를 가집니다.

Document
├── html
    ├── head
    │   └── title
    │       └── "Example"
    └── body
        ├── h1
        │   └── "Hello, World!"
        └── p
            └── "This is a paragraph."

 

2. 노드(Node) 타입

DOM의 각 구성 요소는 노드로 표현되며, 노드에는 여러 가지 타입이 있습니다.

요소 노드(Element Node): HTML 태그(예: <h1>, <p>)
텍스트 노드(Text Node): 태그 안의 텍스트 콘텐츠
속성 노드(Attribute Node): 요소의 속성(예: id, class)
주석 노드(Comment Node): 주석(예: <!-- 주석 -->)

[DOM 노드 상속 관계]

NODE
‘추상’ 클래스로, DOM 노드의 베이스 역할을 합니다. getter 역할을 하는 parentNode, nextSibling, childNodes 등의 주요 트리 탐색 기능을 제공합니다. 

Element
DOM 요소를 위한 베이스 클래스입니다. nextElementSibling,children이나getElementsByTagName,querySelector같이 요소 전용 탐색을 도와주는 프로퍼티나 메서드가 이를 기반으로 합니다.

HTMLElement
HTMLInputElement:  <input> 요소에 대응하는 클래스
HTMLBodyElement: <body> 요소에 대응하는 클래스
HTMLAnchorElement: <a> 요소에 대응하는 클래스
이외에도 다른 클래스가 많은데, 각 태그에 해당하는 클래스는 고유한 프로퍼티와 메서드를 지원합니다.

nodeType
요소 타입을 알고 싶을 때 사용합니다. 요소 노드라면 1을, 텍스트 노드라면3을 반환합니다. 두 타입 외에도 각 노드 타입엔 대응하는 상숫값이 있습니다. 읽기 전용입니다.

nodeName/tagName
요소 노드의 태그 이름을 알아낼 때 사용합니다. XML 모드일 때를 제외하고 태그 이름은 항상 대문자로 변환됩니다. 요소 노드가 아닌 노드에는 nodeName을 사용하면 됩니다. 읽기 전용입니다.

innerHTML
요소 안의 HTML을 알아낼 수 있습니다. 이 프로퍼티를 사용하면 요소 안의 HTML을 수정할 수도 있습니다.

outerHTML
요소의 전체 HTML을 알아낼 수 있습니다. elem.outerHTML에 무언가를 할당해도elem자체는 바뀌지 않습니다. 대신 새로운 HTML이 외부 컨텍스트에서 만들어지고,elem이 삭제된 자리를 채웁니다.

nodeValue/data
요소가 아닌 노드(텍스트, 주석 노드 등)의 내용을 읽을 때 쓰입니다. 두 프로퍼티는 거의 동일하게 동작합니다. 주로 data를 많이 사용하는 편이며 내용을 수정할 때도 이 프로퍼티를 쓸 수 있습니다.

textContent
HTML에서 모든 <태그>를 제외한 텍스트만 읽을 때 사용합니다. 할당 연산을 통해 무언가를 쓸 수도 있는데 이때 태그를 포함한 모든 특수문자는 문자열로 처리됩니다.

hidden
true로 설정하면 CSS에서 display:none을 설정한 것과 동일하게 동작합니다.

 

3. DOM 인터페이스

DOM은 객체 기반 API로, 프로그래머는 다양한 객체와 메서드를 이용해 문서를 조작할 수 있습니다.

주요 메서드

getElementById("id"): 특정 ID를 가진 요소를 가져옵니다.
getElementsByClassName("className"): class 속성값을 기준으로 요소를 찾고, 대응하는 요소를 담은 컬렉션을 반환합니다. 
getElementsByTagName("tagName"): 특정 태그 이름을 가진 요소를 모두 가져옵니다.
querySelector("selector"): CSS 선택자를 이용해 첫 번째로 일치하는 요소를 가져옵니다.
querySelectorAll("selector"): CSS 선택자를 이용해 모든 일치하는 요소를 가져옵니다.
matches(css): 요소 elem이 주어진 CSS 선택자와 일치하는지 여부를 판단해줍니다
closest: 자기 자신을 포함하여 CSS 선택자와 일치하는 가장 가까운 조상 요소를 찾을 수 있게 도와줍니다.

 

요소 객체

innerHTML: 요소의 HTML 콘텐츠를 가져오거나 설정합니다.
textContent: 요소의 텍스트 콘텐츠를 가져오거나 설정합니다.
style: 요소의 CSS 스타일을 수정합니다.

 

이벤트 처리

addEventListener(event, function): 특정 이벤트가 발생했을 때 실행될 함수를 등록합니다.

 

4. DOM의 계층적 접근

DOM은 부모, 자식, 형제 노드를 탐색할 수 있는 다양한 프로퍼티를 제공합니다.

parentNode: 부모 노드
childNodes: 모든 자식 노드(텍스트 노드 포함)를 가져오는 노드 리스트
firstChild, lastChild: 첫 번째 또는 마지막 자식 노드
nextSibling, previousSibling: 형제 노드 탐색

 

DOM 탐색

[DOM 노드 탐색 관계도]

document.documentElement: document를 제외하고 DOM 트리 꼭대기에 있는 <html> 태그
document.body: <body> 요소에 해당하는 DOM 노드로, 자주 쓰이는 노드 중 하나입니다.
document.head: <head> 태그는 document.head로 접근할 수 있습니다.

 

계층적 접근은 트리 구조에서 부모인지 자식, 형제인지 판단하여 접근합니다. 예를들면 아래와 같습니다.

<!DOCTYPE html>
<html>
<head>
  <title>DOM Tree Example</title>
</head>
<body>
  <div id="parent">
    <p id="child1">First Child</p>
    <p id="child2">Second Child</p>
    <p id="child3">Third Child</p>
  </div>
</body>
</html>
Document
└── html
    ├── head
    │   └── title
    │       └── "DOM Tree Example" (텍스트 노드)
    └── body
        └── div (id="parent")
            ├── #text (줄바꿈 또는 공백)
            ├── p (id="child1")
            │   └── "First Child" (텍스트 노드)
            ├── #text (줄바꿈 또는 공백)
            ├── p (id="child2")
            │   └── "Second Child" (텍스트 노드)
            ├── #text (줄바꿈 또는 공백)
            └── p (id="child3")
                └── "Third Child" (텍스트 노드)

p 태그는 div 아래의 있으므로 p의 부모 parent 태그는 div 입니다. 이런 형태로 부모인지 형제인지 판별하면 됩니다.

DOM 프로퍼티

요소 노드(element node)에서 대부분의 표준 HTML 속성(attribute)은 DOM 객체의 프로퍼티(property)가 됩니다.

그러면 DOM 프로퍼티에 접근하는 방법은 무엇이 있을까요?

 

모든 속성은 아래의 메서드를 사용해 접근할 수 있습니다.

elem.hasAttribute(name): 속성 존재 여부 확인
elem.getAttribute(name): 속성값을 가져옴
elem.setAttribute(name, value): 속성값을 변경함
elem.removeAttribute(name): 속성값을 지움

 

예시)

<body>
  <div id="elem" about="Elephant"></div>

  <script>
    alert( elem.getAttribute('About') ); // (1) 'Elephant', 속성 읽기

    elem.setAttribute('Test', 123); // (2) 속성 추가하기

    alert( elem.outerHTML ); // (3) 추가된 속성 확인하기

    for (let attr of elem.attributes) { // (4) 속성 전체 나열하기
      alert( `${attr.name} = ${attr.value}` );
    }
  </script>
</body>
<input id="input" type="checkbox" checked> checkbox

<script>
  alert(input.getAttribute('checked')); // 속성 값: 빈 문자열
  alert(input.checked); // 프로퍼티 값: true
</script>

 

비표준 속성, dataset

비표준 속성은 사용자가 직접 지정한 데이터를 HTML에서 자바스크립트로 넘기고 싶은 경우나 자바스크립트를 사용해 조작할 HTML 요소를 표시하기 위해 사용할 수 있습니다.

<!-- 이름(name) 정보를 보여주는 div라고 표시 -->
<div show-info="name"></div>
<!-- 나이(age) 정보를 보여주는 div라고 표시 -->
<div show-info="age"></div>

<script>
  // 표시한 요소를 찾고, 그 자리에 원하는 정보를 보여주는 코드
  let user = {
    name: "Pete",
    age: 25
  };

  for(let div of document.querySelectorAll('[show-info]')) {
    // 원하는 정보를 필드 값에 입력해 줌
    let field = div.getAttribute('show-info');
    div.innerHTML = user[field]; // Pete가 'name'에, 25가 'age'에 삽입됨
  }
</script>

 

DOM 조작

요소 설명
document.createElement(tag) 태그 이름(tag)을 사용해 새로운 요소 노드를 만듦
document.createTextNode(text) 텍스트를 사용해 새로운 텍스트 노드를 만듦
node.append(노드나 문자열) 노드나 문자열을 node 끝에 삽입
node.prepend(노드나 문자열) 노드나 문자열을 node 맨앞에 삽입
node.before(노드나 문자열) 노드나 문자열을 node 이전에 삽입
node.after(노드나 문자열) 노드나 문자열을 node 다음에 삽입
node.replaceWith(노드나 문자열) node를 새로운 노드나 문자열로 대체
node.remove() 노드 삭제

 

요소 설명
elem.insertAdjacentHTML('beforebegin', '<p>안녕하세요.</p>'); elem바로 앞에 html을 삽입
elem.insertAdjacentHTML('afterbegin', '<p>안녕하세요.</p>'); elem의 첫번째 자식 요소 바로 앞에 html을 삽입
elem.insertAdjacentHTML('beforeend', '<p>안녕하세요.</p>'); elem의 마지막 자식 요소 바로 다음에 html을 삽입
elem.insertAdjacentHTML('afterend', '<p>안녕하세요.</p>'); elem 바로 다음에 html을 삽입
elem.cloneNode(true) elem 요소 복제

 

CSS 객체 모델(CSSOM)

CSS는 스타일 시트를 통해 요소의 디자인(색상, 글꼴, 레이아웃 등)을 정의하는데 브라우저는 스타일 시트를 파싱하여 CSSOM 트리를 생성합니다.

CSS 예)

body {
  font-size: 16px;
  color: black;
}
h1 {
  font-size: 2em;
  color: blue;
}

위의 CSS는 다음과 같은 CSSOM 트리로 표현됩니다

Stylesheet
├── Rule: body
│   ├── Property: font-size (value: 16px)
│   └── Property: color (value: black)
└── Rule: h1
    ├── Property: font-size (value: 2em)
    └── Property: color (value: blue)

DOM은 HTML을 트리로, CSSOM은 CSS를 트리로 구성하여 두 모델은 브라우저에서 결합되어 렌더트리릉 형성합니다.

[렌더 트리 과정]

 

CSSOM과 DOM의 차이점

역할 HTML 문서 구조를 표현 CSS 스타일 시트를 표현
트리 구조 HTML 요소의 계층 구조 CSS 규칙의 계층 구조
주요 객체 및 메서드 document, getElementById, querySelector document.styleSheets, CSSStyleRule
조작 가능성 콘텐츠와 속성 변경 가능 스타일 시트와 규칙 변경 가능

 

 

브라우저 객체 모델(BOM)

브라우저가 제공하는 API와 객체를 통해 브라우저 창과 관련된 기능을 조작할 수 있는 인터페이스를 말합니다. BOM은 HTML이나 CSS에 직접적으로 의존하지 않으며, 웹 페이지의 문서 구조(DOM)와는 별개로 브라우저 자체를 조작할 수 있는 기능을 제공합니다.

BOM은 브라우저와 관련된 정보(예: URL, 브라우저 창, 히스토리, 네비게이션 등)를 다룰 수 있는 다양한 객체와 메서드로 구성되어 있습니다.

Navigator: 브라우저와 운영체제에 대한 정보를 제공
location: 현재 페이지의 URL 정보를 제공하며, 이를 변경하거나 조작할 수 있습니다.
history: 사용자가 브라우저에서 방문한 페이지 기록을 조작할 수 있는 객체입니다.
screen: 디스플레이 화면의 정보를 제공하는 객체입니다.

 

BOM과 DOM의 차이

목적 브라우저 창과 관련된 작업 HTML 문서의 구조와 콘텐츠 조작
최상위 객체 window document
주요 객체 window, navigator, location, history, screen HTML 요소(노드)
표준화 여부 표준화되지 않음 W3C에서 표준화
활용 예시 새 창 열기, URL 변경, 브라우저 정보 확인 텍스트 변경, 요소 추가/삭제