늘 겸손하게

JavaScript - Browser: Document (1-1, 1-2) 본문

Programming/JavaScript

JavaScript - Browser: Document (1-1, 1-2)

besforyou999 2022. 8. 24. 17:16

내용

1-1 Browser environment, specs

1-2 DOM tree

 

 

자바스크립트 언어는 웹 브라우저를 위해 개발되었지만 현재는 다양한 플랫폼과 다양한 용도로 사용됩니다.

 

플랫폼은 자바스크립트를 실행 가능한 브라우저, 웹 서버, 다른 'host' 일 수 있습니다. 각각의 플랫폼 모두 플랫폼에 맞는 기능을 제공합니다. 자바스크립트는 그것을 'host environment'라고 부릅니다.

 

 

브라우저에는 "window"라고 불리는 "root" 오브젝트가 존재,

 

이 "root" 오브젝트는 두 가지 역할이 있습니다.

 

1. 자바스크립트 코드를 위한 전역 오브젝트

2. "브라우저 창"을 표현하고 "브라우저 창"을 제어하는 메소드 제공

 

<예시>

 

function sayHi() {
    alert("Hello");
}

window.sayHi();

 

위 코드를 실행할 경우 Hello가 포함된 alert이 브라우저에서 실행된다.

왜냐하면 전역함수는 전역 객체의 메소드기 때문

 

 

DOM(Document Object Model)

 

모든 페이지 컨텐츠를 수정될 수 있는 페이지 객체로 표현합니다.

 

 

DOM tree

 

HTML 문서의 뼈대는 '태그'입니다.

 

DOM에 따르면 모든 HTML 태그는 객체이고 중첩 태그는 여러 태그들을 감싸고 있는 태그가 '부모' 태그, 감싸여진 태그들은 '자식' 태그입니다. 태그 내부의 텍스트 또한 객체입니다.

 

모든 객체는 JavaScript를 통해 접근가능하고 페이지를 수정하는데 사용할 수 있습니다.

 

예로, "document.body"는 HTML의 <body> 태그를 표현하는 객체입니다.

 

아래의 코드는 <body>를 3초동안 빨갛게 만듭니다.

 

document.body.style.background = 'red';

setTimeout(() => document.body.style.background = '', 3000);

 

DOM을 수정하는 다양한 방법을 배워봅시다. 먼저, DOM의 구조를 알아야합니다.

 

 

DOM의 예시

 

<!DOCTYPE HTML>
<html>
<head>
  <title>About elk</title>
</head>
<body>
  The truth about elk
</body>
</html>

 

DOM은 HTML을 태그의 트리 구조로 표현합니다. 위 코드는 아래와 같이 표현됩니다.

 

 

모든 트리 노드는 객체입니다.

 

태그는 요소 노드이고 트리 구조입니다. <html>이 루트 노드, <head>와 <body>가 자식 노드입니다.

 

 

Autocorrection

 

만약 브라우저가 잘못된 HTML을 만나면 DOM을 생성할때 자동으로 고칩니다.

 

예로, 최상위 태그는 항상 <html>이지만 문서에 존재하지 않으면 DOM을 생성할때 같이 포함시킵니다. <body> 태그 또한 마찬가지입니다.

 

 

다른 노드 타입

 

요소와 텍스트 노드가 아닌 다른 노드 타입이 존재합니다.

 

대표적으로 주석 노드가 있습니다.

 

주석 노드는 DOM에 추가될 필요가 없을것 같지만 HTML에 무언가가 추가되면 반드시 DOM tree에 포함되어야한다는 규칙이 존재합니다.

 

총 12개의 노드 타입이 존재하지만 실제로 많이 사용되는 노드 타입은 4가지입니다.

 

1. document - DOM의 "entry point"

2. element nodes - HTML 태그

3. text nodes - 텍스트

4. comment - 주석 노드. 출력되지는 않지만 정보를 포함시킬 수 있고 JS로 DOM을 통해 읽을 수 있습니다.

 

 

출처

https://javascript.info/

 

The Modern JavaScript Tutorial

We want to make this open-source project available for people all around the world. Help to translate the content of this tutorial to your language!

javascript.info

 

 

'Programming > JavaScript' 카테고리의 다른 글

JavaScript - 함수 선언문, 함수 표현식 호이스팅  (0) 2023.05.30
JavaScript - 문자열  (0) 2023.05.28
JavaScript - RequestAnimationFrame()  (0) 2022.08.22
JavaScript - this 키워드  (0) 2022.08.22
JavaScript - 깊은 복사, 얕은 복사  (0) 2022.08.22
'Programming/JavaScript' Related Articles more