FE 개발에 도전합니다 (2) DOM

PO 다마고치는 예전부터 DOM과 친하지 않았습니다. 

CHAM DOM 은 물론

다른 위험한 가면 쓴 돔도

 

DOM의 설명을 읽어봅시다 

 

문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 nodes와 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.

...

인생은 실전! DOM의 구조를 확인해봅니다.

 

DOM TREE...

자세히는 모르겠지만 노드에는 문서 노드, 요소노드, 어트리뷰트 노드, 텍스트 노드라는게 있고 li가 뭔지 모르겠지만

id가 4개 있고, class가 3개, text가 4개이고, 1개는 class가 없다. 는걸 나타내는 것 같습니다. 

 

텍스트를 읽으니 역시 더 알수가 없네요 (...)

 저걸 저 설명과 연결하여 해석해보면 문서 > 요소 > 어트리뷰트 = 텍스트 느낌입니다. 

- 문서 노드라는게 있어야 요소, 어트리뷰트, 텍스트 노드에 접근할 수 있고 

- 요소 노드는 html 요소이고, body의 div 안에 있는 h1이고 이건 ul인가 보네요. 요소 노드를 찾아야 트리뷰트, 텍스트노드에 접근할 수 있습니다. 

- 어트리뷰트 노드는 class 같은 설명 혹은 속성에 해당하는 부분인 것 같군요 

- 텍스트 노드는 텍스트인 것 같습니다. 

 

DOM을 통해 웹페이지를 조작하기 위해서는 1. 조작하고자 하는 요소를 선택하거나 탐색하고, 선택한 요소의 콘텐츠나 어트리뷰트를 조작하는 과정이 필요하다고 하는데요, 자바스크립트가 이것에 필요한 수단 (API)를 제공한다고 합니다. 

아니 API는 여기서 왜 나와 ㅋㅋ

 

API(Application Programming Interface)는 응용 프로그래밍 인터페이스인데요 컴퓨터나 컴퓨터 프로그래밍 사이를 연결합니다. 다른 종류의 소프트웨어에 서비스를 제공하는 친구입니다. 이러한 연결이나 인터페이스를 빌드하거나 사용하는 특정한 방법이 있고, 이 표준을 충족하는 컴퓨터 시스템은 API가 구현(implement)되었다거나 노출(expose)되었다고 할 수 있습니다. 시스템이 동작하는 내부의 세세한 방식을 숨기기 좋습니다. 그래서 마이크로서비스에 잘 쓰이죠 (...)

절차와 구성까지는 잘 모르겠습니다. 다음에 볼 기회가 있으면 다루는걸로...  

 

API는 컴퓨터나 소프트웨어끼리 연결합니다. HCI 와는 다름

 

자주 쓰는 인터페이스 용어  

getElementByid, CreateElement, AppendChild, innerHTML, 

 

• 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)

Document.getElementById() - Web API | MDN

 

 

하지만...

 

이것이 뭘까요? DOM query? 

 

과연 PO다마고치는 리타이어하지 않고 살아남을 수 있을까? 

 

<계속>