Safari버그 - element의 attributes 속성

Safari의 버그라기 보다는 다른 브라우져와 다른 점이 더 가깝겠네요.
특정한 element에 사용자가 정의한 attribute를 집어넣고 DOM으로 가지고 오려고 가정을 해보구요.

예를 들자면, 다음과 같이 되겠네요. (bookid가 사용자 정의 id가 됩니다.)

<img  alt="..." src="..." bookid="..." />

이 태그를 JavaScript에 접근하려고 할 때, 사용할 수 있는 방법 중 하나가 attributes 속성입니다.
일반적인 브라우져로는 attributes를 사용하여서 img 태그의 alt, src 또는 bookid를 접근할 수 있습니다.

var bookid = imgTag.attributes['bookid'].nodeValue;

attributes는 NamedNodeMap 인터페이스를 구현하고 있기 때문에 attributes['bookid']를 통하여 (Attribute) Node에 접근하고 이 Node의 nodeValue값을 통해서 값을 사용할 수 있습니다.

그런데, Safari 2(PowerPC)에서 테스트를 하다보니 동작을 하지 않아서 확인해보니 Safari 2에서는 사용자가 정의한 속성에 대해서는 element.attributes를 통하여 접근을 허용하지 않더군요. getAttribute()는 허용을 합니다.

※ Safari 3은 테스트를 못해봤습니다.

Safari버그 - 화면에 보이지 않는 Textarea에 값을 설정하는 경우..

• Safari 버전: 2.0.3
  
• 플랫폼: OS X 10.4

팝업을 띄워서 Textarea에서 값을 받아 설정하는 프로그램(텍스트 + html)을 짜서 Safari에서 테스트를 하는데 안되더군요.
처음에는 코드를 잘못짰나 싶어서 다시 보았는데 Safari의 버그더군요.

Element.show(dialog);
form.dialog_form.textarea.value = "..."

와 같은 코드가 원래 사용한 코드였습니다. 실제로는 좀 더 많은 코드가 사용되기는 합니다만.. 다이얼로그가 화면에 출력되기 전에는 form.value의 값이 동작하지는 않더군요.

그러나, 다이얼로그가 뜬 다음에 주소창에 javascript:form.dialog_form.textarea.value = "..."를 설정하는 경우는 정상적으로 값이 설정이 되었습니다. 구글에서 검색해보니 관련한 버그에 대한 내용이 좀 나오더군요.

Element.show(dialog);
form.dialog_form.textarea.innerHTML = "<span style="color:red;">메모</span>입니다."

저의 경우 이를 해결하기 위해서 innerHTML을 사용해봤습니다만, 동작을 하지 않더군요. 텍스트를 저장하는 것은 가능하였습니다만, html을 입력하는 경우에는 동작을 하지 않더군요. (<span>~</span>은 잘리고 입니다만 나오더군요.)

Element.show(dialog);
form.dialog_form.parentNode.innerHTML = "<textarea><span style="color:red;">메모</span>입니다.</textarea>"

해결책으로 삼은 것은 textarea의 parentNode의 html을 바꿔버리는 것으로 해결은 했습니다만...


이런 버그가 있더군요 =.= ;;

관련 자료: Brian Hartsock's Blog - Safari Textarea bug