innerText와 textContent의 차이: JavaScript DOM에서의 실전 가이드

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• 웹 개발자 및 DOM 조작 기술을 사용하는 개발자
• 초보자~중급자 수준: 실무에서 자주 발생하는 오류 방지 및 효율적인 활용법 학습

핵심 요약

• textContent: display:none 또는 visibility:hidden인 요소의 텍스트도 포함하며, CSS 영향 무시 (예: "Hello World" 출력)
• innerText: 렌더링된 텍스트만 반환 (예: "Hello"만 출력, "World"는 무시)
• 사용 시점: 데이터 추출 시 textContent, UI 테스트 시 innerText 사용 권장

섹션별 세부 요약

1. textContent의 특징

• 숨은 요소 포함: style="display:none"인 의 텍스트도 포함
• CSS 무시: 레이아웃 계산 없이 빠르게 처리
• 용도: 데이터 수집, 콘텐츠 정리에 적합
• 코드 예시:

```javascript

document.getElementById("info").textContent; // "Hello World"

```

2. innerText의 특징

• 렌더링된 텍스트만 반환: display:none 또는 visibility:hidden 요소 무시
• CSS 존중: 실제 UI 화면과 동일한 텍스트 추출
• 용도: 사용자 시점의 UI 테스트, 화면 분석에 적합
• 코드 예시:

```javascript

document.getElementById("info").innerText; // "Hello"

```

3. 실무 활용 팁

• textContent는 데이터 보존이 필요한 경우 사용 (예: CSV/JSON 생성)
• innerText는 UI 테스트, 사용자 인터페이스 분석 시 사용
• 혼용 금지: 두 메서드는 다른 목적을 위해 설계되었으므로 맥락에 따라 선택해야 함

결론

• textContent는 모든 텍스트 포함 (비교적 빠름), innerText는 렌더링된 텍스트만 반환 (UI와 일치)
• 데이터 처리 시 textContent, UI 분석 시 innerText 사용을 권장하며, 혼용은 오류 유발 가능
• 실무 예제:

```html

```

```javascript

console.log(document.getElementById("info").textContent); // "Hello World"

console.log(document.getElementById("info").innerText); // "Hello"

```