웹 개발을 하다 보면 span 요소에 담긴 텍스트를 읽어와야 하는 경우가 자주 발생합니다. JavaScript에서는 querySelector 메서드로 해당 요소를 선택한 뒤, innerHTML 속성을 사용하면 간단하게 텍스트를 가져올 수 있습니다.
아래 예제를 통해 실제 동작 방식을 살펴보겠습니다.
코드 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sample {
font-size: 18px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>JavaScript Date Methods</h1>
<span class="test">This is some sample text inside a span element</span>
<div class="sample"></div>
<button class="Btn">CLICK HERE</button>
<h3>
Click on the above button to get the span text
</h3>
<script>
let sampleEle = document.querySelector(".sample");
let spanEle = document.querySelector(".test");
document.querySelector(".Btn").addEventListener("click", () => {
sampleEle.innerHTML = "The span text is = " + spanEle.innerHTML;
});
</script>
</body>
</html>코드 설명
이 예제의 핵심 로직은 다음과 같습니다.
document.querySelector(".test"): 클래스명이test인 span 요소를 선택합니다.document.querySelector(".sample"): 결과를 출력할 div 영역을 선택합니다.addEventListener("click", ...): 버튼이 클릭되었을 때 콜백 함수가 실행되도록 이벤트 리스너를 등록합니다.spanEle.innerHTML: span 요소 내부의 텍스트를 읽어와 div 영역에 출력합니다.
실행 결과
페이지를 처음 열면 다음과 같은 화면이 나타납니다.
여기서 “CLICK HERE” 버튼을 클릭하면, span 요소의 텍스트가 아래 div 영역에 출력됩니다.
마무리
이처럼 querySelector와 innerHTML만 활용해도 DOM에서 원하는 요소의 텍스트를 손쉽게 가져올 수 있습니다. 참고로 태그 없이 순수한 텍스트만 필요하다면 innerHTML 대신 textContent 속성을 사용하는 것이 더 안전하고 권장되는 방식입니다.