[나만의 지식 DB] - 1. DOM 의 정의

<취업 준비를 위한 지식 DB 정리함>

ECMA6

1. DOM 의 기본지식 - JS 와 밀접한 관계를 가진 DOM

2. 실은 React가 아니라 ECMA6 였다! - 임시: https://dydals5678.tistory.com/87 (destructuring assignment, arrow function)

3. 객체지향이란? - 임시: https://universitytomorrow.com/15

 

---

오늘날 JavaScript가 가장 널리 쓰이는 분야는 클라이언트용 인터페이스이다. 이 때 주로 JavaScript는 웹 브라우저에서 제공되는 DOM API로 사용하게 된다.

JavaScript에서 html의 문서에 접근하는 API를 뜻하는 용어로 DOM이 등장하였다.

 

참조:

전적으로 MDN을 기준으로 재요약 하였습니다.

DOM 소개 - Web API | MDN

 

DOM(Document Object Model) - 문서 객체 모델

주 구성은 HTML, XML 문서의 프로그래밍 interface 이다.

특징으로는 문서의 구조화된 표현 (structured representation) 을 제공함으로서, (다양한) 프로그래밍 언어가 DOM 구조에 접근하도록 한다. 이 DOM의 존재로 인해 문서 구조, 스타일, 내용 등을 변경할 수 있게 된다.

 

DOM은 구조화된 nodes 와 property, method 를 갖고 있는 objects 로 문서를 표현한다.

이들 역시, 웹 페이지를 script 또는 프로그래밍 언어들에서 사용 되도록 연결시켜주는 역할을 한다.

 

웹 페이지는 일종의 문서(document)다. 문서를 통해 그 내용이 해석되어 브라우저에 출력된다.

DOM 은 동일 문서를 1) 표현, 2) 저장, 3) 조작하는 방법을 제공한다.

DOM 은 웹 페이지의 객체 지향 표현이다. JS 같은 scripting language 를 이용해 DOM 수정이 가능하다.

 

중간 요약:
DOM is document.
DOM : structured representation = (can modify) document structure, style, content
DOM : nodes, property, method = objects (DOM allows developer to modify HTML content with other languages)
DOM : provides method for developer to 1) express 2) save 3) modify
DOM : is the expression of a web-page's Object-Oriented(Programming, OOP). Modifiable with JS(scripting language).

API (web or XML page) = DOM + JS (scripting language)

 

DOM 에 어떻게 접근 할 수 있는가?

1) 모든 웹 브라우저는 스크립트가 접근할 수 있는 웹 페이지를 만들기 위해 어느 정도의 DOM 을 항상 사용한다. 

2) 스크립트를 작성할 때(인라인 <script> 요소를 사용하거나 웹 페이지 안에 있는 스크립트 로딩 명령을 사용하여), 문서 자체를 조작하거나 문서의 children 을 얻기 위해 document 또는 window elements 를 위한 API 를 즉시 사용할 수 있다.

 

중요한 데이터 타입들 (Data types)

API 에는 우리가 반드시 알고 있어야 할 수많은 data types 이 있다는 사실을 염두해 두기 바란다.

(nodes 는 elements 로, 노드의 arrays 는 nodeLists(또는 elements), attribute 노드들은 attributes 로 해석바람.)

 

크게 document, element, nodeList, attribute, namedNodeMap

 

DOM interfaces

(이 문서는 objects 와 DOM 에서 조작가능한 것들에 대해 설명하고 있다.)

1) HTML FORM element 는 HTMLFormElement interface 로 부터 name property 를 얻고

2) className property 는 HTMLElement interface 로 부터 얻게 된다.

공통점: property 는 form object 안에 있다는 사실.

 

주의: Interfaces 와 Objects (자료구조)

혼동의 이유: objects 가 여러 개의 다른 interfaces 와 연관되어 있음.

예) table object 는 createCaption, insertRow 같은 method 들로 구성된, HTMLTableElement 을 구현한 것.

여기서, table object 는 HTML element 이다.

이 table은 Element interface(DOM Element 얘기) 도 구현가능.

마지막으로, HTML element 는 DOM 이 연관되어 있는 한, nodes tree 에서 하나의 node 이다.

---

nodes tree 의 역할?

nodes tree 는 웹페이지/XML 페이지를 위한 object model 을 구성한다.

 

아래 예시는 table object 를 참고해서, 3가지 interfaces 를 사용하는 모습이다.

var table = document.getElementById("table");
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";

---

DOM 의 핵심은 interfaces 다. (그토록 JS 에서 매번 사용하던 것이 바로 이것)

DOM에서 가장 많이 사용되는 interfaces 들은 다음과 같다(아래의 DOM 사용하는 공통 API 목록 참고).

1. Document 와 window objects 는 DOM 프로그래밍에서 가장 자주 사용하는 objects 다.
2. window object 는 브라우저와 같다고 할 수 있다. document object 는 root document 자체라고 할 수 있다. 
3. generic Node interface 로부터 상속받은 Element 와 Node, Element interfaces 가 협력하여, 각각의 elements 에서 사용할 수 있는 수많은 methods 와 properties 를 제공한다.
4. 이러한 elements 는 (바로 위 nodes tree의 역할? 의 table object 예제 참고), elements 가 보유한 데이터를 처리할 수 있는 특정한 interfaces 도 가지고 있다.

 

• document.getElementById(id)
• document.getElementsByTagName (en-US)(name)
• document.createElement(name)
• parentNode.appendChild (en-US)(node)
• element.innerHTML (en-US)
• element.style (en-US).left
• element.setAttribute (en-US)
• element.getAttribute
• element.addEventListener (en-US)
• window.content (en-US)
• window.onload (en-US)
• window.dump (en-US)
• window.scrollTo (en-US)

DOM API 테스팅(을 통한 DOM 을 끼고 JS 를 사용하는 방법)

 

예시)

1. <script> element 안에서 DOM 에 접근하는 완벽한 HTML 형태도 있다.

2. form 에서 script 를 실행하기 위해, 버튼과 같은 interface 가 요구되는 경우.

3. DOM 이 목록화 되어 수행되는 HTML elements.

=> 이들을 새로운 HTML 문서에 복붙해서 브라우저에서 실행 가능

 

해석:

Q. HTML elements 에 대한 interface 의 기본 관계를 보여주는 예시 실행 시,

A. script 에서 쉽게 접근 하는 test page 설정이 가능.

How?

아래 예시는 interface 를 테스트 하는 함수 가 위치 할 수 있는 header 안에 <script> element 제공.

이는 retrieve, set, 조작 가능한 attributes 가 포하된 HTML elements 가 사용 되었다.

목적은, 브라우저가 이들 함수를 호출하기 위한 웹 UI 를 제공하기 위함이다.

<html>
  <head>
    <title>DOM Tests</title>
    <script type="application/javascript">
    function setBodyAttr(attr,value){
      if (document.body) eval('document.body.'+attr+'="'+value+'"');
      else notSupported();
    }
    </script>
    </head>
  <body>
  / body 에서 위에 JS script 에 쓰인 함수명의 쓰임세에 집중  \
    <div style="margin: .5in; height: 400;">
      <p><b><tt>text</tt>color</b></p>
      <form>
      / setBodyAttr \
        <select onChange="setBodyAttr('text',
        this.options[this.selectedIndex].value);">
          <option value="black">black
          <option value="darkblue">darkblue
        </select>
        <p><b><tt>bgColor</tt></b></p>
      / setBodyAttr \
        <select onChange="setBodyAttr('bgColor',
        this.options[this.selectedIndex].value);">
          <option value="white">white
          <option value="lightgrey">gray
        </select>
        <p><b><tt>link</tt></b></p>
      / setBodyAttr \
        <select onChange="setBodyAttr('link',
        this.options[this.selectedIndex].value);">
          <option value="blue">blue
          <option value="green">green
        </select>  <small>
        <a href="http://www.brownhen.com/dom_api_top.html" id="sample">
        (sample link)</a></small><br>
      </form>
      <form>
        <input type="button" value="version" onclick="ver()" />
      </form>
    </div>
  </body>
</html>

★여기서 잠깐 - attribute 와 value 는 어떻게 쓰였나?★

// HTML:
<input id="theId" value="test" onclick="doSomething(this)" />

// JavaScript:
function(elem){
    var value = elem.value;
    var id    = elem.id;
    ...
}

좀 더 알아보기:

좀 더 알아보기:

한눈에 보는 HTML 요소(Elements & Attributes) 총정리

attribute 는 html 문서 안에서의 정적인(바뀌지 않는) 속성 그 자체를 의미하고, property 는 html DOM 안에서 동적인(바뀌는) 속성(또는 그 값)을 의미합니다.

 

HTML DOM Attribute Objects

The Attr Object

In the HTML DOM, the Attr object represents an HTML attribute.

An HTML attribute always belongs to an HTML element.

 

Property / MethodDescription

Property / method | 설명

attr.isId	Returns true if the attribute is of type Id, otherwise it returns false
attr.name	Returns the name of an attribute
attr.value	Sets or returns the value of the attribute

...

 

attribute 와 property 의 차이:

attribute 와 property 의 차이

 

interface 테스트는 DOM 을 효과적으로 사용하는 법을 배우는 데 매우 중요한 수단임을 명심하라.