아이디(id)와 네임(name)을 구분 못하는 인터넷 익스플로러

오늘 자바스크립트로 뭘좀 만들다가 황당한 것을 경험했습니다.

<p>
	<span id="IsThisIdOrName">ID</span>
	<span name="IsThisIdOrName">Name</span>
</p>
<script type="text/javascript">
alert(document.getElementsByName("IsThisIdOrName").item(0).innerHTML);
</script>

IsThisIdOrName이라는 name을 가지고 있는 요소의 내용을 보여주는 간단한 스크립트 입니다. 예상되는 결과는 당연히 'Name'인데 인터넷 익스플로러(Internet Explorer)는 'ID'를 보여주는 군요. 인터넷 익스플로러는 id나 name을 구분하지 않고 제일 처음에 나온 요소를 참조 합니다. document도 안쓰고, id나 name으로 분별없이 참조 하는 것을 볼 때 충분히 우려 했던 것이지만 막상 당하니 좀 그렇군요.

하고싶은 말은 많은데 인터넷 익스플로러가 표준을 지키지 않는 다는 것은 다들 알고 있으니 별다른 얘기는 필요가 없겠죠. getElementById와 getElementsByName을 사용할 때 id와 name을 같은 값으로 정하는 것은 피해야 합니다.

October 12, 2005 04:16 PM

Trackbacks

TrackBack URL: http://hyeonseok.com/soojung/trackback.php?blogid=179

Comments

On October 13, 2005 02:17 AM, yser said:

그 머시냐...

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' />

이런 식으로 될 때가 생기지 않을까 우려가 되곤 합니다. 짜다보면 가끔 겹치는 경우가 있는지라.. 그럴 땐 이름 고민하면서 다른 걸로 바꾸곤 하죠. ..좀 편집증적이죠? -_-;
On October 13, 2005 08:16 AM, A2 said:

저도 id 사용을 권장한다고 하여 id를 써주고 싶지만 id 만으로는 폼값이 넘어가지를 않으니 name을 쓸 수 밖에 없는게 답답합니다.
label을 사용할때 name, id 둘다 써야하니 코드가 지저분해져서 참 싫습니다. 에휴~
On October 13, 2005 08:43 AM, alcyone said:

'컨텐츠 Tab 형식으로 보여주기' 업데이트 중이셨군요 ^^