看板 Ajax 關於我們 聯絡資訊
今天在改東西的時候小撞兩個地方, 雖然比較有經驗或有看過 ECMA-262 的大大應該都知道, 但小弟還是是小小分享一下好了 XD 第一個是關於 getElementsByTagName 這個函式,傳回的其實是參照, 小弟用以下 code 來測試: <div id="block"> <p>a</p> </div> <script language="javascript"> var pSet = document.getElementById ('block').getElementsByTagName ('p'); alert (pSet.length); anotherP = document.createElement ('p'); anotherP.innerHTML = 'b'; document.getElementById ('block').appendChild (anotherP); alert (pSet.length); </script> 這段 code 在 IE6 / MF 2 上面跑,第一次 alert 是 1 ,第二次是 2, 所以結論是: 當 DOM 被異動的時候, 如果不是它會主動通知每個曾經來詢問過的資料體要加上新的東西, 那就是這個 pSet 其實只是 getElementsByTagName 的函式參照, 每當我們使用它的時候,他都會重新回去執行一次。 小弟以前有遇到類似的情況,用取回的集合(像 pSet)做 for 的 removeChild, 而當 pSet 的內容因為 removeChild 而減少的時候, 很直覺以為是因為 node 從 pSet 中被移除了。 (以前腦袋沒有意識到,如果 pSet 取得的是 p 本身,即使從 DOM 中被移掉, 也應該還在記憶體內,還可以被 pSet Array 所連結到才對) 第二個狀況是 IE 6 的 bug,使用 createElement ('input') 所造出的 input, 在塞進 DOM 後會無法給予 name 屬性,無論怎麼設都一樣, MSDN http://msdn.microsoft.com/zh-tw/library/ms536389(en-us,VS.85).aspx 有提到改用 document.createElement("<INPUT TYPE='RADIO' " + "NAME='RADIOTEST' VALUE='First Choice'>"); 的方式來做,但很明顯的,這種詭異語法在 MF 或其他正常的瀏覽器上都無法運作, 而瀏覽器判別又有點煩,所以後來我改用 spanInput = document.createElement ('span'); spanInput.innerHTML = "<INPUT TYPE='RADIO' " + "NAME='RADIOTEST' VALUE='First Choice'>"; 藉由這個方式來規避 IE 6 的 createElement bug (因為還是想要操作節點,節點 - spanInput 可以塞進 Array 再利用) 以上,如果有什麼地方觀念有誤的,還請前輩不吝指點。 orz -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 118.160.164.240 ※ 編輯: gpmm 來自: 118.160.164.240 (06/21 01:34)
Kelunyang:有方法,setAttribute("name","你要的name") 06/21 10:52
Kelunyang:我不知道是不是同一個問題,但是我在.id上也是遇到一樣 06/21 10:53
Kelunyang:的問題 06/21 10:53
gpmm:setAttribute 我試過是不行的,還是你的瀏覽器版本不一樣? 06/21 13:33
Kelunyang:呃,真的看起來就只有這種作法而已@@" 06/21 14:36
Kelunyang:我查了一下另外一種作法是指針對IE下 06/21 14:36
Kelunyang:createElement("<input name='abc'>") 06/21 14:36
Kelunyang:但是其他瀏覽器都不吃,所以還得作偵測... 06/21 14:37
Kelunyang:IE6 真麻煩Orz 06/21 14:38
gpmm:XDD 06/21 15:18
JYHuang: 不知道跟我在 #7pAxSwI 遇到的是不是類似的情形? 06/21 17:47
JYHuang: createElement建立的DOM Obj無法用getElement取得物件 06/21 17:48
JYHuang: getElementsByName 06/21 17:49
wctang:第一個狀況,答案是每次取 length 都會 re-query,非常慢 06/21 22:41
wctang:請參考 http://www.youtube.com/watch?v=mHtdZgou0qU 06/21 22:42
wctang:以上演講強力推薦 06/21 22:44
gpmm:感謝樓上指點 :P 小弟再去研究一下 06/22 00:08
fillano:幫推 http://developer.yahoo.com/yui/theater/ 有很多好 06/22 09:36
fillano:東西,Crockford講ajax performance那一篇也有提到wctang 06/22 09:37
fillano:那一篇講到的效能關鍵。 06/22 09:38
gpmm:這樣怎麼看得完啊 XDD (滾) 06/22 10:12
adamp3:推YUI theater很多好東西可以看喔 06/24 17:47
tomin:theater會不會只是在講YUI的好處呀? 06/25 01:02
tomin:看來沒有 講得很全面 06/25 01:56
fillano:有PPK、John Resig、Douglas Crokford、Zakas甚至Booch耶 06/25 08:50