getElementByName 과 getElementById 차이점
Programing/JavaScript / CSS2012. 3. 27. 12:05
from 안에 선언된 객체들을 불러 올 경우 보통은 document.폼명.객체명 으로 해당 객체를
Javascript에서 참조할 것이다. 허나 오늘 얘기 하고자 하는 것은 간단하지만 놓치기 쉬운 부분에 대해
얘기 하고자 한다.
유지보수 중 Radio 버튼을 이용하여 처리를 해야 하는 경우가 발생 하였다. 조금 더 디테일 하게 얘기
하자면, 이용약관 밑에 동의여부를 만들어 달란다.
기존이라면 위의 예시 처럼 document.폼명.객체명 으로 참조 했었겠지만, 요세는 크로스 브라우징 및
웹접근성을 고려해야 하여, document.폼명.객체명 코드 보다는 document.getElementById 코드와
getElementByName 코드를 주로 사용하게 되었는데...
Radio 버튼을 두개이상 만들어서 Javascript로 제어를 하려 하니 getElementById로는 제어가 되지
않았다. 그래서 getElementByName도 사용 해봤지만 객체를 찾지 못하였다.
그래서 정리했다.
* getElementById : 객체의 고유 ID 값 참조 (싱글 객체로만 인식됨)
* getElementByName : 객체의 고유 Name 값 참조 (싱글 객체만 인식됨)
* getElementsByName : 객체의 고유 Name 값 참조 (두개 이상 동일 Name을 갖는 객체 배열로 인지)
Radio 버튼을 두개 이상 사용시 getElementsByName 로 인식이 가능하다.
자바스크립트 오류(document.XXX.XXXX은 null이거나 개체가 아닙니다) 오류 파악 방법
Programing/JavaScript / CSS2011. 4. 27. 18:07
웹 개발 및 유지보수 시 자바스크립트 오류가 나는 경우가 있다.
실제로 비즈니스 로직상의 문제는 없으나, 오류가 나는 경우가 있다.
필자도 어제 그걸로 고민을 하다가 결국 해결을 했다.
필자의 경우는 사이트(클라이언트) 쪽에 설치된 웹이 PHP+Smarty(Framework) 기반으로 개발이
되어 있었고, 유지보수를 하였다.
우선 자바스크립트 오류(document.XXX.XXXX은 null이거나 개체가 아닙니다) 오류가 날 경우
1. 참조 하려는 개체의 name이 정확한지 또는 중복인지 확인 한다.
--> 만약 틀리다면 개체 name을 맞춰 주면 되고, 중복이라면 중복된 개체 중 하나를 수정 해준다.
(아쉽게도 필자는 정상이였다. 고로 필자는 패스 했다.)
2. 참조 하는 name이 정상이라면 html 태그를 확인 하자!!
--> 웹 개발을 한 후에 유지보수를 맡은 개발자가 수시로 바뀌면서 소스는 더러워지고, 간혹 일정에
쫒겨, form 이나 table 안닫아서 문제가 생기더군요. 저도 결국 include 되는 파일에서 안닫힌
태그가 있어서 닫았 답니다.
실제로 비즈니스 로직상의 문제는 없으나, 오류가 나는 경우가 있다.
필자도 어제 그걸로 고민을 하다가 결국 해결을 했다.
필자의 경우는 사이트(클라이언트) 쪽에 설치된 웹이 PHP+Smarty(Framework) 기반으로 개발이
되어 있었고, 유지보수를 하였다.
우선 자바스크립트 오류(document.XXX.XXXX은 null이거나 개체가 아닙니다) 오류가 날 경우
1. 참조 하려는 개체의 name이 정확한지 또는 중복인지 확인 한다.
--> 만약 틀리다면 개체 name을 맞춰 주면 되고, 중복이라면 중복된 개체 중 하나를 수정 해준다.
(아쉽게도 필자는 정상이였다. 고로 필자는 패스 했다.)
2. 참조 하는 name이 정상이라면 html 태그를 확인 하자!!
--> 웹 개발을 한 후에 유지보수를 맡은 개발자가 수시로 바뀌면서 소스는 더러워지고, 간혹 일정에
쫒겨, form 이나 table 안닫아서 문제가 생기더군요. 저도 결국 include 되는 파일에서 안닫힌
태그가 있어서 닫았 답니다.
