getElementById()없이 id.value가 가능한 이유
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sample</title>
<script>
function check()
{
a = document.getElementById("id").value.trim();
if(a.length<6)
{
alert("6자리 이상 입력하세요");
}
}
</script>
</head>
<body>
아이디 :
<input type="text" id="id" size=10>
<input type="button" value="확인" onclick="check()">
</body>
</html>
일반적으로 자바스크립트에서 특정 ID의 텍스트 상자 값을 가져올 때
위 예제와 같이 document.getElementById("id").value를 이용한다.
그러던 중 우연히 id.value를 사용해봤는데, document.getElementById("id").value와 동일하게 동작했다!
여기서 두가지 의문이 생겼다.
1. id.value는 어떤 원리로 동작하는 것인가?
2. id.value와 같은 단순한 형태를 두고 우리는 왜 굳이 getElementById를 사용하는가?
1. id.value의 동작원리
html 태그의 id 속성값은 자바스크립트에서 전역변수로 사용될 수 있다.
x = document.getElementById("id");
var result = x.value;
위의 x가 전역변수일 때, x.value를 통해 x의 value값을 얻을 수 있듯이
id가 전역변수가 된다는 것은 id.value의 문법이 가능해지는 것이다.
2. id.value 형태를 지양하는 이유
그럼 이런 단순한 문법을 두고 왜 getElementById 더 긴 형태를 쓰는 것일까?
<input type="text" id="aa" size=10>
예제와 같이 id값이 aa인 텍스트 상자를 생성한다.
function hi()
{
alert(aa.value);
}
aa = 10;
그리고 hi() 함수에서 aa.value의 값을 alert()하도록 한다.
극단적이지만, 이후에 aa라는 number타입 변수가 생성되었다.
aa는 이전에 선언된 element.id로서의 aa를 number타입으로 덮어버려서
hi()함수는 더 이상 그 기능을 수행하지 못 할것이다.
결론적으로 위와 같은 특징 때문에 id.value 형태의 사용은 지양되고, 반대로 getElementById는 더 선호된다.
출처 : https://moalgong.tistory.com/21
getElementById()없이 id.value가 가능한 이유
아이디 : 일반적으로 자바스크립트에서 특정 ID의 텍스트 상자 값을 가져올 때 위 예제와 같이 document.getElementById("id").value를 이용한다. 그러던 중 우연히 id.value를 사용해봤는데, document.getElementByI
moalgong.tistory.com
'Javascript' 카테고리의 다른 글
| 도로명주소 검색 기능 구현 (feat. Daum PostCode Service) (0) | 2023.05.10 |
|---|---|
| keydown(), keyup() 이벤트 (0) | 2022.12.27 |
| const vs let (feat. 호이스팅) (2) | 2022.12.20 |
| null,undefined,empty 체크 (0) | 2022.12.12 |
| form이벤트 onfocus, onblur, onchange, onsubmit - 포커스얻을시, 포커스잃을시, 교체시, 폼보낼시 (0) | 2022.12.02 |