id 와 name 을 구분 못하는 IE
dev | 2005-10-12
오늘 javascript로 <a href="/home/archive_javascript.php#TabbedContents">뭘좀 만들다가</a> 황당한 것을 경험했습니다.<pre class="code"><p>
<span id="IsThisIdOrName">ID</span>
<span name="IsThisIdOrName">Name</span>
</p>
<script type="text/javascript">
alert(document.getElementsByName("IsThisIdOrName").item(0).innerHTML);
</script></pre>IsThisIdOrName 이라는 name 을 가지고 있는 element 의 innerHTML 을 보여주는 간단한 스크립트 입니다. 예상되는 결과는 당연히 Name 인데 IE 는 ID 를 보여주는 군요. IE는 id 나 name 을 구분하지 않고 제일 처음에 나온 element 를 참조 합니다. document 도 안쓰고, id 나 name 으로 분별없이 참조 하는 것을 볼 때 충분히 우려 했던 것이지만 막상 <em>당하니</em> 좀 그렇군요.
하고싶은 말은 많은데 IE가 표준을 지키지 않는 다는 것은 다들 알고 있으니 별다른 얘기는 필요가 없겠죠.
getElementById 와 getElementsByName 을 사용할 때 id 와 name 을 같은 값으로 정하는 것은 피해야 합니다.
Share on
Comments
그 머시냐... xhtml 1.0 에서 name 대신 id 사용하기를 권장하지만 기존 브라우저와의 호환성도 있고 해서 폼에 쓰는 name 과 id 를 함께 기록하는 방식이 대안(?)으로 제시되었죠. 근데 1.1 부터는 강제 사항은 아닐지라도 브라우저가 id 로만 된 값을 submit 할 때 서버로 넘겨주질 않으니 이건 차후 브라우저가 설령 지원하더라도, 기존 브라우저 때문에 결국 name 을 버릴 수는 없겠더군요. 저는 css 에서의 이름이랑 html 에서 같은 id 이름이 있으면 왠지 찝찝해집니다. js 로 따로 구현하지 않으면 별로 상관 없더라도 괜히 머리 속에서 꼬이는 느낌도 들고.. 그래서 css 파일이 커지면 html 에서 지정한 id 값 중에 혹시라도 겹치는 게 없는지 살펴보게 되더군요. 가령 [css] .foo { color: blue; } [html] <span class='foo'>bar</span> ... <input type='text' value='' id='foo' /> 이런 식으로 될 때가 생기지 않을까 우려가 되곤 합니다. 짜다보면 가끔 겹치는 경우가 있는지라.. 그럴 땐 이름 고민하면서 다른 걸로 바꾸곤 하죠. ..좀 편집증적이죠? -_-;
저도 id 사용을 권장한다고 하여 id를 써주고 싶지만 id 만으로는 폼값이 넘어가지를 않으니 name을 쓸 수 밖에 없는게 답답합니다. label을 사용할때 name, id 둘다 써야하니 코드가 지저분해져서 참 싫습니다. 에휴~
'컨텐츠 Tab 형식으로 보여주기' 업데이트 중이셨군요 ^^