728x90
반응형
728x90
목 차
반응형
1. innerText 설명
- innerText는 JavaScript에서 DOM(Document Object Model) 요소의 텍스트 콘텐츠를 가져오거나 수정하는 데 사용되는 속성입니다.
- innerText는 사용자에게 실제로 보이는 텍스트를 기반으로 작동하며, 요소의 스타일과 렌더링 상태에 영향을 받습니다.
2. innerText 특징
- 렌더링된 텍스트 기반:
- 요소가 화면에 보이는 경우에만 값을 반환하거나 설정합니다.
- CSS 스타일에 따라 숨겨진 텍스트(display: none 또는 visibility: hidden)는 반환되지 않습니다.
- 읽기/쓰기 가능:
- 읽기: 요소의 렌더링된 텍스트 콘텐츠를 반환합니다.
- 쓰기: 요소의 텍스트 콘텐츠를 설정하며, 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").innerText;
console.log(text); // "Hello, world!"
});
</script>
</head>
<body>
<div id="example">Hello, <span>world!</span></div>
</body>
</html>
3-2. HTML 요소 내용 쓰기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
document.addEventListener("DOMContentLoaded", function () {
document.getElementById("example").innerText = "New content!";
});
</script>
</head>
<body>
<div id="example"></div>
</body>
</html>
3-3. CSS로 숨겨진 문자열 텍스트 확인
- display: none 또는 visibility: hidden은 무시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
document.addEventListener("DOMContentLoaded", function () {
document.getElementById("update").addEventListener("click", function () {
const text = document.getElementById("target").innerText;
console.log("Visible Text: ", text); // 빈 문자열을 반환
});
});
</script>
</head>
<body>
<div id="target" style="visibility: hidden;">Hidden Text</div>
<button id="update">Check Text</button>
</body>
</html>
4. innerText 장점과 단점
장점
실제 사용자에게 보이는 텍스트를 정확하게 가져올 수 있음.
CSS 스타일과 렌더링 상태를 반영하여 동작.
보안에 강하며 HTML 태그를 실행하지 않음.
단점
성능이 느림: 요소가 렌더링된 상태를 기준으로 값을 반환하기 때문에 DOM 계산 비용이 있음.
숨겨진 콘텐츠를 포함하지 않아 경우에 따라 적합하지 않을 수 있음.
관련글
728x90
반응형
'프로그래밍 > [javascript] 자바스크립트' 카테고리의 다른 글
| [JavaScript] 자바스크립트 textContent 사용법과 주의사항 (89) | 2024.12.15 |
|---|---|
| [JavaScript] 자바스크립트 innerHtml 사용법과 주의사항 (93) | 2024.12.14 |
| [JavaScript] 자바스크립트 name으로 값 가져오기 (108) | 2024.12.11 |
| [JavaScript] 자바스크립트 class로 값 가져오기 (122) | 2024.12.10 |
| [JavaScript] 자바스크립트 id로 값 가져오기 (136) | 2024.12.10 |