10、JavaScript跨浏览器需注意的问题——ajax基础笔记

向表中追加行

创建表格行时，我们要把创建的 tr 追加到 tbody 元素节点中，而不能直接把它追加到 table 元素节点中，因为IE 上直接追加到 table 时不能显示出来，但所有的现在的浏览都支持把 tr 追加到 tbody中，正确的做法如下：
先定义如下一个空表

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

 
然后脚本如下实现：

var cell = document.createElement("td").appendChild(document.createTextNode("foo"));
var row = document.createElement("tr").appendChild(cell);
document.getElementById("myTableBody").appendChild(row);

 
其实我们可以使用HTML DOM来动态地创建表格更简洁，具体请参考《DOM&HTML DOM(二)》中的“使用HTML DOM操作Table”一节。

 

通过JavaScript设置元素的样式

可以通过javaScript使用元素的setAttribute方法设置元素的样式。

var spanElement = document.getElementById("mySpan");
//以下是标准做法，这种方法在当前其他浏览上都是行得通的，但IE不支持。
spanElement.setAttribute("style","font-weight:bold;color:red;");
//以下是非标准做法，但得到了广泛的支持。这种方法在IE和大多数其他浏览上都能很好地工作，只有Opera除外。
spanElement.style.cssText="font-weight:bold;color:red;";

 

为了让代码 在所有当前浏览器上都可移值，可以同时使用这两种方法，也就是既使用setAttribute方法，又使用元素的style对象的cssText属性。

 

设置元素的class属性

var element = document.getElementById("myElement");
//标准。下面的写法保证除IE外，所有浏览器可用
Element.setAttribute("class", "styleClass");
//非标准。下面写法保证IE可用，而忽略class
Element.setAttribute("className", "styleClass"); 

 

创建输入元素

创建一个下拉框（select）或文本域(textarea)直接使用一条语句

var select = document.createElement("select");

 

就可以了。但单行文本框、复选框、单选框、单选钮、按钮稍难一些，因为它们都有同样的元素名 input，只是 type 属性不同，所以要创建这些元素使用document.createElement方法后，不要调用元素的 setAttribute方法来设置type属性的值，并且type属性的设置一定要放在追加元素到文档中之前操作。以下为正确做法：

var button = document.createElement("input");
//单行文本框、复选框、单选框、单选钮、按钮需要此属性区别，并在追加之前设置
button.setAttribute("type", "button");
document.getElementById("formElement").appendChild(button);

 

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

var formElement = document.getElementById("formElement");
//除IE外，所有当前浏览器中都能工作。
formElement.setAttribute("onclick", "doFoo();");

//所有浏览器可用，设置一个匿名函数 ，并在匿名函数里再调用真真的事件处理函数
formElement.onclick = function () {
	doFoo();
};

 

创建单选按钮

// uniqueID为IE中document对象的专用属性
if (document.uniqueID) {
    //只有IE支持
	var radioButton = document.createElement(" <input type='radio' name='radioButton' value='checked'>");
} else {
    //除IE外，其他标准浏览器都支持
	var radioButton = document.createElement("input");
	radioButton.setAttribute("type", "radio");
	radioButton.setAttribute("name", "radioButton");
	radioButton.setAttribute("value", "checked");
}