2. DOM API활용 - FE (1)

1) DOM node 생성과 추가

DOM

• DOM(Document Of Model)은 객체 지향 모델로써 구조화된 문서를 표현하는 형식이다.
• DOM은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다.
• DOM은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM을 수정할 수 있다. W3C DOM, WHATWG DOM 표준은 대부분의 브라우저에서 DOM을 구현하는 기준이다.
  (출처: 
  https://ko.wikipedia.org/wiki/%EB%AC%B8%EC%84%9C_%EA%B0%9D%EC%B2%B4_%EB%AA%A8%EB%8D%B8
  https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/%EC%86%8C%EA%B0%9C)

 

• DOM, 즉 HTML은 동적으로 다양하게 변경될 수 있습니다.  DOM APIs에서는 다양한 메서드와 속성을 지원하고 있으니 이를 활용하는 방법을 배울 필요가 있습니다.
• DOM API는 라이브러리를 쓰는 것보다 대체로 더 빠릅니다. (그 차이가 크진 않습니다)
• 물론 라이브러리보다 그 사용법이 불편하고 어려울 수는 있습니다. 하지만 low-level의 DOM API를 이해한다면, 라이브러리나 프레임워크를 사용하면서도 그 동작을 이해하고 유추하기가 쉽고 어떤 문제를 해결할때도 더 유리할 것입니다.

1. 다양한 APIs

• document. 으로 사용할 수 있는 APIs : 링크 바로가기
• element. 으로 사용할 수 있는 APIs : 링크 바로가기

2. DOM 탐색 APIs

• 몇 가지 유용한 속성
  • tagName: 태그 네임에 대한 속성(ex) table)
  • textContent: 해당 텍스트 노드들을 의미합니다.
  • innerHTML: HTML 하위에 있는 element들이 HTML문자열로 바로 나옵니다.
  • nodeType: node의 타입을 의미합니다. 1은 element, 3은 text, 8은 주석을 의미합니다.
• 이동
  • childNodes: 자식 노드를 배열로 반환합니다.
  • firstChild: 공백이나 텍스트노드가 있으면 그것까지 첫번째 자식으로 인정합니다. 그러나 우리는 대체로 공백이나 텍스트노드를 찾지 않으므로 firstElementChild를 더 많이 사용합니다.
  • firstElementChild: 자식 엘리먼트를 반환합니다.
  • parentElement: 부모 엘리먼트를 반환합니다.
  • nextSibling: 동일한 레벨의 다음 노드를 반환합니다.
  • nextElementSibling: 동일한 레벨의 다음 엘리먼트를 반환합니다.

3. DOM 조작 API

• DOM 노드를 삭제, 추가, 이동, 교체를 위해서는 아래 API 사용법을 잘 익혀두면 좋습니다.
• removeChild(): 인자 값에 들어 있는 자식 노드를 지웁니다.
• appendChild(): 인자 값으로 들어온 노드를 자식 노드로 추가합니다.
  • cf) HTML 코드에다가 동쪽으로 li태그가 쭉 있는데 li태그를 하나 더 넣는 것. 이런 것은 프레임워크들을 이용하여 쉽게 할 수 있지만 보통 li element를 만들어서 객체화해서 넣어 놓아야 합니다(객체화한다는 것은 DOM api를 이용해서 정해진 메서드들을 써가지고 DOM tree의 속성 값으로 element 노드에 넣는 것을 의미합니다)
  • 개발자도구에서 선택한 값을 콘솔에 불러오는 방법은 $0을 입력하면 됩니다.
  • element를 만드는 것은 document.createElement()를 사용합니다.
    var div = document.createElement("div");
    var str = document.createTextNode("today is good");
    div.appendChild(str);
    이러면 div element 아래에 텍스트 노드가 들어간 것과 같습니다.
    이렇게 해서 div 아래에 텍스트 노드를 넣고 이 div를 아까 선택한 $0에 넣습니다.
    $0.appendChild(div);
    이렇게 넣으면 str 내용이 선택한 태그 안에 들어가며 기존에 있던 내용 뒤에 들어갑니다.
  • 이것이 실제로 UI 개발할 때의 표준 방법입니다. DOM API를 쓰는 표준 방법이며 최근에는 이런 방법이 번거로워 React, Angular, Vue 이런 것에서는 템플릿이라고 해서 HTML을 만들어두고 그거를 변경이 필요한 데이터부분을 여기서 연결을 준뒤 모델 또는 데이터를 바꾸면 자동으로 렌더링 돼서 화면에 넣어준다거나 이런 식으로 작업을 많이 합니다. 이런 것들은 자동화된 방법이고 이런 프레임워크를 쓰는 환경이 항상 존재하지는 않습니다. 간단한 웹사이트를 만드는 현업에서는 꼭 그런 프레임워크 없이도 더 빠르게 동조 작업을 할 수 있는 방법들을 많이 씁니다.
• insertBefore(): 새로운 노드를 참조 노드 앞에 추가합니다.
• cloneNode(): 해당 노드를 복제합니다.
• replaceChild(): 이미 있는 노드를 새로운 노드로 교체합니다.
• closest(): 상위로 올라가면서 인자 값에 해당하는 근접 엘리먼트 찾습니다.

참고 자료

[참고링크] 위키피디아 DOM설명           https://en.wikipedia.org/wiki/Document_Object_Model

[참고링크] document. 으로 사용할 수 있는 APIs
https://www.w3schools.com/jsref/dom_obj_document.asp

[참고링크] element. 으로 사용할 수 있는 APIs
https://www.w3schools.com/jsref/dom_obj_all.asp