document.getElementsByName() 삽질기

문제의 시작

기존 시스템에서 document.getElementsByName()을 통해서 Dom Elements를 찾는 script가 있었습니다.(보통 jquery를 사용하나 해당 시스템은 jquery 사용 않하네요 ㅠ)

문제는 Elements를 정상적으로 찾아오지 못하는 현상이 발견되었습니다. 원인을 확인하면서 id 속성을 잘못 지정하고 있는 것을 확인하였습니다.

HTML 태그에서 id 속성은 document에서 유일하게 지정하는 것이 정상적인 사용법입니다.(아래 참고, name 속성은 중복 가능)

<input id=“id_0001” name=“id” value=“id_0001” /> <input id=“id_0002” name=“id” value=“id_0002” /> <input id=“id_0003” name=“id” value=“id_0003” />

하지만 id 값을 동일하게 설정하면 어떻게 될까요?

<input id=“id_0001” name=“id” value=“id_0001” /> <input id=“id_0001” name=“id” value=“id_0002” /> <input id=“id_0001” name=“id” value=“id_0003” />

3개의 input tag element를 찾으려면 document.getElementsByName(“id”)로 찾을 수 있습니다.

만약 document.getElementsByName(“id_0001”)을 하면 어떻게 될까요?

재현해 보면 IE 11에서 “호환성 보기” 옵션에 따라 다르게 나타납니다. 이는 IE 버전마다 다를 수 있을 것 같습니다.

• IE 11 - 호환성 보기
• • 정상적으로 3개의 input tag element를 반환
• IE 11
• • input tag element를 찾지 못함

앞서 언급한 것처럼 대부분 jquery를 사용하기 때문에 위처럼 하지 않을 것이라는 것을 알지만 document.getElementsByName()에서 왜 input tag element를 찾지 못하는 것일까요?

W3에서 getElementsByName 메서드를 아래와 같이 소개하고 있습니다.(https://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-71555259)

getElementsByName With [HTML 4.01] documents, this method returns the (possibly empty) collection of elements whose name value is given by elementName. In [XHTML 1.0] documents, this methods only return the (possibly empty) collection of form controls with matching name. This method is case sensitive. Parameters elementName of type DOMString The name attribute value for an element. Return Value NodeList The matching elements. No Exceptions

name 속성을 검색하는 것이 표준으로 보입니다.

하지만 이는 브라우저마다 조금씩 차이가 있습니다.(http://help.dottoro.com/ljlfpmux.php 참조)

• IE
• • id, name 모두 검색
  • id, name 대/소문자 구분 X
• Firefox
• • name 만 검색
  • id, name 대소문자 구분
• Opera
• • id, name 모두 검색
  • id 만 대/소문자 구분, name은 대/소문자 구분 X
• Safari
• • name 만 검색
  • id, name 대소문자 구분
• Chrome
• • name 만 검색
  • id, name 대소문자 구분

getElementsByName()을 IE 버전별로 테스트를 해 보니 9버전까지는 id 속성을 검색하나 10버전부터는 id 속성을 검색하지 않았습니다.

아마도 IE 10버전부터는 IE도 표준을 적용한 것으로 보입니다.

그렇다면 IE 10버전 이상에서 3개의 input tag element를 찾으려면 어떻게 할 수 있을까요?(jquery를 사용하지 않고)

IE 10버전부터 사용할 수 있는 querySelector(), querySelectorAll()이 생겼습니다. 이를 활용하면 중복된 id 속성을 사용하더라도 찾을 수 있습니다.

 사용법은 아래와 같습니다.

<input id=“id_0001” name=“id” value=“id_0001” /> <input id=“id_0001” name=“id” value=“id_0002” /> <input id=“id_0001” name=“id” value=“id_0003” />

document.querySelectorAll(‘input[id=^id_]’)

[att^=val] Represents an element with the att attribute whose value begins with the prefix "val". If "val" is the empty string then the selector does not represent anything.

자세한 사용법은 https://www.w3.org/TR/selectors/#attribute-substrings에서 확인할 수 있습니다.

querySelectorAll()은 IE 10에서 도입 되었기 때문에 IE 11에서 “호환성 보기” 옵션을 활성화하면 동작하지 않습니다.

느낀점

jquery 또한 javascript를 wrapping 해 놓은 라이브러리에 불과하다고 생각했습니다. javascript를 잘 이해하고 있다면 jqeury 또한 어렵지 않게 이해하고 사용할 수 있을 거라고 조금 쉽게 생각했던 것 같습니다. 이번 일로 jquery가 얼마나 강력한 라이브러리인지 그리고 jquery를 통해 얼마나 편하게 개발 하였는지 느낄 수 있었습니다. 

---

참고

• https://msdn.microsoft.com/en-us/library/ms536438(VS.85).aspx
• http://help.dottoro.com/ljlfpmux.php
• https://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-71555259
• http://stackoverflow.com/questions/16791527/can-i-use-a-regular-expression-in-queryselectorall
  
• https://www.w3.org/TR/selectors/#attribute-substrings