HTML DOM Textarea defaultValue 속성 – 기본값 조회 및 변경 방법

HTML DOM의 Textarea defaultValue 속성은 HTML 문서에서 텍스트 영역(textarea) 요소의 기본값을 가져오거나 수정할 때 사용됩니다. 이 속성을 활용하면 자바스크립트만으로 textarea에 처음 설정된 내용을 동적으로 읽어오거나 새로운 값으로 교체할 수 있습니다.

문법(Syntax)

defaultValue 속성의 기본 문법은 다음과 같습니다.

1. defaultValue 값 가져오기

object.defaultValue

2. defaultValue 값 설정하기

object.defaultValue = "text"

이제 HTML DOM Textarea defaultValue 속성의 실제 동작 예제를 살펴보겠습니다.

예제(Example)

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        background: lightseagreen;
        height: 100vh;
    }
    .btn {
        background: #db133a;
        border: none;
        height: 2rem;
        border-radius: 2px;
        width: 40%;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
    }
</style>
<body>
<h1>DOM Textarea defaultValue Property Demo</h1>
<textarea rows="5" cols='20'>Hi! I'm a textarea element with some dummy text.</textarea>
<button onclick="set()" class="btn">Change Default Value</button>
<script>
    function set() {
        document.querySelector("textarea").defaultValue = "Hi! I'm default value of textarea element.";
    }
</script>
</body>
</html>

실행 결과(Output)

HTML DOM Textarea defaultValue 속성 – 기본값 조회 및 변경 방법

위 예제를 실행한 후 “Change Default Value” 버튼을 클릭하면, 자바스크립트의 set() 함수가 호출되어 textarea 요소의 defaultValue가 새로운 문자열로 변경됩니다. 버튼 클릭 전에는 원래 작성되어 있던 더미 텍스트가 표시되지만, 클릭 후에는 지정한 기본값으로 내용이 바뀌는 것을 확인할 수 있습니다.

HTML DOM Textarea defaultValue 속성 – 기본값 조회 및 변경 방법

정리

defaultValue 속성은 HTML에 처음 작성된 초기값을 기준으로 동작한다는 점에서 value 속성과 차이가 있습니다. 즉, 사용자가 화면에서 입력 내용을 수정해도 defaultValue는 변하지 않으며, 폼 리셋(reset) 시 textarea가 되돌아가는 값이 바로 이 defaultValue입니다. 따라서 초기값을 관리하거나 폼 초기화 로직을 구현할 때 유용하게 활용할 수 있습니다.