왜 js에선 name.value이 아니라 document.getElementById("name").value를 쓰는걸까?
document.getElementById("name").value와 같은 표현은 JavaScript에서 웹 페이지의 특정 요소를 선택하고 그 요소의 속성에 접근하기 위해 사용됩니다. 이 구문을 이해하려면 두 가지 중요한 부분을 알아야 합니다: document.getElementById("name")와 .value입니다.
document.getElementById("name")
document: 현재 웹 페이지의 문서를 나타내는 객체입니다. HTML 문서 전체를 의미합니다.getElementById("name"):document객체의 메서드로,"name"이라는 ID를 가진 HTML 요소를 찾습니다. 이 메서드는 해당 ID를 가진 요소를 반환합니다.
예를 들어, HTML 코드에서 다음과 같은 요소가 있다고 가정해 보겠습니다:
<input type="text" id="name" value="John Doe">여기서 id="name"을 가진 <input> 요소가 있습니다. JavaScript에서 이 요소를 선택하려면 document.getElementById("name")를 사용합니다.
.value
.value: 선택한 요소의 값을 가져오거나 설정하는 속성입니다.<input>,<textarea>,<select>같은 입력 요소에서 사용됩니다.
따라서 document.getElementById("name").value는 ID가 "name"인 요소의 값을 가져옵니다. 위의 예에서 이 구문은 입력 필드의 현재 값을 가져오며, "John Doe"를 반환합니다.
왜 document.getElementById("name").value가 필요한가?
-
HTML과 JavaScript의 분리: HTML에서 요소의 속성(예: 값)을 직접 조작하는 대신, JavaScript를 통해 동적으로 접근하고 변경할 수 있습니다.
document.getElementById("name")는 특정 요소를 선택하고,.value를 통해 그 요소의 속성에 접근할 수 있게 해줍니다. -
JavaScript 접근: JavaScript에서 HTML 요소를 직접 조작하려면 먼저 요소를 선택해야 합니다.
document.getElementById("name")는 선택된 요소를 반환하고,.value는 이 요소의 값을 가져오거나 설정하는 데 사용됩니다.
요약
document.getElementById("name"): HTML 문서에서 ID가"name"인 요소를 찾습니다..value: 선택한 요소의 값을 가져오거나 설정합니다.- 두 구문을 결합하면, 특정 요소의 값을 쉽게 조작할 수 있습니다.
=>애초에 js가 가져오려는 요소는 js내에 있는게 아닌 html로부터 존재하는 요소이다. 그러므로 document.getElementById("요소 이름")으로 해당 요소를 찾는다. 그리고 선택한 요소는 특정한 값(value)를 가지는데, 이를 js가 가져오기 위해서 .value 이런식으로 해당 요소의 특정한 값을 가져온다.
