setAttribute 에 대해서.

[박민권]

태그엘리먼트객체.new = 1;
태그엘리먼트객체.setAttribute("new", 1);

익스에서는 위와 같이 값을 입력했을경우 동일하게 먹었는데

모질라에서는 서로 다른 것으로 분류하더군요.

태그엘리먼트객체.new = 2;
태그엘리먼트객체.setAttribute("new", 1);

alert(태그엘리먼트객체.new);

위의 코드를 돌리면 익스는 1을 표시하고 모질라는 2를 표시합니다.

태그엘리먼트객체.getAttribute('new'); 라고 해야 1을 불러오더군요.

모질라가 맞기는 한거 같은데 과연 [ 태그엘리먼트객체 .프로퍼티 = 값 ]
이렇게 써도 문제는 없는건가요?
태그객체나 사용자정의 객체나 동일하게 위처럼 프로퍼티를 줄 수 있는건가요?
비규정인가 싶어서...

[hyeonseok]

제가 알기로...표준에 위배되는 것은 아닙니다.
저도 그게 궁금해서 좀 찾아 봤는데 DOM 표준에도 그런식으로 값을 assign, reference 하는 법이 나옵니다. 둘다 표준인 것이지요.

단, 저같은 경우 className 을 변경하기 위해 많이 사용하는데...

IE 의 경우 setAttribute 로 className 을 변경하면 적용이 안됩니다.
그래서 저는 어쩔 수 없이 그냥
HTML엘리먼트.className = "어쩌구";
이렇게 씁니다.

역시나 CSS 지원을 제대로 안하는 모습을 볼 수 있죠. ㅎ

[박민권]

왠만하면 표준을 준수해서 만들려고 하다보니 뭐 하나만 애매해도 해외 사이트
전부 뒤지느라 뒤지겠습니다. ㅡㅡ;;

국내는 너무 표준에 무감각해서...

이번에 모든 브라우저에서 다 돌아가는 레이어로 만든 콤보박스를 만들고 있는데

IE랑 맞추느라 정말 삽질 많이 했답니다. 휴~ 땀나~

[hyeonseok]

수고가 많으십니다. 저도 콤보하나 만든게 있는데...이게 해도해도 끝이 없더군요...계속 추가되는 기능과 아이디어...^^

자스 노가다할때...

http://www.ecma-international.org/
http://w3c.org/DOM/

그리고...최고의 동반자...

http://google.com

참조하시면...될듯...^^
저는 spec 다운 받아놓고 찾아보면서 씁니다.

다만드시면 좀 보여주세요~ ;;

[박민권]

저도 구글 아주 즐겨 이용하죠. ^^

좋은 사이트 추천 감사드립니다.

[tenshi]

해당 element의 객체에 html 표준이 아닌 attribute를 적용할 때에는

setAttribute를 사용하기를 권고드립니다.

표준인 attribute라 함은..

tagName, className, style, name... 그리고 tag의 종류에 따라 src, width, height.. 등등이 있습니다.

XHTML 1.0의 표준에 따라 attribute의 값이 생략된 경우 attribute명을 곧 값으로 지정해주는 것도 강력히 권고드릴만한 방식입니다.
(ex. <input readonly="readonly">

Opera 버전 7.5x 같은 경우는 위에서 언급한 값이 생략된 attribute를 자바스크립트에서 컨트롤할 때 약간의 버그가 있습니다. 물론 표준 attribute들은 문제가 없었습니다만..

IE 의 경우 setAttribute 로 className 을 변경하면 적용이 안됩니다.
그래서 저는 어쩔 수 없이 그냥
HTML엘리먼트.className = "어쩌구";
이렇게 씁니다.

참고로 위와 같은 경우는..
attribute명은 class인데.. 접근 방식이 다르게 적용되는 예입니다.
class가 예약어이기 때문이죠..
따라서 setAttribute로 적용할 경우, attribute명에 따라
setAttribute("class", "blah") 식으로 사용하시면 되겠네요

[hyeonseok]

IE 의 경우 setAttribute 로 className 을 변경하면 적용이 안됩니다.
그래서 저는 어쩔 수 없이 그냥
HTML엘리먼트.className = "어쩌구";
이렇게 씁니다.

참고로 위와 같은 경우는..
attribute명은 class인데.. 접근 방식이 다르게 적용되는 예입니다.
class가 예약어이기 때문이죠..
따라서 setAttribute로 적용할 경우, attribute명에 따라
setAttribute("class", "blah") 식으로 사용하시면 되겠네요

스펙에서는 class 는 예약어이기 때문에 사용안하는 것이아니라 class 가 일반적으로 다른 language 에서 자주 사용되기 때문에 혼동을 피하기 위해서 className 을 사용한다고 합니다. 잘 기억은 안나는데 DOM HTML Binding 관련해서 DOM level1 에서는 class 였다가 DOM level2 에서 class 가 className 으로 변경되었을 겁니다.

그리고 setAttribute 는 말씀해 주신것이 맞는데 유감스럼게 IE 는 지원을 못하더군요.
여러가지를 다 해봤는데....
element.className 은 IE, FF 둘다 되고요.
element.setAttribute("className", "blah"); 는 IE는 되고 FF 는 안됩니다.
element.setAttribute("class", "blah"); 는 IE는 안되고 FF 는 됩니다.
element.class 은 DOM 스펙이 변경되면서 오류죠.

class 는 attribute 이고, DOM 으로는 className 으로 접근하는게 맞으므로 FF 가 정상적인 작동을 보인다고 할 수 있죠.

결론은 IE 는 setAttribute 로 class attribute 의 value 는 변경할 수 있지만 랜더링에 오류가 있습니다. (적용이 안됩니다.)

[tenshi]

아.. 그런가요?

언젠지 기억은 안납니다만..

제가 예전에 테스트했을 땐.. setAttribute("class")로 적용이 되었던 것 같았는데..

오래전이라, 제가 뭔가 착오를 했나보네요. 짚어주신 것 감사드립니다.

그런데.. class는 js 2.0부터 사용되기 때문에.. DOM level2에서 변경된 것이 아닌가요? '~'


ps.....
. 매뉴얼을 참고하지 않은채 머리속의 잘못된 정보로 글 쓴 것 사과드립니다.
. setAttribute는 html 표준에 지정된 attribute가 아닌 경우에만 사용하는 것이 좋겠다는 결론이 서겠군요!

[박민권]

스펙에서는 class 는 예약어이기 때문에 사용안하는 것이아니라 class 가 일반적으로 다른 language 에서 자주 사용되기 때문에 혼동을 피하기 위해서 className 을 사용한다고 합니다. 잘 기억은 안나는데 DOM HTML Binding 관련해서 DOM level1 에서는 class 였다가 DOM level2 에서 class 가 className 으로 변경되었을 겁니다.

그리고 setAttribute 는 말씀해 주신것이 맞는데 유감스럼게 IE 는 지원을 못하더군요.
여러가지를 다 해봤는데....
element.className 은 IE, FF 둘다 되고요.
element.setAttribute("className", "blah"); 는 IE는 되고 FF 는 안됩니다.
element.setAttribute("class", "blah"); 는 IE는 안되고 FF 는 됩니다.
element.class 은 DOM 스펙이 변경되면서 오류죠.

class 는 attribute 이고, DOM 으로는 className 으로 접근하는게 맞으므로 FF 가 정상적인 작동을 보인다고 할 수 있죠.

결론은 IE 는 setAttribute 로 class attribute 의 value 는 변경할 수 있지만 랜더링에 오류가 있습니다. (적용이 안됩니다.)

맞습니다. 저도 이번에 이 부분을 여러모로 테스트해봤는데 위의 결과와 같았습니다.