TIL

2021-01-13 TIL January 14, 2021

회사가 점점 바빠지고 다양한 업무가 같이 진행되고 있습니다. 그러다 보니 점점 다른 분야에 대해 호기심이 생기고 다른 일도 해보고 싶은 욕심이 생깁니다. 머리속에서 다른 영역은 일을 어떻게 진행할까 몇 번 시뮬레이션을 해보다가 아직 프론트 실력도 많이 부족하면서 다른 영역까지 관심을 갖는건 지나친 욕심 같다는 생각에 다시 프론트 코드로 눈을 돌리는 일을 반복하고 있습니다.

어디선가 이런 글귀를 봤습니다. 오지랍일까, 가능할까 고민하지 말고 일단 해보라고. 딱 지금 상황에 맞는 얘기라고 생각합니다. 하지만 아직 프론트 실력이 많이 부족한 것도 사실입니다. 그리고 1월 계획을 얼마전에 세웠는데 충동적으로 변경하고 싶지는 않습니다.

그래서 1월에는 최대한 지금 하고 있는 일에 집중하고, 2월부터는 조금씩 다른 일을 진행해보려고 합니다. 급발진하지 말고 차분하게 계획을 세우고 진행해봅시다.

오늘의 문답.

Q. DOM node의 class hierarchy가 무엇인가요?

  • DOM node class는 EventTarget으로 시작해서 Node -> Element -> HTMLElement -> HTMLBodyElement, HTMLInputElement 등으로 구성되는 hierarcky를 가지고 있습니다.
  • DOM nod는 특정 class에 속하게 됩니다. 그래서 특정 class와 상속받은 class에 정의된 property를 모두 가지게 됩니다.
  • EventTarget은 root abstract class 입니다. DOM node의 event 지원을 위한 base 역할을 합니다.
  • Node는 DOM tree navigation의 핵심 기능인 parentNode, nextSibling, childNode 등을 정의힙니다. Text node, Element node, Comment node 등이 Node를 상속합니다.
  • Element는 Element-level navigation인 nextElementSibling, children 등을 정의합니다. querySelector, getElementBy* 같은 search method도 제공합니다.
  • HTMLElement는 구체적인 HTML Element들이 이 class를 상속합니다.

Q. 대표적인 DOM node property는 다음과 같습니다. 각 property를 설명해주세요.

  • nodeType
  • nodeName/tagName
  • innerHTML
  • outerHTML
  • nodeValue/data
  • textContent
  • hidden

  • nodeType

    • DOM node가 어떤 노드인지 미리 정의된 상수를 리턴합니다.
    • Element node -> 1
    • Text node -> 3
    • Document node -> 9

  • nodeName/tagName

    • DOM node의 태그명을 리턴합니다.
    • nodeName은 모든 DOM node를 지원합니다. Text, Comment node에서는 내용을 string으로 반환합니다.
    • tagName은 Element node만 동작합니다.

  • innerHTML

    • element 안의 내용을 text 형태로 반환합니다.
    • innerHTML을 직접 수정할 수 있습니다.
    • 여러 번 수정하면 최종 버전만 남게 됩니다.
    • innerHTML을 이용하여 script를 삽입하면 삽입은 되지만 실행되지 않습니다.

  • outerHTML

    • outerHTML은 해당 element 자체를 DOM에서 삭제하고 할당받은 값으로 변경합니다.

  • nodeValue/data

    • innerHTML은 Element node 에만 사용할 수 있습니다.
    • Text, Comment node는 data로 사용가능 합니다.
    • nodeValue, data는 거의 유사합니다.

  • textContent

    • 특정 element 내의 모든 text를 반환합니다.
    • 값을 할당하면 text로 저장합니다. tag를 포함한 text를 저장해도 모두 text로 저장합니다.

  • hidden

    • style=“display: none”과 동일합니다.
    • html에 입력해도 되고 자바스크립트로도 처리가능 합니다.
Written by@[Suho]
뭐든지 만들어보자.