웹 개발을 하다 보면 HTML 태그 안의 내용을 가져오거나 변경해야 할 때가 많습니다. JavaScript를 이용하면 이런 작업을 손쉽게 할 수 있습니다. 이번 블로그 글에서는 JavaScript로 HTML 태그 안의 내용을 가져오고 변경하는 방법을 자세히 설명하겠습니다.
JavaScript로 태그 안의 내용 가져오기와 변경하기
1. 태그 안의 내용 가져오기
HTML 문서에서 특정 태그를 선택하고, 그 태그 안의 내용을 가져오기 위해 JavaScript의 다양한 메서드를 사용할 수 있습니다. 대표적인 방법으로 document.getElementById, document.getElementsByClassName, document.getElementsByTagName, document.querySelector 등이 있습니다.
예제 1: getElementById 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="myDiv">Hello, World!</div>
<script>
// id가 'myDiv'인 요소를 선택
var element = document.getElementById('myDiv');
// 요소의 내용을 가져옴
var content = element.innerHTML;
console.log(content); // 출력: Hello, World!
</script>
</body>
</html>
예제 2: querySelector 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p class="myClass">This is a paragraph.</p>
<script>
// class가 'myClass'인 첫 번째 요소를 선택
var element = document.querySelector('.myClass');
// 요소의 내용을 가져옴
var content = element.innerHTML;
console.log(content); // 출력: This is a paragraph.
</script>
</body>
</html>
2. 태그 안의 내용 변경하기
태그 안의 내용을 변경하려면 선택한 요소의 innerHTML, innerText, 또는 textContent 속성을 사용하면 됩니다.
예제 1: innerHTML 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="myDiv">Hello, World!</div>
<script>
// id가 'myDiv'인 요소를 선택
var element = document.getElementById('myDiv');
// 요소의 내용을 변경
element.innerHTML = 'Goodbye, World!';
</script>
</body>
</html>
예제 2: innerText 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p class="myClass">This is a paragraph.</p>
<script>
// class가 'myClass'인 첫 번째 요소를 선택
var element = document.querySelector('.myClass');
// 요소의 텍스트 내용을 변경
element.innerText = 'This is a modified paragraph.';
</script>
</body>
</html>
3. 태그 속성 값 가져오기와 변경하기
태그의 속성 값을 가져오거나 변경할 때는 getAttribute와 setAttribute 메서드를 사용합니다.
예제 1: getAttribute 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img id="myImage" src="image1.jpg" alt="An image">
<script>
// id가 'myImage'인 요소를 선택
var image = document.getElementById('myImage');
// src 속성 값을 가져옴
var srcValue = image.getAttribute('src');
console.log(srcValue); // 출력: image1.jpg
</script>
</body>
</html>
예제 2: setAttribute 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img id="myImage" src="image1.jpg" alt="An image">
<script>
// id가 'myImage'인 요소를 선택
var image = document.getElementById('myImage');
// src 속성 값을 변경
image.setAttribute('src', 'image2.jpg');
</script>
</body>
</html>
이상입니다.
[다른글]
javascript 아이폰 or 안드로이드 구분
navigator.userAgent 를 이용한 웹 브라우져 종류 / 버젼 구분 및 사용 테스트 User-Agent는 웹브라우저가 HTTP 프로토콜 안에서 User-Agent라는 헤더 필드를 통해 자신의 이름과 애플리케이션 유형, 운영 체
www.ihee.com
'IT > 개발' 카테고리의 다른 글
| defer와 async 동작 특성과 차이점 및 상황별 사용 방법 (1) | 2024.09.18 |
|---|---|
| MYSQL 문자열 치환 함수 replace 사용법 (0) | 2023.11.15 |
| 안드로이드 스튜디오 주석 단축키 윈도우, 맥OS (0) | 2023.07.31 |
| 안드로이드 앱 서명키 JKS(keystore) 만들고 배포하는 방법 (0) | 2021.10.10 |
| 개발 기술 면접 대비 기본 지식 정리 (0) | 2021.05.19 |