html用dom显示xml,HTMLDOM和XMLDOM

上面的这篇博文讲了HTML、XML和Javascript之间的基本关系。而Javascript是利用DOM(包括HTML

DOM和XML DOM)来操作HTML和XML中的内容。本篇博文则对这两种相似的DOM接口做一下分析。

**************************************************************************************************

先看看这篇文章：大话HTML

DOM和XML DOM的区别与联系

简单地总结一下

联系：

HTML与XML共用了Core API(即DOM)。

因此HTML DOM和XML DOM中所指的节点(node)、节点列表(nodeList)等所指的是同一对象。

区别：

只不过为了方便，HTML

DOM的特性和方法并不是标准的DOM实现，而是专门针对HTML的同时也让一些DOM操作变得更加简便。

HTML

DOM是基于元素的实现(Element-Based)，而不是基于节点(Node-Based)的。

比如在XML

DOM中，元素节点的属性是一个以当前元素节点为父节点的属性节点(元素节点和属性节点可以利用节点的nodeType属性值区别，元素节点的nodeType值为1，属性节点的nodeType值为2)。

而在HTML DOM中，元素节点的属性则就是属性，并不作为单独的节点来看待。

例如：获取某个元素节点的某个属性(比如 id)值

XML DOM中： x

= myelement.getAttribute(id)

HTML DOM中： x = myelement.id

上面说的是最主要的区别，下面来看几个比较特殊的区别：

1. DOM搜索节点的方法

getElementsByTagName_r()、getElementByID()

前者即可以用于HTML DOM，也可以用于XML DOM；而后者只能用于HTML DOM。

注：一个细节，getElementsByTagName_r()方法中element是复数，而getElementByID()方法中的element则是单数。这是因为nodeName相同的节点可以有多个，而一个id(HTML中的节点属性)只能对应一个元素节点。

2. 有两种特殊的节点属性来访问文档的根节点：

document.documentElement

document.body

前者即可以用于HTML DOM，也可以用于XML DOM；而后者只能用于HTML DOM。

后者是对HTML页面的特殊扩展，提供了对

标签的直接访问。

**************************************************************************************************

最后说一下，讨论这个问题的本源。

改变HTML的内容：

1. document.write()

括号中的参数是要写入的字符串。根据自己实验的结果，我总结的经验是只能在

内部使用，且要将代码包含在中。

且写入的内容对HTML其余部分没有影响，比如：

this

is a heading

document.write("hello

world")

这时候

2. innerHTML属性。几乎所有的HTML

DOM中的元素都有该属性。它实际上是一个字符串，用来设置或获取位于对象起始和结束标签之间的HTML。

通常在

中的javascript代码中，和getElementById()方法结合使用。先使用getElementById()方法获得目标节点，然后使用innerHTML属性来获取或设置节点起始和结束标签之间的内容。

例如：

document.getElementByIdx_x_x('A1').innerHTML=xmlhttp.status;

其中，A1是HTML中一个标签的id，该语句将该标签的内容设置为读取XML文件的状态。

**************************************************************************************************

最后讲一下DOM在不同浏览器中的差别。

所有现代浏览器都支持W3C DOM规范，但是它们之间是有差异的，主要表现在以下两点：

加载XML的方式

处理空白和换行的方法

第一点之前已经讲过了，下面来看第二点。

为了阅读方便，XML文件经常在节点之间含有换行或空格，下例：

Harry

Potter

J K.

Rowling

2005

29.99

每行之间都有换行，每个子节点之间都有两个空格。

Firefox及其他浏览器会把空格和换行作为文本节点来处理，而IE则会忽略这些换行和空格。

比如，要是想得到第一个元素的第一个子节点的内容

在IE中：

txt =

xmlDoc.documentElement.getElementsByTagName_r("book")[0].firstChild.firstChild.nodeValue;

在Firefox等其他浏览器中

x =

xmlDoc.documentElement.getElementsByTagName_r("book")[0];

y =

x.firstChild;

while(y.nodeType!=1) // 检查节点类型是否为1，即是否为元素节点

{

y=y.nextSibling; //

不是元素节点，则往后移一个同级节点

}

txt =

y.firstChild.nodeValue;