innerText와 textContent의 차이
innerText와 textContent는 돔 요소의 text 값을 get하거나 set하는데 사용한다. 핵심 역할로는 상당히 비슷한 기능을 하는 이 두 프로퍼티는 어떤 차이가 있을까? 한번 알아 봅시다!
innerText
특징
- innerText는 HTMLElement의 프로퍼티다. HTMLElement는 간단하게 말하면 tag를 가지고 있는 Node다. tag가 없는 Node중 가장 대표적인 것은 text Node가 있겠다. 즉 text Node에서는 innerText를 사용할 수 없다.
- mdn에 들어가면 첫 번째 줄에 innerText는 렌더된 텍스트 컨텐트 혹은 그의 후손에 해당하는 인터페이스라고 소개한다. 즉, 브라우저에 반드시 렌더링 된 상태여야 값을 취득할 수 있다. getter로 값을 취득할 때는 사용자가 브라우저 창에서 text를 드래그하여 하이라이트 한 후 복사하는 것과 흡사하게 동작한다고 볼 수 있다.
The innerText property of the HTMLElement interface represents the "rendered" text content of a node and its descendants. in mdn(https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText)
value
요소와 요소의 모든 후손을 포함하여 렌더링된 텍스트 콘텐트. 렌더링이 되지 않은 경우, textContent와 동일하게 동작한다.
예시 1
HTML
<p id="source">
<span style="display:none">HIDDEN TEXT</span>
</p>JS
const source = document.getElementById("source");
source.textContent; // HIDDEN TEXT
source.innerText; // undefined예시 2
jest에서 snapshot test를 할 때도 렌더링이 되지 않기 때문에 innerText를 사용하는 경우 제대로된 테스트를 할 수 없다. 아래 예시는 text가 바뀌어도 test가 통과되는 모습니다. 이 문제를 해결하려면 textContent를 사용하거나 혹은 puppeteer를 추가로 사용하는 방법이 있다. puppeteer는 추후에 학습후 포스팅할 예정이다.
js
function createItem(text) {
const result = document.createElement('p');
result.innerText = text;
return result;
}test 1
test("createTodoItem('hello')", () => {
expect(createTodoItem("hello")).toMatchSnapshot();
});snap 1: pass
exports[`createTodoItem('world') 1`] = `
<p></p>
`;test 2
test("createTodoItem('world')", () => {
expect(createTodoItem("world")).toMatchSnapshot();
});snap 2: pass
exports[`createTodoItem('world') 1`] = `
<p></p>
`;textContent
특징
- textContent는 Node의 프로퍼티다.
- textContent는 렌더 여부와 상관없이 텍스트 컨텐트를 취득할 수 있다.
value
1.Node가 document 혹은 doctype인 경우 null을 반환한다.
Note: document의 모든 text, CDATA를 취득하기 위해서는 documentElement.textContent를 사용해라.
2. Node가 CDATA section(parsing 되지 않을 Charactor-문자), 주석, ProcessingInstruction, text node 이면 Node.nodeValue를 반환한다.
3. 그 외에는 주석, processing instructions를 제외한 모든 자식 노드의 textContent를 취득하여 하나로 합친 string 값을 반환한다.
innerText와의 차이
- textContents는
<script>, <style>을 포함하여 모든 elements를 취급하지만, innerText는 사람이 읽을 수 있는 elements만을 취급한다. - textContents는 모든 elements를 반환하는 반면, innerText는 styling상 인지될 수 있는(실질적으로 브라우저에 렌더링이 된) elements만 반환한다.
- 또한, innerText는 style을 취득하여 2번 사항을 고려하기 때문에, getter로 사용될 경우에도 style 값을 계산해야 하며, 이 때 reflow가 발생한다. 하지만, textContents는 getter의 경우에는 reflow가 발생하지 않는다.
- textContent와 innerText는 모두 자식 노드를 제거한다. 하지만 자식을 제거하기 전 자식을 변수에 담아서 사용하고자 할 때 문제가 생길 수 있다. innerText의 경우에는 IE11 이하 버전에서만 모든 자식 노드를 영구적으로 파괴하기 때문에 재사용이 불가능하는 특징이 있다.
innerHTML과의 차이
- innerHTMl은 HTMLElement을 string 화 하여 반환한다. 즉 태그명, 클래스 이름 등이 반환 값에 포함된다. 반면 innerText, textContents는 온전히 text만을 반환한다.
- 1번의 이유로 innerHTML은 HTMl을 파싱하는 비용이 소모된다. 따라서 textConent가 보다 성능상 우위를 점한다.
출처
- https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent
- https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText
- https://developer.mozilla.org/en-US/docs/Web/API/CDATASection
- https://developer.mozilla.org/en-US/docs/Glossary/Doctype
- https://developer.mozilla.org/en-US/docs/Web/API/ProcessingInstruction
