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 对像的cssT ext 属性,如下所示: 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 属性的值。这并不难,但确实要多加一 行代码。 考虑在哪里把新创建的输入元素增加到其父元素中,必须注意d ocument.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"); } |