728x90
728x90
목 차
1. textContent 설명
- textContent는 JavaScript에서 DOM(Document Object Model) 요소의 텍스트 콘텐츠를 가져오거나 설정할 수 있는 속성입니다. 이 속성은 특정 HTML 요소 내부의 텍스트를 조작하는 데 사용되며, HTML 태그를 무시하고 순수한 텍스트만 다룹니다.
2. textContent 특징
- HTML 태그를 무시:
- 읽을 때, 요소 내의 모든 HTML 태그를 제외하고 순수 텍스트만 반환합니다.
- 설정할 때, HTML 태그는 단순히 문자열로 처리되며 태그로 인식되지 않습니다.
- 읽기/쓰기 가능:
- 읽기: 특정 요소와 그 하위 요소의 텍스트 콘텐츠를 가져옵니다.
- 쓰기: 특정 요소와 그 하위 요소의 텍스트 콘텐츠를 덮어씁니다.
- 보안성이 높음:
- 사용자 입력값을 처리할 때 HTML 태그를 실행하지 않기 때문에 XSS(크로스 사이트 스크립팅) 공격에 안전합니다.
3. 사용 예제
3-1. HTML 요소의 텍스트 읽기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
document.addEventListener("DOMContentLoaded", function () {
let text = document.getElementById("example").textContent;
console.log(text); // 출력: "Hello, world!"
});
</script>
</head>
<body>
<div id="example"><strong>Hello, world!</strong></div>
</body>
</html>
3-2. HTML 요소의 텍스트 쓰기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
document.addEventListener("DOMContentLoaded", function () {
document.getElementById("example").textContent = "New content!";
});
</script>
</head>
<body>
<div id="example"></div>
</body>
</html>
3-3. 텍스트 수정하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
function updateText() {
document.getElementById("output").textContent = "Hello, world!";
}
</script>
</head>
<body>
<div id="output"></div>
<button onclick="updateText()">Update Text</button>
</body>
</html>
3-4. 사용자 입력 값 표시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
document.addEventListener("DOMContentLoaded", function () {
document.getElementById("submit").addEventListener("click", function () {
const userInput = document.getElementById("input").value;
document.getElementById("output").textContent = userInput;
});
});
</script>
</head>
<body>
<input id="input" type="text" />
<button id="submit">Submit</button>
<div id="output"></div>
</body>
</html>
4. 주의 사항
4-1. 하위 요소의 텍스트도 포함
textContent는 요소와 모든 하위 요소의 텍스트를 포함합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
document.addEventListener("DOMContentLoaded", function () {
let content = document.getElementById("example").textContent;
console.log(content); // "Hello, world!"
});
</script>
</head>
<body>
<div id="example">
Hello,
<span>world!</span>
</div>
</body>
</html>
4-2. 화이트스페이스 유지
textContent는 HTML에서 보이는 것처럼 요소의 모든 공백과 줄바꿈을 그대로 가져옵니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
document.addEventListener("DOMContentLoaded", function () {
let content = document.getElementById("example").textContent;
console.log(content); // "Hello, world!"
});
</script>
</head>
<body>
<div id="example">
Hello,
world!
</div>
</body>
</html>
4-3. 기존 내용 덮어쓰기
새로운 텍스트를 설정하면 기존 내용과 모든 하위 요소가 삭제되고 새 텍스트로 대체됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
document.addEventListener("DOMContentLoaded", function () {
document.getElementById("example").textContent = "GOGOGO!";
});
</script>
</head>
<body>
<div id="example">New content!</div>
</body>
</html>
5. textContent의 장점
- 보안성: HTML 태그를 인식하지 않기 때문에 XSS 공격에 강합니다.
- 간결성: 텍스트만 조작하는 작업에서는 innerHTML보다 간단하고 직관적입니다.
- 성능: 많은 양의 데이터를 처리할 때 innerHTML보다 빠릅니다.
관련글 목록
[JavaScript] 자바스크립트 innerHtml 사용법과 주의사항
728x90
'프로그래밍 > [javascript] 자바스크립트' 카테고리의 다른 글
| [JavaScript] 자바스크립트 innerText 사용법 (126) | 2024.12.16 |
|---|---|
| [JavaScript] 자바스크립트 innerHtml 사용법과 주의사항 (93) | 2024.12.14 |
| [JavaScript] 자바스크립트 name으로 값 가져오기 (109) | 2024.12.11 |
| [JavaScript] 자바스크립트 class로 값 가져오기 (122) | 2024.12.10 |
| [JavaScript] 자바스크립트 id로 값 가져오기 (136) | 2024.12.10 |