textContent
Node 인터페이스의 textContent 속성은 노드와 그 자손의 텍스트 콘텐츠를 표현한다.
let text = someNode.textContent;
someOtherNode.textContent = string위 코드와 같이 textContent 메소드를 사용하면 리턴값으로 문자열 또는 null을 리턴한다.
textContent의 값은 상황에 따라 다르다.
- 노드가
document또는Doctype이면null을 리턴한다. - 노드가 CDATA 구획, 주석, 처리 명령, 텍스트 노트면 노트 내의 텍스트, 즉
Node.nodeValue를 리턴한다. - 다른 노드 유형에 대해서는 주석과 처리 명령을 제외한 모든 자식 노드의
textContent를 병합한 결과를 리턴한다. 자식이 없는 경우는 빈 문자열이다.
노드의 textContent를 설정하면, 노드의 모든 자식을 주어진 문자열로 이루어진 하나의 텍스트 노드로 대치한다.
innerText와의 차이점
textContent와 innerText는 유사하지만 중요한 차이가 있으니 헷갈리면 안된다.
textContent는<script>와<style>요소를 포함한 모든 요소의 콘텐츠를 가져온다. 반면innerText는 사람이 읽을 수 있는 요소만 처리한다.textContent는 노드의 모든 요소를 반환한다. 그에 비해innerText는 스타일링을 고려하며, 숨겨진 요소의 텍스트는 리턴하지 않는다.- IE 기준
innerText를 수정하면 요소의 모든 자식 노드를 제거하고, 모든 자손 텍스트 노드를 영구히 파괴함. 이로 인해, 해당 텍스트 노드를 이후에 다른 노드는 물론 같은 노드에 삽입하는 것도 불가능하다.
innerHTML과의 차이점
innerHTML은 이름 그대로 HTML을 리턴한다. 간혹 innerHTML을 사용해 요소의 텍스트를 가져오거나 쓰는 경우가 있지만, HTML로 분석할 필요가 없다는 점에서 textContent의 성능이 더 좋다. 그리고 textContent는 XSS 공격의 위험이 없다.
textContent 활용 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>textContent Example</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1 id="title">This works!</h1>
<button id="button">Click me!</button>
<script src="script.js"></script>
</body>
</html>
다음과 같은 HTML로 이루어진 예시가 있다.
const title = document.getElementById('title');
button.onclick = function click() {
title.textContent = "Title Changed!";
title.style.color = 'red';
button.textContent = 'Changed!';
}그리고 위와 같이 버튼에 onclick 이벤트를 넣어주었다.
이제 Click me! 버튼을 누르게 되면 title이라는 id를 가진 h1의 내용과 색깔이 바뀌고 버튼의 이름이 바뀌게 된다.
문과생의 개발자 도전기