Skip to content

[Javascript, Typescript] Node.textContent vs Node.innerText #35

Answered by jwon42
jwon42 asked this question in Q&A
Discussion options

You must be logged in to vote
  1. Node.textContent

    노드와 그 자손의 텍스트 콘텐츠를 표현합니다.

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

  2. Node.innerText

    요소와 그 자손의 렌더링 된 텍스트 콘텐츠를 나타냅니다.

    https://developer.mozilla.org/ko/docs/Web/API/HTMLElement/innerText

  • 공통점

    • 텍스트노드를 추가한다.
    • element의 텍스트를 반환한다.
  • 차이점

    • textContent가 먼저 만들어졌으며 브라우저 호환성이 더 높고 가볍다.

    • textContent는 텍스트를 그대로 반환하지만 innerText는 불필요한 공백을 제거하고 반환한다.

      • <p>   42     SEOUL   </p>
      • let msg = document.querySelector('p').textContent;
        console.log(msg);
        • 출력결과
          |   42     SEOUL   |
      • let msg = document.querySelector('p').innerText;
        console.log(msg);
        • 출력결과
          |42 SEOUL|
    • textContent는 노드의 모든 요소를 반환하지만 innerText는 스타일링을 고려하여 '숨겨진' 요소의 텍스트는 반환하지 않습니다.

      • 예를 들어 숨겨진 상태로 렌더…

Replies: 1 comment

Comment options

jwon42
Jun 15, 2021
Maintainer Author

You must be logged in to vote
0 replies
Answer selected by yechoi42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
Q&A
Labels
None yet
1 participant