TIL 14 day innerText, textContent

JavaScript를 작성하다가 element에 써져있는 text를 다루고 싶으면 어떻게 해야하지라는 생각에 검색을 했다. innerText와 textContent인데 내가 봐서는 비슷해보여서 뭐가 다른지 MDN에 찾아보았다.

Node.innerText

• innerText는 HTMLElement 인터페이스의 속성이다.
• innerText는 요소와 그 자손의 렌더링 된 텍스트 콘텐츠를 나타낸다.
• innerText는 사용자가 커서를 이용해 콘텐츠를 클립보드에 복사해서 얻을 수 있는 텍스트의 근삿값을 제공한다. (복사-붙여넣기 했을 때 나오는 텍스트에 가깝다.)
• innerText는 스타일링을 고려하며, 숨겨진 요소의 텍스트는 반환하지 않는다.
  ex) 문장 띄어쓰기에 스페이스가 2번 들어가 있다면 스페이스를 1칸 한 것으로 바꾸어 보여준다. 자체적으로 스타일링을 한다.
  ex) invisible한 내용은 반환하지 않는다!
• 값은 요소(element)자체가 랜더링 중이 아니라면 Node.textContent의 속성 값과 같다.

const renderedText = htmlElement.innerText
htmlElement.innerText = string

Node.textContent

• textContent는 노드와 그 자손의 텍스트 콘텐츠를 표현한다.
• textContent를 설정 시 노드의 모든 자식을 주어진 문자열로 이루어진 하나의 텍스트 노드로 대치한다.
• textContent는 html의 script tag와 style tag 요소를 포함한 모든 요소의 콘텐츠를 가져온다.
• textContent는 노드의 모든 요소를 반환한다.
• 값은 string 또는 null이다. 노드가 document 또는 Doctype이면 null을 반환한다.
• innerText보다 빨리 만들어져 브라우저 호환성이 높다.

let text = someNode.textContent
someOtherNode.textContent = string

출처

• https://developer.mozilla.org/ko/docs/Web/API/Node/innerText
• https://developer.mozilla.org/ko/docs/Web/API/Node/textContent
• https://webisfree.com/2020-03-07/[%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8]-textcontent-%EA%B7%B8%EB%A6%AC%EA%B3%A0-innertext-%EC%B0%A8%EC%9D%B4%EC%A0%90-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0
• 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