DOM | leah

DOM (Document Object Model)

1. HTML 코드 (Page Source 코드) === DOM?

코드 자체는 아님.

하지만 해당 코드가 브라우저에 파싱되면 DOM 임.

2. DevTools 코드 === DOM?

맞음.

기존에 작성한 HTML 코드와 동일할 수도 있지만, 대게 브라우저에 파싱됨에 따라 변경사항이 적용되어 브라우저에 보여지는 형태로 변형되어 보여짐.

웹 페이지는 일종의 문서(document)
- The backbone of an HTML document is tags
웹 페이지의 객체 지향 표현 (독립적인 객체) 이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM 을 수정
HTML, XML 문서의 프로그래밍 interface 로, 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공한다.
- DOM 은 문서를 표현하고, 저장하고, 조작하는 (문서 구조, 스타일, 내용 등을 변경) 방법을 제공한다.
- 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할
문서의 구조화된 표현(structured representation)
- node, property, method 를 갖고 있는 object들로 구조화된 문서를 표현
- document object 는 document 자체
  
  e.g. table object 는 HTML table 에 접근하기 위한 HTMLTableElement DOM interface를 구현하는 것이다.
동일한 문서를 사용하여 다른 형태로 나타날 수 있다.
- 웹 브라우저를 통해 그 내용이 파싱(해석)되어 웹 브라우저 화면에 나타나거나,
- 기존 HTML 소스 자체로 나타나기도 한다.
Everything in HTML, even comments, becomes a part of the DOM.

DOM과 기존 HTML 코드가 달라지는 경우

브라우저가 HTML을 수정하는 경우 : 브라우저 파싱 시 자동 교정 (Autocorrection)
1. Spaces and newlines before <head> are ignored for historical reasons.
2. If we put something after </body>, then that is automatically moved inside the body, at the end, as the HTML spec requires that all content must be inside <body>. So there can’t be any spaces after </body>.
  - if there are spaces (just like any character) in the document, then they become text nodes in the DOM
3. Tables always have <tbody>
JavaScript로 DOM을 조작하는 경우 : 조작 (변경) 사항이 반영되어 DOM 출력
Ajax : 컨텐츠를 가져와 (c.f. fetch) 페이지에 추가하는 경우
Templating : server의 내용을 테스트하기 위해 임의의 client-side template을 적용

e.g. handlebars.js

DOM과 JavaScript

JavaScript : 브라우저가 읽고 작업을 할 수 있는 언어, 브라우저에 기록되는 것들을 조작할 수 있는 문법/ 언어

DOM API 를 이용해서 작업

DOM : 작업이 이루어지는 장소, 브라우저에 의해 기록되는 모든 것

DOM 이 없다면 자바스크립트 언어는 웹 페이지 또는 XML 페이지의 요소들과 관련된 모델이나 개념들에 대한 정보를 갖지 (불러오지) 못하게 된다.
문서의 모든 element는 DOM의 한 부분
페이지 콘텐츠 (element) 는 DOM 에 저장되고 자바스크립트를 통해 접근하거나 조작
1
API (web or XML page) = DOM + JS (scripting language)
DOM 의 구현은 어떠한 언어에서도 가능

e.g. python 에서도 구현 가능

DOM에 접근하는 방법

문서가 로드될 때는 모든 DOM을 사용할 수 있게 되는 때이다.

스크립트를 작성할 때

직접적으로 문서 자체를 조작하거나,
간접적인 조작을 위해 문서의 children 을 얻는, document 또는 window element 를 이용하는 API 를 사용할 수 있다.

1	<body onload="window.alert('welcome to my home page!');">

<html>
  <head>
    <script>
       // run this function when the document is loaded
       window.onload = function() {

         // create a couple of elements in an otherwise empty HTML page
         var heading = document.createElement("h1");
         var heading_text = document.createTextNode("Big Head!");
         heading.appendChild(heading_text);
         document.body.appendChild(heading);
      }
    </script>
  </head>
  <body>
  </body>
</html>

Data Type

Tags are element nodes (or just elements) and form the tree structure.

DOM node는 element 로,

document – the “entry point” into DOM.

element nodes – HTML-tags, the tree building blocks.

text nodes – contain text.

comments – sometimes we can put information there, it won’t be shown, but JS can read it from the DOM.

노드의 array는 nodeList (또는 element),

attribute 노드는 attribute 로

`document`	document type 의 object 를 리턴할 때, 이 object 는 root document object 자체이다. 예를 들어 element의 `ownerDocument` property 는 그것이 속해 있는 document 를 return 한다.
`element`	`element` 는 DOM API에 의해 리턴된 `element` 또는 element type 의 DOM `node` 를 의미한다. 예를 들어 `document.createElement()` 는 node를 참조하는 object 를 리턴하며, DOM 안에서 생성되는 element를 리턴한다고 말할 수 있다.
`nodeList`	`nodeList` 는 element들의 배열이다. `document.getElementsByTagName()` 와 같은 method에 의해 리턴된 nodeList의 Item들은 `index` 를 통해 접근 가능하며, 다음과 같이 두 가지 방식이 있다 (동일한 방식임) : - list.item(1) - list[1] `item()` 은 `nodeList` object 의 단일 method 이다. 두번째 방식은 list 에서 두번째 item 을 `fetch` 하는 전형적인 array syntax 이다.
`attribute`	API에 의해 attribute가 리턴되는 것은 attribute에 대한 특별한 인터페이스를 노출하는 object reference 가 표현됨을 의미한다. attribute는 DOM 에서 element와 같은 `node`이다.
`namedNodeMap`	`namedNodeMap` 는 array 와 유사한 list로, item은 `name` 또는 `index` 에 의해 접근 가능하다. 리스트는 특별한 정렬이 적용되지 않았기 enumeration (열거, 목록화) 할 때 index 를 주로 사용한다. `namedNodeMap` 는 이를 위해 `item()` method 가 있으며, `namedNodeMap` 에 item 을 추가하거나 삭제할 수 있다.

DOM interface

object 와 DOM 에서 조작 가능 한 것
API 를 이용해 접근 및 조작

Interface와 Object

Every tree node is an object.
많은 object가 여러 개의 다른 interface와 연관되어 있다.
HTML element 는 DOM 이 연관되어 있는 한 node 트리에서 하나의 node를 담당한다.
- Node : 기본적인 Element
node 트리는 웹 페이지 또는 XML 페이지를 위한 object model을 구성한다.

1	table object 는 createCaption, insertRow method 들이 포함된 HTMLTableElement 을 구현한 것이다

table Element 는 Node interface 를 구현하고 있다.
table object 는 HTML Element (object model) 이기도 하기 때문에, table 은 Element interface도 구현한다.
table object 를 참조하게 되면, 기본적으로 이 3 가지 interface를 사용할 수 있다.

var table = document.getElementById("table"); // table === node/ element
var tableAttrs = table.attributes; // Node/Element interface
for (var i = 0; i < tableAttrs.length; i++) {
  // HTMLTableElement interface: border attribute
  if(tableAttrs[i].nodeName.toLowerCase() == "border")
    table.border = "1";
}
// HTMLTableElement interface: summary attribute
table.summary = "note: increased border";

핵심 Interface

Document 와 window object 는 DOM 프로그래밍에서 가장 자주 사용하는 object

window object 는 브라우저와 같다.
document object 는 root document 자체이다.

DOM 을 사용하는 공통적인 API

document.getElementById(id)

document.getElementsByTagName(name)

document.createElement(name)

parentNode.appendChild(node)

element.innerHTML

element.style.left

element.setAttribute()

element.getAttribute()

element.addEventListener()

window.content

window.onload

window.dump

window.scrollTo

Interaction with console

select the particular element (e.g. <li>) and press Esc opens the console
- or just run inspect(node)
the last selected element is available as $0, the previously selected is $1 etc.

in console tab, run the command on the element

1 2	// changes the background color of the inspected <li> element $0.style.background = 'red'

Reference

https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction

https://javascript.info/dom-nodes