자바스크립트 프로퍼티인 textContent는 텍스트를 추가할 수 있는 매우 간단한 프로퍼티이다. 사용방법은 아래와 같다.
element.textContent = '내용'
일반적으로 텍스트를 엘리먼트에 추가할 경우 innerText가 많이 쓰인다. 가장 많이 알려져 있기도 하고 innerHTML과 비슷하기 때문에 외우기도 더 쉽다. 이런 이유로 textContent가 덜 사용되긴 하지만 이 둘의 차이점이 존재한다. 그럼 공통점과 차이점을 간단히 알아보면 무엇일까?
[공통점 1] 둘 다 텍스트노드를 추가함
이 둘 모두 텍스트를 추가한다는 공통점이 있다. 결과 역시 동일하다.
[공통점 2] 해당 엘리먼트의 텍스트 값을 반환함
즉 둘 다 어떤 텍스트를 가지고 있는지 알 수 있다.
다음으로 차이점은 무엇일까?
[차이점 1]
일단 textContent가 더 먼저 만들어졌으며 더 빨리 사용되었다. 그런 이유로 브라우저 호환성도 좀 더 높다. 또한 큰 차이는 아니지만 더 가볍다고 알려져 있다.
[차이점 2]
그 다음으로 값을 가져올 때 다수의 스페이스가 존재하는 경우 하나로 가져오느냐 아니면 모두 가져오느냐의 차이가 있다.
innerText는 불필요한 공백을 제거하고 텍스트로 반환하지만 textContent는 모든 텍스트를 그대로 가져오는 차이점이 있다. 예제를 만들어 알아보면 만약 아래와 같은 태그가 있다면...
각각 프로퍼티를 사용해 텍스트를 가져오면 그 결과는 많이 달라질 수 있다.
@ innerText를 사용한 경우
var msg = document.querySelector('p').innerText;
console.log(msg);
Hi Webisfree.com Web Development // 출력 결과
@ textContent를 사용한 경우
var msg = document.querySelector('p').textContent;
console.log(msg);
Hi Webisfree.com Web Development // 출력 결과
이 둘의 차이점을 위와 같이 여러개의 공백을 가진 경우에 달라지게 된다.
알아둘 것!
실제로 여러 브라우저에서 테스트를 해보면 그 결과가 많이 달라진다. IE의 경우는 위와 같이 나타나지만 현재의 크롬 버전에서는 둘 다 동일하게 결과가 나타난다.
