开发跨浏览器的JavaScript方法说明
人气:0
开发跨浏览器的JavaScript
1. childNodes在ff中和ie的区别。
ff中的node(nodeType = 1)都是用textNode(nodeType = 3)分开的，而ie/op不是这样的。
<div id="box1"><span>content</span></div>
在ff下,box1的childNodes为3个，ie下为1个。
2. 设置某个node对象的style class名称。
ie中要设置某个node的class用"className"作为attr来set或者get。
ff等其它的浏览器用"class"作为attr来set或者get。
代码:
if(typeof node1.getAttribute("className") == "string") {
.
}
3. 设置某个node对象的style content。
直接举例把
代码:
var oStyle = oNode.getAttribute("style");
// ie
if(oStyle == "[object]") {
oStyle.setAttribute("cssText", strStyle);
oNode.setAttribute("style", oStyle);
} else {
oNode.setAttribute("style", strStyle);
}
4. 事件对象。
ie用event
ff用evnt
5. 事件作用对象
ie用objEvent.srcElement
ff用objEvent.target
这个跟 xml 文件写作有关，将 IE 的 preserveWhiteSpace 设为 true 看看，底下是取自微软的说明文件
代码:
var xmlDoc = new ActiveXObject("Msxml2.DOMDocument.4.0");
xmlDoc.async = false;
xmlDoc.preserveWhiteSpace = true;
xmlDoc.load("books.xml");
alert(xmlDoc.xml);
xmlDoc.async = false;
xmlDoc.preserveWhiteSpace = false;
xmlDoc.load("books.xml");
alert(xmlDoc.xml);
-----------------------
1.向表中追加行：
document.createElement 和document.appendChild方法可以很容易的做到向表中追加行或从头创建包含表行的新表：使用 document.createElement创建表格，在使用document.appendChild方法将这些表单元格增加到表行；接下来使用 document.appendChild将表行增加到表中。
IE允许讲tr元素增加到tbody中，而不是直接增加到table中。
<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("mysqlTableBody").appendChild(row);
幸运的是，这种方法在所有当前浏览器都通用，也包括IE。如果你养成习惯，总是使用表中的表体，就不用担心这个问题了。
2 通过Javascrīpt设置元素的样式
可以通过Javascrīpt使用元素的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:blod ; 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:blod ; color:red;";
3 设置元素的class属性
IE是当前浏览器的一个异类，不过解决方法倒也相当简单，使用Firefox和Safari 之 类的浏览时，可以使用元素的setArribute方法来设置元素的class属性，如下所示：
var element = document.getElementById("myElement");
element.setAttribute("class","styleClass");
奇怪的是，如果使用setAttribute方法，并指定属性名为class，IE并不会设置元素的 class属性。相反，只使用setAttribute方法时IE会自己识别className属性。
对于这种情况，完备的解决方法是：使用元素的setAttribute方法时，将class和 className都用作属性名，如下所示：
var element = document.getElementById("myElement");
element.setAttribute("class","styleClass");
element.setAttribute("className","styleClass");
当前大多数浏览器都会使用class属性名而忽略className,IE则正好相反。
4 创建输入元素
输入元素为用户提供了页面交互的手段，HTML本身有一组有限的输入元素，包括单行文 框、多行文本框、选择框、选择框、按钮、复选框和单行钮。你可能想使用Javascrīpt 动态地创建这样一些输入元素作为Ajax实现的一部分。
单行文本框、按钮、复选框和单选钮都可以创建为输入元素，只是type属性的值有所不同。选择框和文本区有自己特有的标记，通过Javascrīpt动态创建输入元素很简单（但单选钮除外），只要遵循一些简单的规则就行。使用document.createElement方法可以很容易创建选择框和文本区，只需向document.createElement传递元素的标记名，如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(buttion);
遵循这个简单的规则，有助于消除以后可能出现的一些难于诊断的问题。
5.向输入元素增加事件处理程序
向输入元素增加事件处理程序应该与使用setAttribute方法并指定事件程序的名字和所需函数程序的名字一样容易，对吗？错。设置元素的事件处理程序的标准做法是使用元素的 setAttribute方法，它以事件名作为属性名，并把函数处理程序作为属性值，如下所示：
var formElement = document.getElementById("formElement");
formElement.setAttribute("onclick","doFoo();");
除了IE，上面的代码在所有当前浏览器中都能工作，如果在IE中使用Javascrīpt设置 的事件处理程序，必须对元素使用点记法来引用所需的事件处理程序，并把它赋为匿名函数， 这个匿名函数要调用所需要的事件处理程序，如下所示：
var formElement = documentgetElementById("formElement");
formElement.onclick = function(){ doFoo(); };
幸运的是，这种技术得到了IE和所有其他当前浏览器的支持，所以完全可以通过 Javascrīpt动态地设置表单元素的事件处理程序。
6 创建单选钮
除了IE，当前所有其他浏览器都允许使用以下方法创建单选钮（这些方法应该能想到);
var readioButtion = document.createElement("input");
readioButtion.setAttribute("type","radio");
readioButtion.setAttribute("name","radioButtion");
readioButtion.setAttribute("value","checked");
这样就能在除IE以外的所有当前浏览器中创建单选钮，而且能正常工作。在IE中， 单选钮确实会显示出来，但是无法将其选中，因为点击单选钮并不按我们预想得那样使之选 中。在IE中，创建单行钮的方法与其他浏览器所用的方法完全不同，而且根本不兼容。对于 前面建立的单选钮，在IE中可以如下建立：
var radioButtion = document.createElement("<input type='radio' name='radioButtion' value ='checked'>");
这就需要某种浏览器嗅探(browser-sniffing)机制。IE能识别出名为uniqueID的document对象的专用属性，名为uniqueID。IE也是惟一能 识别这个属性的浏览器，所以uniqueID很适合来确定脚本是不是在IE中运行。
使用document.uniqueID属性来确定脚本在哪个浏览器中运行时，可以结合IE特定的方 法和标准兼容的方法，就会得到以下代码：
if(document.uniqueID){
//Internet Explorer
var radioButtion = document.createElement("<input type='radio' name='radioButtion' value ='checked'>");
}
else{
//Standards Compliant
var readioButtion = document.createElement("input");
readioButtion.setAttribute("type","radio");
readioButtion.setAttribute("name","radioButtion");
readioButtion.setAttribute("value","checked");
}
1. childNodes在ff中和ie的区别。
ff中的node(nodeType = 1)都是用textNode(nodeType = 3)分开的，而ie/op不是这样的。
<div id="box1"><span>content</span></div>
在ff下,box1的childNodes为3个，ie下为1个。
2. 设置某个node对象的style class名称。
ie中要设置某个node的class用"className"作为attr来set或者get。
ff等其它的浏览器用"class"作为attr来set或者get。
代码:
if(typeof node1.getAttribute("className") == "string") {
.
}
3. 设置某个node对象的style content。
直接举例把
代码:
var oStyle = oNode.getAttribute("style");
// ie
if(oStyle == "[object]") {
oStyle.setAttribute("cssText", strStyle);
oNode.setAttribute("style", oStyle);
} else {
oNode.setAttribute("style", strStyle);
}
4. 事件对象。
ie用event
ff用evnt
5. 事件作用对象
ie用objEvent.srcElement
ff用objEvent.target
这个跟 xml 文件写作有关，将 IE 的 preserveWhiteSpace 设为 true 看看，底下是取自微软的说明文件
代码:
var xmlDoc = new ActiveXObject("Msxml2.DOMDocument.4.0");
xmlDoc.async = false;
xmlDoc.preserveWhiteSpace = true;
xmlDoc.load("books.xml");
alert(xmlDoc.xml);
xmlDoc.async = false;
xmlDoc.preserveWhiteSpace = false;
xmlDoc.load("books.xml");
alert(xmlDoc.xml);
-----------------------
1.向表中追加行：
document.createElement 和document.appendChild方法可以很容易的做到向表中追加行或从头创建包含表行的新表：使用 document.createElement创建表格，在使用document.appendChild方法将这些表单元格增加到表行；接下来使用 document.appendChild将表行增加到表中。
IE允许讲tr元素增加到tbody中，而不是直接增加到table中。
<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("mysqlTableBody").appendChild(row);
幸运的是，这种方法在所有当前浏览器都通用，也包括IE。如果你养成习惯，总是使用表中的表体，就不用担心这个问题了。
2 通过Javascrīpt设置元素的样式
可以通过Javascrīpt使用元素的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:blod ; 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:blod ; color:red;";
3 设置元素的class属性
IE是当前浏览器的一个异类，不过解决方法倒也相当简单，使用Firefox和Safari 之 类的浏览时，可以使用元素的setArribute方法来设置元素的class属性，如下所示：
var element = document.getElementById("myElement");
element.setAttribute("class","styleClass");
奇怪的是，如果使用setAttribute方法，并指定属性名为class，IE并不会设置元素的 class属性。相反，只使用setAttribute方法时IE会自己识别className属性。
对于这种情况，完备的解决方法是：使用元素的setAttribute方法时，将class和 className都用作属性名，如下所示：
var element = document.getElementById("myElement");
element.setAttribute("class","styleClass");
element.setAttribute("className","styleClass");
当前大多数浏览器都会使用class属性名而忽略className,IE则正好相反。
4 创建输入元素
输入元素为用户提供了页面交互的手段，HTML本身有一组有限的输入元素，包括单行文 框、多行文本框、选择框、选择框、按钮、复选框和单行钮。你可能想使用Javascrīpt 动态地创建这样一些输入元素作为Ajax实现的一部分。
单行文本框、按钮、复选框和单选钮都可以创建为输入元素，只是type属性的值有所不同。选择框和文本区有自己特有的标记，通过Javascrīpt动态创建输入元素很简单（但单选钮除外），只要遵循一些简单的规则就行。使用document.createElement方法可以很容易创建选择框和文本区，只需向document.createElement传递元素的标记名，如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(buttion);
遵循这个简单的规则，有助于消除以后可能出现的一些难于诊断的问题。
5.向输入元素增加事件处理程序
向输入元素增加事件处理程序应该与使用setAttribute方法并指定事件程序的名字和所需函数程序的名字一样容易，对吗？错。设置元素的事件处理程序的标准做法是使用元素的 setAttribute方法，它以事件名作为属性名，并把函数处理程序作为属性值，如下所示：
var formElement = document.getElementById("formElement");
formElement.setAttribute("onclick","doFoo();");
除了IE，上面的代码在所有当前浏览器中都能工作，如果在IE中使用Javascrīpt设置 的事件处理程序，必须对元素使用点记法来引用所需的事件处理程序，并把它赋为匿名函数， 这个匿名函数要调用所需要的事件处理程序，如下所示：
var formElement = documentgetElementById("formElement");
formElement.onclick = function(){ doFoo(); };
幸运的是，这种技术得到了IE和所有其他当前浏览器的支持，所以完全可以通过 Javascrīpt动态地设置表单元素的事件处理程序。
6 创建单选钮
除了IE，当前所有其他浏览器都允许使用以下方法创建单选钮（这些方法应该能想到);
var readioButtion = document.createElement("input");
readioButtion.setAttribute("type","radio");
readioButtion.setAttribute("name","radioButtion");
readioButtion.setAttribute("value","checked");
这样就能在除IE以外的所有当前浏览器中创建单选钮，而且能正常工作。在IE中， 单选钮确实会显示出来，但是无法将其选中，因为点击单选钮并不按我们预想得那样使之选 中。在IE中，创建单行钮的方法与其他浏览器所用的方法完全不同，而且根本不兼容。对于 前面建立的单选钮，在IE中可以如下建立：
var radioButtion = document.createElement("<input type='radio' name='radioButtion' value ='checked'>");
这就需要某种浏览器嗅探(browser-sniffing)机制。IE能识别出名为uniqueID的document对象的专用属性，名为uniqueID。IE也是惟一能 识别这个属性的浏览器，所以uniqueID很适合来确定脚本是不是在IE中运行。
使用document.uniqueID属性来确定脚本在哪个浏览器中运行时，可以结合IE特定的方 法和标准兼容的方法，就会得到以下代码：
if(document.uniqueID){
//Internet Explorer
var radioButtion = document.createElement("<input type='radio' name='radioButtion' value ='checked'>");
}
else{
//Standards Compliant
var readioButtion = document.createElement("input");
readioButtion.setAttribute("type","radio");
readioButtion.setAttribute("name","radioButtion");
readioButtion.setAttribute("value","checked");
}
加载全部内容