作者gpmm (銀色)
看板Ajax
標題[心得] getElementsByTagName / createElement
時間Sun Jun 21 01:05:45 2009
今天在改東西的時候小撞兩個地方,
雖然比較有經驗或有看過 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:以上演講強力推薦 06/21 22:44
→ gpmm:感謝樓上指點 :P 小弟再去研究一下 06/22 00:08
→ 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