Part 13. 브라우저 기본 객체 개요

브라우저가 제공하는 기본 객체가 있습니다. 

기본 객체  window     document    navigator 등은 각각 브라우저 윈도,
HTML 문서(DOM), 인터넷 탐색의 역할을 대신합니다. 

 

개발자는 각각의 객체들이 제공하는 값과 기능을 이용하여 

필요한 기능을 Javascript로 작성할 수 있습니다.

 

 

 

window

윈도우 객체는 전역 객체라 불리는 최상위 객체입니다. 
document, navigator 객체는 모두 window 객체의 하위 속성으로 존재합니다.

 

윈도우 크기를 변수에 담아냈습니다 :

전역 객체에 속성을 생성한 예제입니다 :

 

전역 객체에 속성을 console로 확인한 값입니다 :

 

 

함수 밖에서 전역 공간 var로 만들어진 변수와 함수는 모두 window의 속성으로 생성됩니다.
그와 달리 let, const로 생성된 변수는 window의 속성으로 생성되지 않고 window 객체와 독립적인 전역 공간에 생성됩니다.

 

이는 변수에 값을 언제든 넣을 수 있는 Javascript의 특성상 전역 공간이 오염될 수 있는 혼란한 상황을 방지하기 위해

새롭게 제안된 방법이란 것을 알 수 있습니다.

 

 

 

 

 

---

 

 

 

 

document - DOM(Document Object Model)

HTML 문서를 브라우저가 읽어 처리 가능한 방식으로 해석한 후 객체로 변환합니다.
이 객체의 이름은 document 이며 HTML을 탐색, 생성, 수정하기 위한 수많은 기능을 제공합니다.

 

 

- getElementBy, getElementsBy 

 

getElementBy html 코드입니다 :

 

getElementBy javascript 코드입니다 :

 

첫 번째 console.log의 값으로는 '안녕하세요'가 나타납니다.
그리고 두 번째는 Hello?라는 문자가 console에 찍힐 것입니다.

 

 

 

- createElement

 

동적으로 HTML 요소를 생성할 수 있습니다. 

모든 HTML 요소를 Javascript에서 DOM API를 이용하여 생성, 수정, 삭제할 수 있습니다.
관련된 모든 기능을 DOM API가 제공합니다.

createElement는 동적으로 새로운 Element 노드를 생성합니다.

 

 

createElement html 코드입니다 :

 

createElement css 코드입니다 :

 

createElement javascript 코드입니다 :

 

 

변수 box로 div를 생성해서 box의 classsName을 box로 지정하고
box.style.background 색을 yellow로 지정한 후
container 안에 box를 생성해줍니다.

 

 

해당 코드의 결과로 나타난 UI이 입니다 :

 

 

 

 

---

 

 

 

 

createElement의 예제로 색이 다른 5개의 상자를 만들어보겠습니다.

 

box만들기 예제 1 :

 

box 만들기 예제 1

 

예제 1의 결과로 나타난 UI 입니다 :

 

함수를 통해 box를 5개 추가했습니다.

 

 

 

box 만들기 예제 2 :

 

box 만들기 예제 2 :

 

예제 2의 결과로 나타난 UI 입니다 :

 

두 번째 예제는 배열과 객체를 이용해 BOX를 생성했습니다.
또한 for문을 통해 반복적으로 만들어지도록 했습니다.

 

 

 

 

 

참고자료

{ Code } Playground