DOM 요소의 콘텐츠를 조작하는 속성
자바스크립트를 사용하여 DOM(Document Object Model, 문서 객체 모델) 요소의 콘텐츠를 조작하는 속성들에 대해 알아보겠습니다.
세 가지 주요 속성
textContent
|
요소의 텍스트 콘텐츠를 가져오거나 설정 |
---|---|
innerText
|
요소의 텍스트 콘텐츠를 가져오거나 설정
(단, CSS로 숨겨진 요소의 텍스트는 가져오지 못하고 랜더링된 텍스트만 가져옴) |
innerHTML
|
요소의 내부 텍스트를 포함한 HTML 콘텐츠를 가져오거나 설정 |
textContent
vs. innerText
vs. innerHTML
속성 | HTML 태그 처리 | 숨겨진 요소의 텍스트 | 보안(XSS) |
---|---|---|---|
textContent |
아니오
(단순 텍스트로 변환해서 처리) |
가져올 수 없음
설정할 수 있음 |
상대적으로 안전함 |
innerText |
아니오
(단순 텍스트로 변환해서 처리) |
가져올 수 있음
설정할 수 있음 |
상대적으로 안전함 |
innerHTML |
예
(HTML 태그로 렌더링) |
가져올 수 있음
설정할 수 있음 |
위험 가능성 큼 |
textContent
는 요소의 단순 텍스트만 조작할 때 사용합니다.innerText
는 랜더링된 요소의 단순 텍스트만을 가져와야할 때 사용합니다. 즉, CSS의 영향을 받는 텍스트가 필요한 경우에만 사용하는 것이 좋습니다.
이러한 이유로, CSS를 고려해야 하기 때문에 일반적인 상황에서는 추천하지 않습니다.innerHTML
은 HTML 태그를 포함한 동적 콘텐츠 생성 시 사용합니다.
textContent
textContent
속성은
HTML 요소의 텍스트 콘텐츠를 가져오거나 설정합니다.
해당 요소 내에 자손이 있다면 자손 태그는 무시하고 텍스트 콘텐츠만 처리합니다.
구문
예제
textContent
속성을 사용하면 해당 요소의 텍스트 내용을 가져옵니다.
textContent
속성을 사용하면 해당 요소의 텍스트 내용을 설정합니다.
새로운 텍스트로 설정할 경우, 요소의 기존 자식 요소나 텍스트는 모두 삭제되고 새 텍스트로 대체됩니다.
중요: 환영합니다!
더 자세한 내용과 예제는 자바스크립트 textContent 속성 – 올바른 이해와 사용 방법을 참조하세요.
innerText
innerText
속성은
랜더링된 HTML 요소의 텍스트 콘텐츠를 가져오거나 설정합니다.
해당 요소 내에 자손이 있다면 자손 태그는 무시하고 텍스트 콘텐츠만 처리합니다.
구문
innerText
속성은 랜더링된 HTML 요소의 텍스트 콘텐츠를 가져만 반환합니다.
다음의 경우에는 텍스트를 가져올 수 없습니다.
- 해당 요소 자체가 CSS의
visibility: hidden
으로 화면에 숨겨진 요소의 텍스트 - 해당 요소 자체가 숨겨져 있지 않더라도 해당 요소 내에 자손이 있다면 자손 요소가 CSS의
visibility: hidden
으로 화면에 숨겨진 요소의 텍스트, 또는hidden
속성으로 화면에 숨겨진 요소의 텍스트 - 해당 요소 자체가 숨겨져 있지 않더라도 해당 요소 내에 자손이 있다면 자손 요소가 CSS의
display: none
으로 화면에 숨겨진 요소의 텍스트
요소에 hidden
속성이 지정되면 브라우저는 해당 요소를 display: none
으로 처리합니다.
예제
innerText
속성을 사용하면 랜더링된 해당 요소의 텍스트 내용을 가져옵니다.
innerText
속성을 사용하면 해당 요소의 텍스트 내용을 설정합니다.
새로운 텍스트로 설정할 경우, 요소의 기존 자식 요소나 텍스트는 모두 삭제되고 새 텍스트로 대체됩니다.
중요: 환영합니다!
더 자세한 내용과 예제는 자바스크립트 innerText 속성 – 올바른 이해와 사용 방법을 참조하세요.
innerHTML
innerHTML
속성은
HTML 요소의 내부 HTML 콘텐츠를 가져오거나 설정합니다.
해당 요소의 자손 태그나 텍스트를 포함한 HTML 또는 XML 마크업을 읽어오거나 새롭게 변경할 수 있습니다.
innerHTML
속성은 특정 요소 내에 단순 콘텐츠를 동적으로 집어넣는 경우에 편리하고 유용합니다.
구문
예제
해당 요소의 자손 태그나 텍스트를 포함한 HTML 또는 XML 마크업을 가져옵니다.
해당 요소에 텍스트 노드만 있으면 텍스트를 가져옵니다.
노드
HTML DOM은 노드의 집합체입니다.
HTML에서 말하는 요소는 "요소 노드"를 의미하며,
텍스트는 "텍스트 노드",
주석은 "주석 노드"라고 말합니다.
해당 요소의 자손 태그나 텍스트를 포함한 HTML 또는 XML 마크업을 설정합니다.
innerHTML
속성으로 설정할 경우 요소의 자식 요소, 텍스트 노드, 주석 등을 포함 모든 콘텐츠는 삭제되고 설정한 콘텐츠로 대체됩니다.
- 라면
- 김밥
- 돈까스
더 자세한 내용과 예제는 자바스크립트 innerHTML 속성 – 올바른 이해와 사용 방법을 참조하세요.
정리
textContent
는 요소의 모든 텍스트를 조작할 때 사용합니다. 요소에 포함된 텍스트뿐만 아니라 CSS로 숨겨진 요소의 텍스트도 포함하여 가져오거나 설정할 수 있습니다. 텍스트를 가져올 때 HTML 태그는 모두 무시됩니다.innerText
는 렌더링된 텍스트만을 다룰 수 사용하는 것이 좋습니다. 즉, 화면에 표시되는 텍스트만을 가져오거나 설정할 때 사용해야 합니다. CSS에 의해 숨겨진 텍스트는 가져올 때 무시됩니다. 일반적으로는innerText
는 CSS의 영향을 받는 요소의 텍스트가 필요한 경우에만 사용하는 것이 좋습니다.innerHTML
은 요소의 HTML 콘텐츠를 포함한 동적 콘텐츠를 생성할 때 사용합니다. HTML 태그를 포함하여 요소의 구조까지 변경할 수 있으므로 강력하지만, 보안적인 측면을 고려해야 합니다. 따라서 사용자 입력을 직접 삽입하는 경우에는 주의가 필요합니다.
브라우저 호환성
속성 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
textContent
|
1 | 12 | 1 | 3 |
innerText
|
1 | 12 | 45 | 1 |
innerHTML
|
1 | 12 | 1 | 1 |
명세서
명세서 사양 | |
---|---|
textContent
|
DOM Standard #dom-node-textcontent |
innerText
|
DOM Standard #the-innertext-idl-attribute |
innerHTML
|
DOM Standard #dom-element-innerhtml |