TIL 23.02.14 + (innerText 와 textContent)

오늘은 재귀 내용을 바탕으로 한, 과제를 풀었다.

 

Tree UI를 구현한 과제였는데, 아래의 예시처럼

자식이 없다면 li태그에 이름을 넣어주고, 자식이 있다면 li 태그에 

checkbox, span, ul 태그를 넣어주는 ui를 구현하는 것이 목표였다.

 

 

 

아래코드로, 위의 내용을 구현하였는데

동일한 구조로 나왔지만, 왜인지 모르게 과제를 통과할 수 없었다.

// TODO: createTreeView 함수를 재귀(자기 자신을 계속 부르게 함)호출하여 테스트케이스를 통과하세요.
// GOAL: 최종 결과가 resut.html와 같은 모습으로 나와야 합니다.

const root = document.getElementById("root");
function createTreeView(menu, currentNode) {
  // TODO: createTreeView 함수를 작성하세요.

  //root 요소 아래에 li 요소
  //음료,음식,굿즈,카드 요소 안에는 checkbox 존재
  //음료,음식,굿즈,카드 이름을 span 태그로 감싸기
  //자식 노드가 없는 경우 li에 이름만 표시
  //자식노드가 있는경우 ul태그 존재
  //item인 객체는 li로 name 감싸기

  for (let i of Object.keys(menu)) {
    //ul 태그
    const ul = document.createElement("ul");
    //li태그
    const li = document.createElement("li");

    //span태그
    const span = document.createElement("span");

    //체크박스
    const checkbox = document.createElement("input");
    checkbox.setAttribute("type", "checkbox");

    //자식 요소를 가지고 있다면
    if (menu[i].children) {
      li.appendChild(checkbox);
      span.innerText = menu[i].name;
      li.appendChild(span);

      //li태그에 하위 요소가 만들어진 ul태그 부착
      li.appendChild(createTreeView(menu[i].children, ul));
    } else {
      //
      //li태그 안에 이름 설정
      li.innerText = menu[i].name;
    }

    currentNode.appendChild(li);
  }

  return currentNode;
}

 

 

해결

문제는 innerText를 사용해서 발생하였다.

채점에서는 textContent를 사용해서 접근했어야 했는데,

innerText를 통해 값을 지정해주어서 생긴 문제였다.

(사실 이번 과제에서는 동일한 결과가 나오므로 상관없긴 하다)

 

그렇다면  textContent와 innerText는 어떻게 다를까?

https://developer.mozilla.org/ko/docs/Web/API/Node/textContent

 

MDN에 따르면

textContent는 <script>와 <style> 요소를 포함한 모든 요소의 콘텐츠를 가져오는 반면,
반면 innerText는 "사람이 읽을 수 있는" 요소만 처리한다.

textContent는 노드의 모든 요소를 반환합니다. 그에 비해 innerText는 스타일링을 고려하며,
"숨겨진" 요소의 텍스트는 반환하지 않습니다.

 

<!--textContent 예제 -->
  <div id="divA">This is <span>some</span> text!</div>
<!--'This is some text!' -->

<!-- innerText 예제 -->
  <div id="divA">This is <span style="display: none">some</span> text</div>
<!-- 출력 : This is text -->

 

기존에는  두 방식의 차이를 알지 못했었는데, 이번 과제를 통해서 새롭게 배워간다.