[JS] textContent와 innerText

자바스크립트에서 엘리먼트 및 노드에 텍스트를 추가하거나 값을 가져올 수 있는 방법에는 innerText와 textContent가 있다.

1. textContent / innerText

---

1-1. textContent?

textContent는 텍스트를 추가할 수 있 자바스크립트 프로퍼티이디.

element.textContent = '내용'

1-2. 공통점

• 텍스트노드를 추가한다.
• 해당 엘리먼트의 텍스트 값을 반환한다.

1-3. 차이점

• textContent가 더 먼저 만들어졌으며 더 빨리 사용되었다. 그런 이유로 브라우저 호환성도 좀 더 높다. 또한 innerText보다 더 가볍다.

• 값을 가져올 때 다수의 스페이스가 존재하는 경우, innerText 는 불필요한 공백을 제거하고 텍스트로 반환하지만, textContent 는 모든 텍스트를 그대로 가져온다

1-4. 주의할 점

• 이 둘의 차이점은 여러개의 공백을 가진 경우에 달라지게 된다.

• 다음 html 요소를 각각 프로퍼티를 사용해 텍스트를 가져와서 차이를 확인해보겠다.
  

  <p>Hi Webisfree.com Web Development</p>

  
  

  1-4-1. innerText를 사용한 경우

  var msg = document.querySelector('p').innerText;
  console.log(msg);
  Hi Webisfree.com Web Development // ⭐출력 결과

  
  

  1-4-1. textContent를 사용한 경우

  var msg = document.querySelector('p').textContent;
  console.log(msg);
  Hi   Webisfree.com   Web   Development   // ⭐출력 결과