티스토리 뷰
textContent와 innerText는 특정 Element의 텍스트를 가져온다는 점에서 유사한 부분이 많은 메소드들이다.
이 두 가지의 차이점을 정리해보고, 또 innerHtml과 는 또 어떻게 다른지 정리해보려고 한다.
textContent vs innerText
다음과 같이 두가지 경우에 대해서 어떤 결과들을 출력하는지 확인해 보았다.
1. 안녕하세요
2. 안 녕하 세요 (hidden) ( 공백에는 빈칸 2칸 )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>textContent</title>
</head>
<body>
<div id="text1">안녕하세요</div>
<div id="text2">안 녕하 세요<span style="display:none">hidden</span></div>
</body>
</html>결과는 다음과 같이 나온다.
두 구문 모두 내부 text를 가져온다는 점은 같다.
하지만 두 번째 테스트에서
textContent는 빈칸 축약 없이 그대로 가져오지만
innerText는 빈칸 축약이 반영된 결과가 나왔다.
그리고
textContent는 현재 화면상에 숨겨져 있는 'hidden'도 가져오는 것을 알 수 있다.
왜 이런 결과가 나온 것일까.
innerText는 HtmlElement Interface의 속성이고, textContent는 Node Interface의 속성이다.
innetText는 현재 Elemet Text에 반영된 스타일이나, Script를 포함하여 현재 화면에 나오는 text를 불러온다.
textConent는 현재 노드가 가지고 있는 text의 값을 반영하기 때문에 마크업 언어가 적용되기 전 상태인 text 그대로 불러오는 것이다.
그리고 브라우저 호환성에서도 차이가 있다.
textContent 호환성
innerText 호환성
textContent 호환성이 더 좋은 것을 볼 수 있다.
+ 추가) innerHtml
innerHtml은 요소 내에 포함된 html 소스코드를 가져오는 메소드입니다.
innerHtml을 통한 XSS(Cross-site Scipting)에 취약하다는 점 때문에 최대한 사용을 자제하는 것을 권장하고 있다.
브라우저가 업데이트되면서 많이 개선되었다고는 하지만 여전히 많은 공격 루트가 있다고 한다.
그리고 보안 검수가 존재하는 프로젝트에서는 아예 innerHtml을 사용하지 못하도록 되어있기 때문에 지금부터 최대한 사용을 자제하는 습관을 기르는 것이 좋을 것 같다.
#Reference
[자바스크립트] textContent 그리고 innerText 차이점 알아보기
자바스크립트에서 엘리먼트 및 노드에 텍스트를 추가하거나 값을 가져올 수 있는 방법 중 하나인 textContent에 대하여 알아봅니다. 여기서 방법 중 하나라고 얘기한 이유는 잘 알려진 innerText가 존
webisfree.com
Element.innerHTML - Web API | MDN
Element 속성(property) innerHTML 은 요소(element) 내에 포함 된 HTML 또는 XML 마크업을 가져오거나 설정합니다.
developer.mozilla.org
'HTML & CSS' 카테고리의 다른 글
| Bundling과 웹팩(Webpack) (0) | 2022.02.23 |
|---|---|
| Element 와 Node (0) | 2022.02.22 |
| DOM이란 무엇인가 (0) | 2022.02.22 |
| [CSS] Flex와 Grid (feat. float) (0) | 2022.01.25 |
| CSS 호환성 (1) | 2021.09.09 |
- Total
- Today
- Yesterday
- redux-thunk
- js
- AxiosInterceptor
- bundler
- SPA
- redux
- 문제풀이
- python
- React
- Preloading
- Repository Pattern
- error
- Vue.js
- 파이썬
- 프로그래머스
- React.memo
- v-for
- Vue
- 상호평가
- 백준
- TypeScript
- Vuex
- SOAP API
- clean code
- reactrouter
- 알고리즘
- programmers
- Transpiler
- webpack
- GraphQL
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |