开发跨浏览器javascript

 

一、向表追加行

    在以往使用Ajax的经历中，你很可能会使用JavaScript向现有的表中追加行，或者从头创建包含表行的新表。document.createElement和document.appendChiid方法可以使这很容易做到,只需使用document.createElement创建表单元格,再使用document.app-endChild方法将这些表单元格增加到表行。接下来的编辑步骤是使用document.append-

Child将表行增加到表中。

    在Firefox、Safari和Opera等当前浏览器中,这样做是可以的。不过,如果使用的是lE，表行则不会在表中出现。更糟糕的是，IE甚至不抛出任何错误，或对表行确实已经追加到表中却不会显示出来的问题提供任何线索。

    在这种情况下，解决方法很简单。IE允许将tr元素增加到tbody元素，而不是直接增加到table元素。例如，如果定义一个空表如下：

 <table id="myTable">

     <tbody id="myTableBody"></tbody>

 </table>

          向这个表中增加行的正确做法是把行增加到表体，而不是增加到表，如下所示：

 var cell=document.createElement("td").appendChild(document.createTextNode("foo"));

 vat row=document.createElement("tr").appendChild(cell);

 document.getElementByld("myTableBody").appendChiid(row);

    辛运的是，这种方法在所有当前浏览器上都能用，也包括IE。如果你养成习惯，总是使用表中的表体，就不用担心这个问题了。

 

二 通过javascript设置元素的样式

    利用Ajax技术，开发人员创建的Web应用可以与服务器无缝地通信，而无需完全页面刷新。但对于A1ax请求，是不会出现这种页面闪烁的，所以用户可能不知道页面上有些数据已经更新。你可能想修改某些元素的样式，指示页面上一些数据已经改变。例如，如果股票的价格已经通过Ajax请求得到了无缝更新，可以加亮显示这支股票的名字。

    可以通过JavaScript使用元素的setAttribute方法设置元素的样式。例如，要把span元素中的文本修改为采用红色粗体显示．可以使用setAttribute疗法如下：

 var spanElement = document.getElementById("mySpan");

 spanElement.setAttribute("style", "font-weight:bold; color:red;");

    除了IE、这种方法在当前其他浏览器上都是行得通的。对于IE，解决方法是使用元素style对象的cssText属性来设置所需的样式．尽管这个属性不是标准的，但得到了广泛支持，如下所示：

 var spanElement = document.getElementById("mySpan");

 spanElement.style.cssText = "font-weight:bold; color:red;";

    这种方法在IE和大多数其他浏览器上部能很好地工作，只有Opera除外。为了让代码在所有当前浏览器上都可移植，可以同时使用这两种方法，也就是既使用setAttribute方法，也使用元素style对象的cssText属性，如下所示：

 var spanElement = document.getElementById("mySpan");

 spanElement.setAttribute("style", "font-weight:bold; color:red;");

 spanElement.style.cssText = "font-weight:bold; color:red;";

         这样一来，在当前所有浏览器上都能正常地设置元素的样式了。

 

三、设置元素的class属性

    读过前一节后，了解到可以通过JavaScript来设置元素的内联样式，你可能想当然地认为，简单地设置无素的class属件应该是最容易的了。遗憾的是，并不如此。与设置元素内联样式类似，通过JavaScript动态地设置元素的class属性时也存在一些特异性。

    你可能已经猜到了，IE是当前浏览器中的一个异类，不过解决方法倒也相当简单。使用Firefox和Safari之类的浏览器时，可以使用元素的setAttribute方法来设置冗素的class属性，如下所示：

 var element = document.getElementById("myElement");

 element.setAttribute("class",  "styleC1ass");

    奇怪的是，如果使用setAttribute方法，并指定属性名为class，IE并不会设置元素的class属性。相反，只使用setAttribute方法时IE会自己识别className属性。对于这种情况，完备的解决方法是：使用元素的setAttribute方法时，将class和className都用作属性名，如下所不：

 var element = document.getElementById("myElement");

 element.setAttribute("class",  "styleC1ass");

 element.setAttribute("className",  "styleC1ass");

        当前大多数浏览器都会使用class属性名而忽略className，IE则正好相反。

 

四、创建输入元素

    输入元素为用户提供了与页面交互的手段。HTML本身有一组有限的输入元素，包括单行文本框、多行文本框、选择框、按钮、复选框和单选钮。你可能想使用JavaScfipt动态地刨建这样一些输入元素作为Ajax实现的一部分。

    单行文本框、按钮、复选框和单选钮都可以创建为输入元素，只是type属性的值有所不同。选择框和文本区有自己特有的标记。通过JavaScript动态地创建输入元素很简单(但单选钮除外，这在“刨建单选钮”一节再做解释)，只要遵循一些简单的规则就行。使用document.createElement方法可以很容易地创建选择框和文本区，只需向document.cr

eateElement传递元素的标记名，如select或textarea。

      单行文本框、按钮、复选框和单选钮稍难一些，因为它们都有同样的元素名input，只是type属性的值不同。所以，要创建这些元素，不仅需要使用document.createElement方法，后面还要调用元素的setAttribute方法来设置type属性的值。这并不难，但确实要多加一行代码．

    考虑在哪里把新创建的输入元素增加到其父元素中，必须注意document.createElement和setAttribute语句的顺序。在某些浏览器中，只有刨建了元素，而且正确地设置了type属性时，于会把新创建的元素增加到其父元素中。例如，以下代码段存某些浏览器中可能有奇怪的行为：

 document.getElementById("formElement").appendChild(button);

 button.setAttribute("type",  "button");

    为了避免奇怪的行为，要确保刨建输入元素后设置其所有属性，特别是type属性，然后再把它增加到父元素中，如下：

 var button = document.createElement("input"):

 button.setAttribute("type",  "button");

 document.getElementById("formElement").appendChild(button);

遵循这个简单的规则，有助于消除以后可能出现的一些难于诊断的问题。

 

五 向输入元素增加事情处理程序

    向输入元素增加事件处理程序应该与使用setAttribute方法并指定事件处理程序的名字和所需函数处理程序的名字一样容易，对吗?错。设置元素的事件处理程序的标准做法是使用元素的setAttribute方法，它以事件名作为属性名，并把函数处理程序作为属性值．如下所示：

 var formElement = document,getElementById("formElement");

 formElement.setAttribute("onclick", "doFoo();");

    除了IE上面的代码在所有当前浏览器中都能工作。如果在IE中使用JavaScfipt设置元素的事件处理程序，必须对元素使用点记法来引用所需的事件处理程序，非把它赋为匿名函数，这个匿名函数需要调用所需的事什处理程序，如下所示：

 var formElement = document,getElementById("formElement");

 formElement.onclick = function()  { doFoo(); };

    注意，是如何通过点记法从formElement引用onclick事件处理程序。onclick事什处理程序赋为一个匿名函数，这个匿名函数只是调用了所需的事件处理程序．在这个例子中事件处理程序就是doFoo。

    幸运的是，这种技术得到了IE和所有其他当前浏览器的支持．所以完全可以通过JavaScfipt动态地设置表单元素的事件处理程序。

 

六、创建单选按钮

    最好的总是留在最后。通过JavaScript动态地创建单选钮是很费劲的，因为IE中创建单选钮的方法与其他浏览器所用的方法大相径庭。

    除了IE，当前所有其他浏览器都允许使用以下方法创建单选钮(这些方法应该能想得到)：

      var radioButton = document.createElement("input");

      radioButton.setAttribute("type", "radlo");

      radioButton.setAttribute("name",  "radioButton");

      radioButton.setAttribute("value",  "checked");

 

    这样就能在除IE以外的所有当前浏览器中创建单选选钮，而且能正常工作。在lE中，单选钮确实会显示出来．但是无法将其选中，因为点击单选钮行不按我们预想得那样使之选中。在IE中，创建单选钮的方法与其他浏览器所用的方法完全不同，而且根本不兼容。对于前面建立的单选钮，在IE中可以如下建立：

 var radioButton = decument.createElement("<input type='radio'

            name='radioButton'  value='checked'>");

    好在，IE中确实可以通过JavaScript动态地创建单选钮，只不过难些，而且与其他浏览器不兼容。

    如何克服这个限制呢?答案很简单，这就是需要某种浏览器嗅探(browser-sniffing)机制，使得在创建单选钮时脚本就能知道该使用哪个方法。幸运的是，你不用检查大量不同的浏览器。假设只使用现代浏览器，脚本只需要在IE和其他浏览器间进行区分就行了。

    IE能识别出名为uniqueID的document对象的专用属性，名为uniqueID。IE也是惟一能识别这个属性的浏览器，所以uniqueID很适合用来确定脚本是不是在IE中运行。

    使用docurnent.uniqueID属性来确定脚本在哪个浏览器中运行时，可以结合IE特定的办法和标准兼容的方法，这就会得到以下代码：

 if(document.uniqueID)  {

      //Internet Explorer

      var radioButton = decument.createElement("<input type='radio'

             name='radioButton'  value='checked'>");

 }

 else {

      //Standards Compliant

      var radioButton = document.createElement("input");

      radioButton.setAttribute("type", "radlo");

     radioButton.setAttribute("name",  "radioButton");

     radioButton.setAttribute("value",  "checked");

 }