hoi~♡

최근 프로젝트부터 접근성 메뉴를 추가시켜 작업하고 있는데 현재의 스크린리더와의 호환을 맞추기 위해 빈 앵커태그를 같이 사용하고 있습니다. (해당 사항에 대해서는 CDK에 관련 댓글이 있으니 참조해주세요)

대략 소스는 위와 같은데 이 때 DOM을 이용하여 ‘top’을 getElementById로 접근하였을때 브라우저마다 접근방식이 틀리다는 것을 알게 되었습니다
몇가지 테스트를 해보니 IE와 Opera는 name속성도 getElementById 로 접근이 되더군요 -_-;
(당연히 id 속성외에는 접근이 안된다고 생각해서 ‘IE’ 모야~ 했다가 Opera도 마찬가지인 것을 보고 혼란스럽습니다;)
파이어폭스와 사파리는 제가 원래 예상한 결과였던 id 속성에 대해서만 접근을 하였습니다.

즉, 위 코드에 대해서 getElementById(”top”)으로 접근하면 IE와 Opera는 앵커 태그에 접근이 되고 파이어폭스와 사파리는 div에 접근이 되었습니다.

간단한 테스트 페이지를 만들어 보았습니다.

• 1번은 같은 이름의 name과 id가 있을때 name이 문서상 먼저 위치할 경우 getElementById의 innerHTML,
• 2번은 같은 이름의 name과 id가 있을때 id가 문서상 먼저 위치할 경우 getElementById의 innerHTML,
• 3번은 name 속성만 있는 input을 getElementById로 접근할 경우,
• 4번은 name 속성만 있는 앵커를 getElementById로 접근할 경우

1,2번의 결과는 IE,Opera팀은 먼저 입력된 엘레멘트로 접근. FF,Safari 팀은 id로 지정된 엘레멘트로 접근.
3,4번의 결과는 IE,Opera팀은 object 혹은 공백값 반환(존재). FF,Safari 팀은 null값 반환(비존재)

어쨌든 브라우저마다 틀린 해석을 하므로 name 속성과 id 속성의 네이밍이 같으면 위험하다는 결론이 나오는군요~~
혹여 같더라도 다른 엘레멘트로 존재하면 괜찮겠지만 다른 엘레멘트로 존재한다면 그때는 id 속성값이 설정된 엘레멘트가 먼저 나와야 임자를 제대로 찍을 수 있다는 거~~~~