textContent와 innerText: 어느 것을 사용할까요?

innerText와 textContent는 요소의 텍스트 콘텐츠에 액세스하기 위해 JavaScript에서 일반적으로 사용되는 두 가지 속성입니다. . 두 속성 모두 비슷한 기능을 공유하지만 각각에 대한 적절한 사용 사례를 결정하는 주요 차이점이 있습니다.

innerText

innerText는 HTML 요소 내에 포함된 표시 텍스트를 반환합니다. 숨겨진 요소나 표시 스타일이 '없음'으로 설정된 요소는 제외됩니다.

예:

Hello 

innerText 이 요소에 대해 'Hello'를 반환합니다. 반면에

textContent

textContent는 가시성이나 표시 스타일에 관계없이 전체 텍스트 콘텐츠를 반환합니다. 위의 예에서 textContent는 'Hello World'를 반환합니다.

주요 차이점:

• 표준 준수: innerText는 비 -standard 속성인 반면 textContent는 표준화된 속성입니다.
• Performance: innerText는 표시되는 텍스트를 결정하기 위해 레이아웃 정보가 필요하므로 textContent보다 성능 집약적입니다.
• 범위: innerText는 HTMLElement 객체에만 사용할 수 있는 반면 textContent는 모든 Node 객체에 사용할 수 있습니다.

사용 고려 사항:

For 보이는 텍스트에만 액세스하려는 경우 innerText가 더 효율적인 선택일 수 있습니다. 그러나 전체 텍스트 콘텐츠를 검색해야 하는 경우에는 textContent가 선호되는 속성입니다.

제공된 예에서:

var logo$ = document.getElementsByClassName('logo')[0];
logo$.textContent = "Example";

textContent를 사용하여 로고 요소의 텍스트 콘텐츠를 업데이트할 수 있습니다. 기존 텍스트가 "예"로 대체됩니다.