본문 바로가기

자바스크립트 JavaScript

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는 더 선호된다.