1. value 속성
html 요소에서 주로 입력값을 관리하거나 조작할 때 사용한다. 주로 form 요소와 함께 쓰이며,
사용자가 입력한 값을 읽어들일 때 요소의 value 속성에 접근한다.
form 요소로부터 여러 입력 값을 읽어들일 때는, 개별 입력 요소의 name 속성값을 토대로 입력값에 접근할 수 있다.
textContent : 요소에 쓰여져 있는 텍스트에 접근하고 싶다.
value : 사용자가 직접 요소에 입력한 값에 접근하고 싶다.
2. value 하는 일
value 속성에 접근하면, 크게 읽기와 쓰기를 할 수 있다.
사용자가 입력한 값을 읽거나 직접 value 값에 입력하거나 하는 경우이다.
//사용자가 작성한 값을 콘솔창에 출력 요청
console.log(target.value)
//사용자가 작성 전에 미리 값을 기입
target.value = "입력값"
또한 value 속성이 사용되는 요소가 있다.
- <input> 요소: 텍스트, 숫자, 이메일, 비밀번호 등의 입력값 관리.
- <textarea> 요소: 다중 줄 텍스트 입력값 관리.
- <select> 요소: 선택된 옵션의 값을 반환.
해당 요소들은 사용자에게 값을 전달받는 요소들이다.
- input을 사용한 value 값 예시
<input type="text" id="nameInput" value="기본값">
<script>
const inputValue = document.getElementById('nameInput').value;
console.log(inputValue); // '기본값' 출력
</script>
inputValue 는 nameInput 이라는 id를 가진 요소의 value를 할당하는 변수 이다.
nameInput 이라는 id를 가진 input 요소의 value 는 기본값이다.
그래서 console.log(inputValue); 를 출력 했을 때 기본값이 나온다.
- textarea를 사용한 value 값 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Textarea Value 예시</title>
</head>
<body>
<textarea id="myTextarea" rows="5" cols="30">기본 텍스트</textarea>
<button onclick="changeTextareaValue()">값 변경</button>
<script>
function changeTextareaValue() {
const textarea = document.getElementById('myTextarea');
textarea.value = "코메와 함께 코딩은 즐거워!";
console.log("변경된 값:", textarea.value); // 콘솔에 변경된 값 출력
}
</script>
</body>
</html>
button 을 눌렀을 때 changeTextareaValue() 라는 함수가 실행된다.
changeTextareaValue()는 어떻게 실행이 되냐면,
"myTextarea"라는 id를 가진 요소를 가지고 와서, 해당 요소의 value 값을 "코메와 함께 코딩은 즐거워!"으로 바꿔준다.
버튼을 누르면 기존에 있는 값인 "기본 텍스트"가 아닌 함수에서 만들어진 value 값 "코메와 함께 코딩은 즐거워!"으로 바뀌어진다.
textarea 태그 사이에 있는 값은 textContent로 안 바뀌어질까?
textarea는 입력값으로만 작동해서 html 로 선언된 텍스트가 아닌,
사용자가 입력하거나 프로그래밍적으로 설정된 값은 value로 다루기 때문이다.
textContent는 일반적으로 태그 내부의 텍스트 노드를 나타내며,
textarea 태그의 경우 콘텐츠가 아닌 태그 자체의 텍스트로 취급돼서 textContent를 바꾸더라도 입력 값에는 영향이 없다.
'코딩이론 > Javascript' 카테고리의 다른 글
| chapter.15 Closure (0) | 2025.01.09 |
|---|---|
| chapter.13 이벤트 핸들링 (1) | 2024.12.03 |
| chapter.12 인수(Argument) 와 반환 (retrun) (0) | 2024.12.03 |
| chapter.10 화살표 함수(Arrow Function) (0) | 2024.12.03 |
| chapter.09 함수 (0) | 2024.12.02 |