BOM
브라우저와 관련된 객체들의 집합을 브라우저 객체 모델(BOM:Browser object Model)이라고 부르며, Browser와 관련된 기능들을 구성합니다. DOM은 이BOM중에 하나입니다
BOM에는 web문서 영역을 제어 할수있는 객체가 있고 그 객체가 document 입니다
(document는 DOM tree의 최상위 객체이다.)
BOM의 최상위 객체는 Window라는 객체입니다. DOM은 이 Window 객체의 하위 객체이기도 합니다
DOM은 Document Object Model의 약자이며, 의역하면 문서 객체를 인식하는 방식으로 번역할 수 있습니다.
(Script 언어로 HTML요소를 제어 할수 있도록 웹문서를 객체화 한것)
문서객체란 같은 태그들을 JavaScript가 이용할 수 있는 객체로 만들면 그것을 문서 객체라고 합니다.
DOM은 조금더 넓은 의미로는 웹 브라우저가 HTML 페이지를 인식하는 방식을 의미하며, 조금 좁은 의미로 본다면 document 객체와 관련된 객체의 집합을 의미할 수도 있습니다
DOM의 이미지
DOM은 tree 형식의 자료구조를 가지고 있습니다.
tree 구조란 root node에서 아래로 퍼져나가는 형태 입니다.
tree에서는 위쪽의 node를 부모(parent)노드 부모 아랫쪽 노드를 자식(children)노드라고 합니다.
root node는 가장 위에서 시작하는 parent가 없는 node가 됩니다. (html)
그리고 childeren이 없는 node를 leaf(나뭇잎,잎) node라고 합니다.
한마디로 tree구조는 뿌리(root)에서 시작해서 leaf(잎)에서 끝나는 것 입니다.
node란
tree 구조에서 root 노드를 포함한 모든 개개의 객체를 노드라고 표현합니다. head, title, script, h 등의 태그뿐 아니라 태그 안의 텍스트나 속성 등도 모두 노드에 속 합니다.
이중 HTML 태그를 요소노드라고 부르며, 요소 노드안에 있는 글자를 Text node 라고 부르기도 합니다.
문서객체의 생성 방법 및 자바스크립트에서 문서객체란?
문서객체가 생성되는 방식은 두가지로 웹 브라우저가 HTML 페이지에 적혀 있는 태그를 읽으면 생성하는 것과 HTML 페이지에 없던 문서객체를 JavaScript를 이용해서 생성하는 것 이 있으며, 첫 번째 방법은 정적으로 문서객체를 생성한다고 말하고 두 번째 방법은 동적으로 문서객체를 생성한다고 합니다.
여기서 두 번째로 문서객체를 생성하는 방식을 자바스크립트에서 문서객체를 생성하는 방법입니다.
정적문서 객체 생성 방법
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 문서객체 모델(DOM)</title >
</head>
<body>
<h1 id ="header_1" name= "" >HEADER-1 </h1 > //정적 문서객체 모델 생성
<div >
<h1 id = "header_2">HEADER-2</h1 > //정적 문서객체 모델 생성
</div >
<hr >
<h1 id = "clock"></h1> //정적 문서객체 모델 생성
</body>
</html>
동적 문서객체 모델 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 문서객체 모델(DOM)</title >
</head>
<body>
<h1 id ="header_1" name= "" >HEADER-1 </h1 > //정적 문서객체 모델 생성
<div >
<h1 id = "header_2">HEADER-2</h1 > //정적 문서객체 모델 생성
</div >
<hr >
<h1 id = "clock"></h1> //정적 문서객체 모델 생성
</body>
<script type= "text/javascript"> // 동적 문서객체 모델
window.onload = function(){
//1. 문서 객체 생성
var header = document.createElement('h2'); //h2 태그를 생성해주는 것
var textNode = document.createTextNode('Hello DOM');
//2. 노드(요소/텍스트)를 연결.
header.appendChild(textNode);
//3. body 문서 객체에 header 문서 객체를 추가.
document.body.appendChild(header);
};
</script>
</html>| let header = document.createElement('h2'); |
우선 document 객체에 접근해서 <h2> 태그를 생성
| let textNode = document.createTextNode('Hello DOM'); |
document 객체에 접근해서 TextNode를 생성하고 'Hello DOM'이라는 스트링을 넣어주었습니다.
| header.appendChild(textNode); |
위에서 생성한 <h2> 태그에 자식노드를 추가하고 있습니다.
(추가되는 자식노드가 아까 위해서 생성한 Text Node 입니다.)
| document.body.appendChild(header); |
이제 document객체를 통해서 body 객체에 접근하고 있습니다.
DOM과 관련하여 보면 좋은 사이트: https://www.youtube.com/watch?v=aTGhKjoZeao
Electron BoilerplatePermalink
- Vue : electron-vue https://github.com/SimulatedGREG/electron-vue
- React : electron-react-boilerplate https://github.com/electron-react-boilerplate/electron-react-boilerplate
- AngularJS : angular-electron https://github.com/maximegris/angular-electron
컴퓨터 코딩에서의 보일러 플레이트
단순하게 요약하자면
-
반복적으로 사용되는 부분을 재사용한다.
-
최소한의 수정으로 다시 사용한다.
-
개발자를 단순 작업을 해방해준다.