js 인풋박스 셀렉트에 대한 소고

js 인풋박스 셀렉트에 대한 소고

자바스크립트로 HTML요소, 예를 들면 인풋박스의 값을 가져올 때 document의 getElementById를 쓰거나 JQuery로 셀렉트하는게 일반적이다.

이를 테면 document.getElementById(“temp”).value; 또는 $(“#temp”).val(); 와 같이 말이다.

그런데 회사 옛날 코드를 보면 그렇지 않고 temp.value; 와 같은 코드가 많다. 여태 별 신경쓰지 않았는데 회사 동료가 구체적으로 물어봐서 테스트해봤다.

테스트 결과 인풋박스의 경우 [id].value 를 사용하면 해당 인풋박스를 찾아온다. 아마 브라우저 렌더링 과정에서 document객체에 인풋박스 아이디들을 하위요소로 넣어주는 것 같다.

문제는 익스플로러에서는 [id].value 와 [name].value 를 다 잘 가져오는데, 크롬은 id로만 가져올 수 있고 name은 가져오지 못한다. 브라우저마다 디펜던시가 있는 것으로, 파이어폭스와 오페라, 사파리도 각각 다를 것이라 추정된다.

이럴 것을 알고 과거부터 번거로워도 document.getElementById 를 고수해왔다. 게다가 해당 변수가 운 나쁘게 전역변수로 쓰이고 있을지도 모르지 않는가? 나는 고전적인 코드가 좋다. 브라우저 종류와 버전을 잘 타지 않는 범용 코드 말이다.