HTML DOM value 속성 완벽 정리 – 요소 속성값을 문자열로 가져오는 방법

HTML DOM의 value 속성은 요소가 가진 특정 속성(attribute)에 해당하는 값을 문자열(string) 형태로 반환합니다. 예를 들어 이미지 태그의 src 속성값이나 버튼의 value 속성값 등을 자바스크립트로 손쉽게 읽어올 수 있습니다.

문법(Syntax)

value 속성은 다음과 같은 형태로 사용하며, 해당 속성의 값을 문자열로 반환합니다.

elementAttribute.value

여기서 elementAttribute는 element.attributes 컬렉션에서 가져온 개별 속성 객체를 의미합니다.

HTML DOM value 속성 예제

아래 예제는 페이지에 있는 이미지 요소의 첫 번째 속성(src) 값을 읽어와 화면에 출력하는 코드입니다. 버튼을 클릭하면 getAnswers() 함수가 실행되어 속성값을 표시합니다.

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM value</title>
<style>
   * {
      padding: 2px;
      margin:5px;
   }
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   input[type="button"] {
      border-radius: 10px;
   }
</style>
</head>
<body>
   <form>
      <fieldset>
         <legend>HTML-DOM-value</legend>
         <img src="https://www.tutorialspoint.com/jdbc/images/jdbc-mini-logo.jpg">
         <div id="divDisplay">What is src attribute's value?</div>
         <input type="button" value="Get Answer" onclick="getAnswers()">
      </fieldset>
   </form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   function getAnswers() {
      var ans = document.getElementsByTagName('img')[0].attributes[0].value;
      divDisplay.textContent = 'src attribute has a value '+ans;
   }
</script>
</body>
</html>

코드 설명

document.getElementsByTagName('img')[0] : 문서에서 첫 번째 <img> 요소를 선택합니다.
.attributes[0] : 해당 요소의 첫 번째 속성 노드, 즉 src 속성에 접근합니다.
.value : 그 속성의 실제 값을 문자열로 반환합니다.

실행 결과

'Get Answer' 버튼을 클릭하기 전에는 초기 안내 문구가 화면에 표시됩니다.

HTML DOM value 속성 완벽 정리 – 요소 속성값을 문자열로 가져오는 방법

버튼을 클릭하면 자바스크립트가 실행되어 src 속성의 실제 값이 아래와 같이 출력됩니다.

HTML DOM value 속성 완벽 정리 – 요소 속성값을 문자열로 가져오는 방법

정리

HTML DOM의 value 속성은 요소의 속성값을 문자열로 읽어올 때 사용하는 기본적인 방법입니다. 폼 입력값 확인, 동적 콘텐츠 처리, 조건 분기 등 다양한 상황에서 활용할 수 있으므로 DOM 조작의 기초로 꼭 익혀두는 것이 좋습니다.