JavaScript에서 버튼에 화면에 보이는 텍스트를 확인하려면 innerHTML 속성을 사용하면 됩니다. 이 속성은 해당 요소 내부의 HTML 콘텐츠를 문자열 형태로 반환하기 때문에, 버튼 안에 작성된 텍스트도 그대로 읽어올 수 있습니다.
기본 사용 예제
아래 코드는 버튼 요소의 id를 통해 접근한 뒤, innerHTML 속성으로 버튼에 표시된 텍스트를 가져와 출력하는 예제입니다.
<!DOCTYPE html>
<html>
<body>
<form id = "myForm">
<button id = "btn" type = "button">My Button</button>
</form>
<script>
var str = document.getElementById("btn").innerHTML;
document.write("Button text: " + str);
</script>
</body>
</html>위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
Button text: My Button
동작 원리
document.getElementById("btn")는 id가 "btn"인 버튼 요소를 반환하고, 여기에 .innerHTML을 붙이면 해당 요소의 내부 텍스트(및 HTML 태그)를 문자열로 얻을 수 있습니다.
textContent를 활용한 대안
버튼에 순수한 텍스트만 담겨 있다면 innerHTML 대신 textContent 속성을 사용하는 것이 더 안전하고 효율적입니다. textContent는 HTML 태그를 해석하지 않고 텍스트만 그대로 반환합니다.
var str = document.getElementById("btn").textContent;두 속성의 차이를 정리하면 다음과 같습니다.
- innerHTML: 요소 내부의 HTML 마크업까지 포함하여 반환하며, 값을 설정할 때 태그가 해석됩니다.
- textContent: 태그를 제외한 순수 텍스트만 반환하며, XSS 위험 없이 안전하게 텍스트를 다룰 수 있습니다.
이처럼 innerHTML 또는 textContent 속성만 활용하면 별도의 라이브러리 없이도 JavaScript에서 버튼에 표시된 텍스트를 손쉽게 가져올 수 있습니다.