티스토리 뷰

부스트코스 웹 프로그래밍/3. 웹 앱 개발: 예약서비스 1

2. DOM API활용 - FE (2)

haaak 2019. 8. 2. 15:31

2) 문자열기반으로 DOM 조작하기

DOM API를 사용해서 node를 생성하고 추가하는 건 복잡한 일입니다.

html을 문자열로 처리하면서 dom에 쉽게 추가하는 방법을 알아보겠습니다.

1. DOM 조작 API

  • 아래 API들은 삭제, 추가, 이동, 교체를 위한 API사용법입니다.
  • removeChild(): 노드의 자식노드인 인자 값에 들어 있는 노드를 지운 뒤 반환합니다.
                        ex) node.removeChild(child);
  • appendChild(): 인자 값으로 들어온 노드를 엘리먼트의 마지막 자식 노드로 추가합니다. 반환된 값은 이동한 자식 노드를 의미합니다.
                        ex) element.appendChild(aChild);
    • cf) HTML을 어떤 메서드 기반으로 넣는 게 아니고 문자열 기반의, 문자열 처리를 통해서 HTML을 넣는, 즉, DOM을 HTML 기반으로 조작하는 방법들이 실제 현업에서 더 많이 쓰는 방법이고 빠른 방법입니다.
  • insertBefore(): 어떤 특정 영역에 해당하는 위치를 위치에 집어넣는 것입니다. 참조된 노드 앞에 특정 부모 노드의 자식 노드를 삽입합니다.
                        ex) parentNode.insertBefore(newNode, referenceNode);
    • 예를 들어 table태그에서 3번째 tr태그에 앞에 넣고 싶다면 우선 3번째 tr을 변수에 담습니다.
      var base = document.querySelector(".w3-table-all tr:nth-child(3)");
      insertBefore()      는 상위 부모 element를 기준으로 동작하므로 부모태그를 변수에 담습니다.
      var parent = document.querySelector(".w3-table-all tbody");
      var div = document.createElement("div");
      var str = document.createTextNode("      여기에 추가됐어요.");
      element       노드를 만들고 이 아래 텍스트로 노드이기 때문에 아래와 같이 appendChild()를 이용해서 추가를 해줍니다.
      div.append(str);
      부모를 기준으로 지정한 자식(base) 앞에 div를 추가합니다.
      parent.insertBeore(div, base);
  • cloneNode(): 노드를 복제하여 반환합니다.
                       ex) node.cloneNode(deep);
  • replaceChild(): 이미 있는 노드를 다른 노드로 교체합니다.
                       ex) parentNode.replaceChild(newChild, oldChild);
  • closest(): 엘리먼트의 상위로 올라가면서 인자값에 해당하는 근접 엘리먼트 찾아 반환합니다. delegation에서 꽤 유용한 메서드입니다.
                       ex) element.closest("a");      //element의 상위 엘리먼트 중 a 태그를 찾아 반환.

2. HTML을 문자열로 처리해주는 DOM API

  • DOM에 문자열단위로 데이터를 추가하는 것은 매우 편리하고 자주 사용하는 방법입니다. 아래 메서드는 잘 기억해두고 모두 실습을 해둘 필요가 있습니다.
  • innerText: 해당 엘리먼트의 텍스트 노드를 가리킵니다. $0.innerText += "dskfsjkdl"; 와 같이 쓸 수 있습니다. innerHTML도 마찬가지로 쓸 수 있습니다.
  • innerHTML: 해당 엘리먼트의 하위 html을 입력하거나 반환합니다. 실제로 파싱 작업이 브라우저에서 최적화되어 있어서 내용 하나하나를 토큰 단위로 잘라서 element노드에 넣고 하겠지만 굉장히 빠릅니다.
  • 위의 방법들을 사용하면 createElement, createText, appendChild로 텍스트 노드를 element에 붙이지 않아도 됩니다. 이렇게 DOM의 텍스트나 element를 문자열로 조작할 수 있습니다.
  • insertAdjacentHTML: innerHTML은 통째로 element 하위를 다 바꾸는 건데 insertAdjacentHTML은 특정 위치를 바꿀 수 있습니다. 위치를 정하는 방법은 네 가지로 속성을 원하는 위치에 넣을 수 있습니다.
    <!-- beforebegin -->
    <p>
    <!-- afterbegin -->
    foo
    <!-- beforeend -->
    </p>
    <!-- afterend -->
  • 아래와 같이 사용합니다.
    var base = document.querySelector("div");
    base.insertAdjacentHTML("afterbegin", "<h1>hello world</h1>");//<div><h1>…
  • DOM 조작이 굉장히 어렵고 번거롭더라도 가장 빠른 방법입니다. DOM을 조작하는 방법이 UI 개발에서는 어렵고 번거로워서 개발 속도는 느리지만 그래도 이러한 DOM API를 쓰는 게 사용자 입장에서는 가장 빨리 화면 갱신되는 방법이라고 볼 수 있습니다.
    라이브러리나 프레임워크를 통해 더 빨리 쉽게 개발할 수 있으나 DOM 조작에 대해서 충분한 이해를 하고 사용하는 것이 좋습니다.

요약 및 예제

1. DOM 조작하기 API

2. DOM 엘리먼트 오브젝트 몇 가지 유용 DOM 엘리먼트 속성

  • tagName : 엘리먼트의 태그명 반환
  • textContent : 노드의 텍스트 내용을 설정하거나 반환
  • nodeType : 노드의 노드 유형을 숫자로 반환

DOM 탐색 속성

 DOM 조작 메소드

 HTML을 문자열로 처리해주는 DOM 속성 / 메소드

  • innerText
    지정된 노드와 모든 자손의 텍스트 내용을 설정하거나 반환
    innerText 예제
  • innerHTML
    지정된 엘리먼트의 내부 html을 설정하거나 반환
    innerHTML 예제

참고 자료

[참고링크] insertAdjacentHTML-vs-innerHTML-vs-appendChild
https://jsperf.com/insertadjacenthtml-perf/3

비슷한 방법의 API간의 성능차이도 관심사항입니다.

'부스트코스 웹 프로그래밍 > 3. 웹 앱 개발: 예약서비스 1' 카테고리의 다른 글

3. Ajax - FE (1)  (0) 2019.08.02
2. DOM API활용 - FE (3)  (0) 2019.08.02
2. DOM API활용 - FE (1)  (0) 2019.08.02
1. JavaScript - FE (2)  (0) 2019.08.02
1. JavaScript - FE (1)  (0) 2019.08.02
공유하기 링크
Comments
Related Articles more