textConent와 InnerText

textContent와 innerText는 모두 DOM에서 요소의 내용을 가져오거나 설정하는 속성입니다. 그러나 이들 사이에는 중요한 차이점이 있으며, 사용 사례에 따라 적절한 속성을 선택하는 것이 중요합니다.

textContent

• 정의: textContent 속성은 요소와 그 자손의 텍스트 내용을 가져오거나 설정합니다. 이 때, HTML 태그를 무시하고 텍스트만을 다룹니다.
• 특징:
  • textContent는 숨겨진 요소(예: display: none이 적용된 요소)의 텍스트도 포함합니다.
  • 스크립트와 스타일 요소 내의 텍스트도 포함합니다.
  • HTML 엔티티(예: < 또는 &)는 실제 문자로 해석되지 않고 원시 텍스트 그대로 반환됩니다.
• 사용 사례: DOM에서 순수 텍스트 데이터를 작업할 때 선호됩니다. textContent는 보안 측면에서 innerHTML보다 안전하며, 사용자가 입력한 내용을 요소에 추가할 때 XSS(Cross-site scripting) 공격을 방지할 수 있습니다.

innerText

• 정의: innerText 속성은 "렌더링된" 텍스트 내용을 가져오거나 설정합니다. 즉, 사용자에게 실제로 보이는 텍스트를 기준으로 합니다.
• 특징:
  • innerText는 CSS 스타일(예: visibility, overflow)에 의해 영향을 받습니다. 화면에 표시되지 않는 요소의 텍스트는 포함되지 않습니다.
  • innerText를 설정하면, 텍스트가 주어진 요소의 자식으로서 "안전하게" 추가됩니다. 이는 내부적으로 HTML 태그가 제거되거나 변환되어 단순한 텍스트로 처리됩니다.
  • 레이아웃을 계산하여 요소의 스타일을 고려하기 때문에 textContent에 비해 성능이 느릴 수 있습니다.
• 사용 사례: 사용자에게 실제로 보여지는 텍스트를 다루고자 할 때 사용됩니다. 예를 들어, 사용자 인터페이스에서 요소의 가시적인 텍스트를 조작하거나 검색할 때 유용합니다.

차이점 요약

• 성능: textContent가 일반적으로 innerText보다 빠릅니다. innerText는 렌더링된 텍스트를 계산하기 위해 레이아웃 정보를 사용하기 때문입니다.
• 보이는 텍스트 vs. 모든 텍스트: innerText는 화면에 보이는 텍스트만 반영하는 반면, textContent는 요소 내의 모든 텍스트를 반영합니다(화면에 보이지 않는 텍스트 포함).
• 보안: 두 속성 모두 텍스트만을 다루기 때문에 innerHTML보다는 보안상 안전합니다. 그러나 사용자 입력을 다룰 때는 항상 주의를 기울여야 합니다.

적절한 속성의 선택은 웹 애플리케이션의 요구 사항과 성능, 보안 고려 사항에 따라 달라집니다.