Node.innerText

HTMLElement 인터페이스의 innerText속성은 요소와 그 자손의 "렌더링"된 텍스트 콘텐츠를 나타냅니다. 접근자로서, innerText는 커서를 이용해 요소의 콘텐츠를 선택하고 클립보드에 복사했을 때 사용자가 얻을 수 있는 텍스트의 근삿값을 제공합니다.

참고: innerTextNode.textContent와 혼동하기 쉬우나 중요한 차이점을 가지고 있습니다. 기본적으로, innerText는 텍스트의 렌더링 후 모습을 인식할 수 있지만 textContent는 그렇지 않습니다.

예제

다음 예제는 innerTextNode.textContent를 비교합니다. innerText<br> 태그를 인식하고, 숨겨진 요소를 무시하는 점에 주목하세요.

HTML

<h3>원본 요소:</h3>
<p id="source">
  <style>#source { color: red; }</style>
아래에서<br>이 글을<br>어떻게 인식하는지 살펴보세요.
  <span style="display:none">숨겨진 글</span>
</p>
<h3>textContent 결과:</h3>
<textarea id="textContentOutput" rows="6" cols="30" readonly>...</textarea>
<h3>innerText 결과:</h3>
<textarea id="innerTextOutput" rows="6" cols="30" readonly>...</textarea>

JavaScript

const source = document.getElementById('source');
const textContentOutput = document.getElementById('textContentOutput');
const innerTextOutput = document.getElementById('innerTextOutput');

textContentOutput.innerHTML = source.textContent;
innerTextOutput.innerHTML = source.innerText;

결과

명세

Specification Status Comment
HTML Living Standard
The definition of 'innerText' in that specification.
Living Standard Introduced, based on the draft of the innerText specification. See whatwg/html#465 and whatwg/compat#5 for history.

브라우저 호환성

No compatibility data found. Please contribute data for "api.Node.innerText" (depth: 1) to the MDN compatibility data repository.

같이 보기