HTML 태그 안의 텍스트 가져오기 및 설정
이번 포스팅은 웹 페이지에 표시되는 HTML 태그 안의 텍스트를 가져오거나 설정하는 방법을 소개합니다.
HTML 태그 안의 텍스트 가져오는 방법
아래는 간단한 HTML 마크업입니다.
<button id="printText">
div 태그 안의 문자열 출력
</button>
<div id="content">
<p>Hello,</p>
<p>My Name is</p>
<p>JavaScript!</p>
</div>
아래 스크린샷은 HTML 마크업이 적용된 웹 페이지입니다.
이제, "div 태그 안의 문자열 출력" 버튼을 클릭하면 <div> 태그 안의 텍스트를 가져와서 콘솔에 출력하는 JavaScript 코드를 구현합니다.
innerText
첫 번째 방법은 innerText 프로퍼티를 사용하는 것입니다. innerText는 선택한 요소 및 자식 요소에 존재하는 순수 텍스트만 가져옵니다.
const btn = document.getElementById("printText");
btn.addEventListener("click", () => {
const divNode = document.getElementById("content");
console.log(divNode.innerText);
});[실행 결과]
innerHTML
두 번째 방법은 innerHTML 프로퍼티를 사용하는 것입니다. innerHTML 프로퍼티는 선택한 요소 안의 HTML 태그를 포함한 모든 텍스트를 가져옵니다. innerHTML 프로퍼티는 주석으로 작성된 텍스트도 가져옵니다.
const btn = document.getElementById("printText");
btn.addEventListener("click", () => {
const divNode = document.getElementById("content");
console.log(divNode.innerHTML);
});[실행 결과]
textContent
마지막 방법으로 textContent 프로퍼티를 사용하는 것입니다. HTML 태그가 제외된 텍스트를 가져옵니다.
const btn = document.getElementById("printText");
btn.addEventListener("click", () => {
const divNode = document.getElementById("content");
console.log(divNode.textContent);
});[실행 결과]
textContent 프로퍼티의 문제점
<div> 태그에 contenteditable이라는 속성을 설정하면 <div> 태그에서 텍스트를 입력할 수 있습니다. 이때, textContent 프로퍼티를 사용하여 텍스트를 가져오면 줄 바꿈(\n)이 적용되지 않은 텍스트를 가져온다는 문제점이 있습니다.
아래는 <div> 태그에 contenteditable 속성이 적용된 HTML 마크업입니다.
<!DOCTYPE html>
<html>
<head>
<title>JS Practice</title>
<meta charset="UTF-8" />
<style>
#content {
border-color: black;
border-style: solid;
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<button id="printText">
div 태그 안의 문자열 출력
</button>
<div id="content" contenteditable></div>
<script src="src/index.js"></script>
</body>
</html>
아래는 버튼을 클릭했을 때, <div> 태그 안의 텍스트를 콘솔에 출력하는 JavaScript 코드입니다.
const btn = document.getElementById("printText");
btn.addEventListener("click", () => {
const divNode = document.getElementById("content");
console.log(divNode.textContent);
});
아래 스크린샷은 <div> 태그에 문자열 입력 후 버튼을 클릭하여 문자열을 콘솔에 출력한 결과입니다.
textContent 프로퍼티의 두 번째 문제점은 반환 결과가 웹 브라우저(크롬, 사파리, 오페라 등)에 따라 다를 수 있다는 것입니다.
HTML 태그 안의 텍스트 설정하는 방법
위에서 소개한 innerText, innerHTML, textContent 프로퍼티의 값을 변경하여 HTML 태그 안의 텍스트를 설정할 수 있습니다.
아래는 간단한 HTML 마크업입니다.
<button id="printText">
div 태그 안의 텍스트 설정
</button>
<div id="content"></div>
innerText
innerText 프로퍼티는 텍스트 그대로 웹 페이지에 적용합니다. 실행 결과에서 백틱(``) 내부에 줄 바꿈도 적용된 것을 확인할 수 있습니다.
const btn = document.getElementById("printText");
btn.addEventListener("click", () => {
const divNode = document.getElementById("content");
divNode.innerText = `<p>Hello,
JavaScript
</p>`;
console.log(divNode.innerText);
});[실행 결과]
innerHTML
innerHTML 프로퍼티는 텍스트만 웹 페이지에 적용하며, 백틱(``) 내부에 줄 바꿈은 적용하지 않습니다.
const btn = document.getElementById("printText");
btn.addEventListener("click", () => {
const divNode = document.getElementById("content");
divNode.innerHTML = `<p>Hello,
JavaScript
</p>`;
console.log(divNode.innerHTML);
});[실행 결과]
textContent
innerHTML 프로퍼티는 텍스트 그대로 웹 페이지에 적용하며, 백틱(``) 내부에 줄 바꿈은 적용하지 않습니다.
const btn = document.getElementById("printText");
btn.addEventListener("click", () => {
const divNode = document.getElementById("content");
divNode.textContent = `<p>Hello,
JavaScript
</p>`;
console.log(divNode.textContent);
});[실행 결과]
정리
- HTML 태그 안의 텍스트를 가져오거나 변경하는 방법으로 innerText, innerHTML, textContent 프로퍼티를 사용할 수 있습니다.
'JavaScript > DOM' 카테고리의 다른 글
| [JavaScript]DocumentFragment 객체 사용 방법 (0) | 2022.12.02 |
|---|---|
| [JavaScript]innerHTML 프로퍼티 사용 방법 (0) | 2022.11.23 |
| [JavaScript]HTML 요소 추가하는 방법 (0) | 2022.11.21 |
| [JavaScript]HTML 요소 생성하는 방법 (0) | 2022.11.15 |
| [JavaScript]형제 노드 가져오는 방법 (0) | 2022.11.15 |
댓글