HTML 요소에서 값을 받아오는 방법은 요소의 종류에 따라 다르다.

아래에 Input, Textarea, 그리고 Div 요소에서 값을 받아오는 방법과 그 차이점을 설명한다.

Input 요소

Input 요소는 사용자로부터 텍스트, 숫자, 날짜 등 다양한 입력을 받을 수 있다. 값을 받아오려면 value 속성을 사용한다.

<input type="text" id="myInput" value="초기 값">

const inputValue = document.getElementById('myInput').value;
console.log(inputValue); // "초기 값"

Textarea 요소

Textarea 요소는 여러 줄의 텍스트를 입력받을 수 있다. 값을 받아오려면 value 속성을 사용한다.

<textarea id="myTextarea">초기 값</textarea>

const textareaValue = document.getElementById('myTextarea').value;
console.log(textareaValue); // "초기 값"

Div 요소

Div 요소는 일반적으로 값을 입력 받는 용도로 사용되지 않는다.. 대신, 텍스트 콘텐츠를 포함할 수 있다. 값을 받아오려면 textContent 또는 innerHTML 속성을 사용한다.

<div id="myDiv">초기 값</div>

const divValue = document.getElementById('myDiv').textContent;
const divValue = document.getElementById('myDiv').innerHTML;
console.log(divValue); // "초기 값"

차이점

• Input과 Textarea 요소는 사용자로부터 직접 입력을 받는 용도로 사용되며, value 속성을 통해 값을 받아온다.
• Div 요소는 일반적으로 값을 입력받는 용도로 사용되지 않으며, textContent 또는 innerHTML 속성을 통해 텍스트 콘텐츠를 받아온다.

이와 같이 요소의 종류에 따라 값을 받아오는 방법이 다르다.