(javascript) getElementById()/getElementsbyName() 함수가 제대로 동작하지 않을 때

getElementById() 와 getElementsByName() 은 DOM 접근을 위해 애용받는 함수다.

 

getElementById() :: http://www.w3schools.com/jsref/met_doc_getelementbyid.asp

getElementsByName() :: http://www.w3schools.com/jsref/met_doc_getelementsbyname.asp

 

이 두 함수를 사용해야할 때 주의할 점이 있는데, DOM 객체 접근을 위한 함수이다보니 HTML 이 로딩될 때 DOM 객체가 모두 로딩되기 전에 Javascript 단에서 DOM 객체 접근을 시도하면 값을 얻어오지 못하는 경우가 생긴다. 이런 경우 두 함수는 null 값을 반환한다. 제대로 작동하지 않는 것 같으면 리턴 값을 alert() 나 document.write() 등으로 확인해보자.

 

window.onload() 함수를 사용하여 HTML 이 완전히 로딩이 되고 나서 DOM 객체에 접근해야한다.

 

예제는 아래와 같다.

 

var email;
var phone;
var password;
var interest;

window.onload = function() {
 email = document.getElementById("email");
 phone = document.getElementById("phone");
 password = document.getElementsByName("password");
 interest = document.getElementsByName("interest");
}