id, class, name을 이용해 value 값을 구해보자.
<!DOCTYPE html>
<html>
<head></head>
<body>
<input type="text" class="demoClass" id="demoId" name="demoName" value="demo">
</body>
</html>
id를 이용해 value 값 구하기
document.getElementById("demoId").value;
모든 ID는 고유해야 한다.
만약 동일한 id를 가진 요소가 둘 이상 존재하면 메소드는 첫 번째 요소를 반환한다.
여러 요소를 선택하고 싶을 때는 태그 이름이나 클래스와 같은 다른 방법을 사용해야 한다.
해당 id를 가진 요소가 존재하지 않는 경우에는 null을 반환한다.
class를 이용해 value 값 구하기
document.getElementsByClassName("demoClass")[0].value;
class로 value 값을 가져오기 위해서는 배열 인덱스(예: [0])를 필수적으로 넣어야 한다.
name을 이용해 value 값 구하기
document.getElementsByName("demoName")[0].value;
name으로 value 값을 가져오기 위해서는 배열 인덱스(예: [0])를 필수적으로 넣어야 한다.
객체, 프로퍼티, 메소드
자바스크립트의 기본 타입(data type)은 객체(object)다.
객체란 이름(name)과 값(value)으로 구성된 프로퍼티(property)의 정렬되지 않은 집합이다.
자바스크립트에서는 숫자, 문자열, 불리언, undefined 타입을 제외한 모든 것이 객체이다.
프로퍼티(Property)는 속성을 의미하며, 이름(name)과 값(value)으로 구성된다.
프로퍼티를 사용하면 속성 값을 반환하거나 새로운 값을 할당할 수 있다.
프로퍼티 값으로 함수가 올 수도 있는데, 이러한 프로퍼티를 메소드(method)라고 한다.
document, getElementById(), value
document 객체의 getElementById()나 getElementsByTagName() 등의 메소드를 사용하여 HTML 요소를 선택한다.
Document 객체는 웹 페이지 그 자체를 의미한다.
웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시 Document 객체부터 시작해야 한다.
getElementById() 메소드는 특정 id를 가지고 있는 dom 요소에 접근한다.
요소가 존재하지 않는 경우에는 null을 반환한다.
value 프로퍼티를 사용하면 속성 전체에 접근할 수 있다.
참고한 글
https://www.w3schools.com/jsref/met_document_getelementbyid.asp
https://ko.javascript.info/dom-attributes-and-properties
https://blog.hexabrain.net/153
http://www.tcpschool.com/javascript/js_object_concept
http://www.tcpschool.com/javascript/js_dom_element
http://www.tcpschool.com/javascript/js_intro_output