HTML내의 텍스트나 텍스트를 쓰기위하여, innerText 혹은 textContent를 사용 해보았을 것이다. 아 물론 textContent는 안 써본 사람들도 있을 것이다. 아마도 innerHTML, innerText가 이름이 비슷하기도 하고, Node.textContent는 몰라도 개발하는 동안에는 큰 무리가 없을 테니 말이다.
하지만, 몰랐다면, 이번 기회에 알아 두는 것이 좋을 것이라 판단된다. 가장 큰 차이는 아래와 같다.
<html>
<head>
</head>
<body>
<div id="test">
<span>1</span>
<span>2</span>
<span style="display: none">3</span>
</div>
<script>
const test = document.getElementById('test')
console.log('test.innerText: \n' + test.innerText)
console.log('test.textContent: \n' + test.textContent)
</script>
</body>
</html>
자 두개의 차이를 한번 확인 해보도록 하자.
innerText의 경우에는 display:none;인 내용은 노출이 되지 않는다. 그에 비해, textContent는 display: none;을 포함할 뿐만 아니라, html 태그에 작성된, 공백까지도 노출이 된다.
자 이것이 가장 큰 차이다. 렌더링 된 레이아웃을 고려 하는가? 안하는 가? 이다.
성능
당연하게도, innertText는 렌더링 된 레이아웃을 고려하는 것은 공짜가 아니다. html이 어떻게 배치 되고 하는지, 확인 하기 위하여 브라우저 렌더링 과정 중 하나인, reflow과정을 거치게 된다. 자주 읽고, 많은 내용을 읽어야 한다면, 앱 성능에 악영향을 끼칠 수 있다.
뭐 물론 렌더링 된 대로, 내용을 추출하기 위해서는 innerText를 사용하여야 한다. 판단은 각자 하도록 하자.
댓글
댓글 쓰기