알아야 할 'innerText'와 'textContent'의 미묘한 차이점

표면의 두 속성은 코드 줄 내에서 동일한 작업을 수행하는 것처럼 보이지만 요소 또는 태그에서 텍스트를 렌더링합니다. 둘 사이의 유사점과 차이점을 이해하면 다음 JavaScript 프로젝트에 가장 적합한 속성을 선택할 수 있습니다.

Element.innerText

'element.innerText'가 다른 속성보다 우세한 곳은 innerText가 CSS 스타일을 고려한다는 사실입니다. 인간이 읽기를 선호하는 것을 렌더링하도록 선택합니다. 텍스트는 일반 텍스트로 렌더링됩니다. 스타일을 염두에 두고 'element.innerText'는 'node.textContent'와 달리 렌더링에서 모든 공백을 자릅니다.

'.innerText'가 무엇을 하는지 더 잘 보여주기 위해 아래에 HTML 샘플이 있습니다.

   <div id='property-test'>
            Flatagram     is the <strong>best</strong> app ever! Wouldn't <em>you</em> agree?
        </div>

브라우저에서 열리면 코드는 "Flatagram은 최고의 앱입니다! 동의하지 않습니까?"라는 문장을 렌더링합니다. "best"는 강한/굵은 태그로, "you"는 em/italic 태그로 둘러쌉니다.

const renderText = document.getElementById('property-test');

div를 새 변수에 할당했습니다. 새 변수 'renderText'에서 .innerText를 호출해 보겠습니다.

renderText.innerText
// =>   Flatagram is the best app ever! Wouldn't you agree?

일단 호출되면 렌더링되는 것은 일반 텍스트입니다. '.innerHTML'과 같은 HTML 태그를 포함하지 않고 '.textContent'와 같은 공백을 포함하지 않습니다.

Node.text콘텐츠

Node.textContent가 이벤트에서 'element.innerText'를 이기고 노드의 모든 요소를 ​​렌더링해야 합니다.

<div id="market-options">
            <div>mangos, coconuts, and pears</div>
            <div style="visibility:hidden">all go great in a smoothie bowl.</div>
        </div>

위의 코드에서 요소를 숨김으로 설정했지만 '.textContent'를 사용하면 할당된 설정을 무시하고 기록된 대로 표시됩니다.

mangos, coconuts, and pearsall go great in a smoothie bowl.

결론

이 게시물을 읽은 후 .innerText 및 .textContent 속성에 대해 새로운 것을 배웠기를 바랍니다. 그리고 하나의 소스로는 프로그래밍에 수반되는 지식의 깊이를 캡슐화하기에 충분하지 않다는 것을 알고 있기 때문에 이러한 속성의 뉘앙스와 코드에 미치는 영향에 대한 더 많은 예를 보여주기 위해 제가 제공한 추가 리소스를 확인하는 것이 좋습니다. .

자원

.innerText 속성에 대한 추가 정보 | link

속성 비교 | link

MDN .textContent | link