js에서 dom을 조작할 때 텍스트를 이용하는 방법은 여러가지가 있다.
문득 어떤 방법을 사용하는게 맞는지 고민이 들어서 알아보고 정리해보았다!
틀린 내용 있으면 알려주세요...
Node
의 속성으로 해당 Element의 텍스트 값을 읽어온다.Element
의 속성으로 해당 Element의 텍스트 값을 읽어온다.textContent
와의 차이점<body>
<div>aaa</div>
<div style="display: none;">bbb</div>
</body>
인 html이 있을 때
const body = document.querySelector('body');
const textContent = body.textContent;
const innerText = body.innerText;
console.log(textContent); // 'aaabbb'
console.log(innerText); // 'aaa'
textContent는 style에 관계없이 aaabbb를 반환하지만,
innerText는 눈에 보이는 aaa만 반환한다.
Element
의 속성으로 해당 Element의 HTML을 읽어온다.textContent
가 성능과 보안상으로 권장됨.innerText
는 필요한 경우에 사용하면 된다. (렌더링 텍스트가 필요하거나 IE8이하)innerHtml
은 사용을 지양하자.https://developer.mozilla.org/ko/docs/Web/API/Node/textContent
https://developer.mozilla.org/ko/docs/Web/API/HTMLElement/innerText
https://developer.mozilla.org/ko/docs/Web/API/Element/innerHTML
https://developer.mozilla.org/ko/docs/Web/API/Document/createTextNode
https://velog.io/@raram2/%EB%8B%B9%EC%8B%A0%EC%9D%B4-innerHTML%EC%9D%84-%EC%93%B0%EB%A9%B4-%EC%95%88%EB%90%98%EB%8A%94-%EC%9D%B4%EC%9C%A0