DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> document.createElement()用法及注意事項(ff下不兼容)
document.createElement()用法及注意事項(ff下不兼容)
編輯:關於JavaScript     

今天處理了一個日期選擇器的ie和ff的兼容問題,本來這種情況就很難找錯誤,找了好久才把錯誤定位到js中創建元素的方法document.createElement(),這個方法在ie下支持這樣創建元素

復制代碼 代碼如下:
var inputObj    = document.createElement
     ("<input type='text' size='8' style='border:0px;border-bottom:2px solid #c0c0c0;' " readonly >");

但是這樣的情況在ff下是不兼容的。
還有就是特別注意input元素的創建:與 input 有關的元素有很多,比如:checkbox、radio、submit、reset...,因此創建 input 是個很特殊的用法。

創建不同的 input 正確的做法是:

復制代碼 代碼如下:
<div id="board"></div>
<script type="text/javascript">
<!--
var board = document.getElementById("board");
var e = document.createElement("input");
e.type = "radio"; //緊接著上一行寫
var obj = board.appendChild(e);
obj.checked = true;
//如下寫法也是正確的:
//e.checked = true;
-->
</script>

針對 input,在 Netscape、Opera 和 Firefox 中 e.type 既可以在 appendChild 之前,也可以在其之後。但在 IE 中 type 屬性必須在前,其它屬性必須在後。

IE 創建元素,還有一個特點,就是可以連同屬性一同創建,比如:var e = document.createElement("<input type='radio' name='r' value='1' />"); 這在其它浏覽器中是不行的,所以我們也不支持。

總結:

•針對非 input 元素,各浏覽器中,既可以把對元素屬性的改變寫在顯示元素(insertBefore 或 appendChild)之前,也可以在其後。
•針對 input 元素,為了兼容 IE,type 屬性寫在顯示元素(insertBefore 或 appendChild)之前,其它屬性寫在其後。
推薦:

•除了 input 元素的 type 屬性寫在顯示元素(insertBefore 或 appendChild)之前外,其它屬性都寫在顯示元素之後。
•改變屬性時,對寫在顯示元素(insertBefore 或 appendChild)之前的用 createElement 的返回值,對寫在顯示元素之後的用 insertBefore 或 appendChild 的返回值。

復制代碼 代碼如下:
1.var echkbox=document.createElement("input");   
2.echkbox.setAttribute("type","checkbox");   
3.echkbox.setAttribute("id","inputid");   
4.echkbox.setAttribute("name","inputname");   
5.echkbox.setAttribute("value","inputvalue");   
6.var addhere=document.getElementById("someElementId");   
7.addhere.appendChild(echkbox);   
8.echkbox.setAttribute("checked","checked");   
9.alert(document.getElementById("inputid").checked);

<!--document方法:
getElementById(id)                            返回指定結點的引用
getElementsByTagName(name)       返回文檔中所有匹配的元素的集合
createElement(name)                         創建指定類型的新結點
createTextNode(text)                         創建一個純文本結點
element方法:
getAttribute(id)                                   返回指定屬性的值
setAttribute(id,value)                         給屬性賦值
removeAttribute(id)                           移除指定屬性和它的值
getElementsByTagName(name)       返回結點內所有匹配的元素的集合
node方法:
appendChild(child)                             給指定結點添加一個新的子結點
removeChild(child)                             移除指定結點的子結點
replaceChild(newChild,oldChild)       替換指定結點的子結點
insertBefore(newChild,refChild)       在同一層級的結點前面插入新結點
hasChildNodes()                                 如果結點有子結點則返回true
node屬性:
nodeName                                         以字符串的格式存放結點的名稱
nodeType                                           以整型數據格式存放結點的類型
nodeValue                                          以可用的格式存放結點的值
parentNode                                        指向結點的父結點的引用
childNodes                                         指向子結點的引用的集合
firstChild                                            指向子結點結合中的第一個子結點的引用
lastChild                                             指向子結點結合中的最後一個子結點的引用


動態加載js
復制代碼 代碼如下:
var Rash=true;
var msg="";
function norash()
{
   if (confirm("確定要取消嗎"))
   Rash=false;
}
function rashit()
{
    setInterval('getrss()',Inttime);
}
function getrss()
{
if (Rash==true)
{
     head=document.getElementsByTagName('head').item(0);
    script=document.createElement('script');
    script.src='INCLUDE/AutoUpdate.asp';
   script.type='text/javascript';
   script.defer=true;
   void(head.appendChild(script));
   window.status=msg;
   }
}
rashit();

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved