[心得] getElementsByTagName / createElement

[gpmm (銀色)]

    今天在改東西的時候小撞兩個地方，
    雖然比較有經驗或有看過 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")
→ Kelunyang:我不知道是不是同一個問題，但是我在.id上也是遇到一樣
→ Kelunyang:的問題
→ gpmm:setAttribute 我試過是不行的，還是你的瀏覽器版本不一樣？
推 Kelunyang:呃，真的看起來就只有這種作法而已@@"
→ Kelunyang:我查了一下另外一種作法是指針對IE下
→ Kelunyang:createElement("<input name='abc'>")
→ Kelunyang:但是其他瀏覽器都不吃，所以還得作偵測...
推 Kelunyang:IE6 真麻煩Orz
→ gpmm:XDD
推 JYHuang:  不知道跟我在 #7pAxSwI 遇到的是不是類似的情形？
→ JYHuang:  createElement建立的DOM Obj無法用getElement取得物件
→ JYHuang:                             getElementsByName
推 wctang:第一個狀況，答案是每次取 length 都會 re-query，非常慢
→ wctang:請參考 http://www.youtube.com/watch?v=mHtdZgou0qU
→ wctang:以上演講強力推薦
→ gpmm:感謝樓上指點 :P 小弟再去研究一下
推 fillano:幫推 http://developer.yahoo.com/yui/theater/ 有很多好
→ fillano:東西，Crockford講ajax performance那一篇也有提到wctang
→ fillano:那一篇講到的效能關鍵。
→ gpmm:這樣怎麼看得完啊 XDD （滾）
推 adamp3:推YUI theater很多好東西可以看喔
推 tomin:theater會不會只是在講YUI的好處呀？
推 tomin:看來沒有　講得很全面
→ fillano:有PPK、John Resig、Douglas Crokford、Zakas甚至Booch耶