[心得] getElementsByTagName / createElement

看板Ajax作者gpmm (銀色)時間16年前 (2009/06/21 01:05)推噓9(9推 0噓 16→)

留言25則, 7人參與討論串1/1

今天在改東西的時候小撞兩個地方，雖然比較有經驗或有看過 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

06/21 10:52, , 1^F

06/21 10:52, 1^F

→

Kelunyang

06/21 10:53, , 2^F

06/21 10:53, 2^F

→

Kelunyang

06/21 10:53, , 3^F

06/21 10:53, 3^F