<!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는 더 선호된다.
'자바스크립트 JavaScript' 카테고리의 다른 글
| ClassName()으로 Element요소를 가져올 때 유의점 (4) | 2021.06.15 |
|---|---|
| 마우스 올려놓는 동안 색이 변하는 텍스트를 만들어보자 (0) | 2021.06.03 |
