HTML DOM 和 XML DOM 的区别和联系

上面的这篇博文讲了HTML、XML和Javascript之间的基本关系。而Javascript是利用DOM(包括HTML DOM和XML DOM)来操作HTML和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页面的特殊扩展,提供了对<body>标签的直接访问。
 
 
 
**************************************************************************************************
最后说一下,讨论这个问题的本源。
改变HTML的内容
1. document.write()
括号中的参数是要写入的字符串。根据自己实验的结果,我总结的经验是只能在<body>内部使用,且要将代码包含在<script type="text/javascript">...</script>中
写入的内容对HTML其余部分没有影响,比如:
<head>
<body>
<h1>this is a heading</h1>
<script type="text/javascript">
document.write("hello world")
</script>
</body>
</head>
 
这时候<script>标签内的操作相当于直接在页面中js代码的位置上增加了一句话
 
 
2. innerHTML属性。几乎所有的HTML DOM中的元素都有该属性。它实际上是一个字符串,用来设置或获取位于对象起始和结束标签之间的HTML
通常在<head>中的javascript代码中,和getElementById()方法结合使用。先使用getElementById()方法获得目标节点,然后使用innerHTML属性来获取或设置节点起始和结束标签之间的内容。
 
例如:
document.getElementByIdx_x_x('A1').innerHTML=xmlhttp.status;
其中,A1是HTML中一个标签的id,该语句将该标签的内容设置为读取XML文件的状态。
 
 
 
**************************************************************************************************
最后讲一下DOM在不同浏览器中的差别
所有现代浏览器都支持W3C DOM规范,但是它们之间是有差异的,主要表现在以下两点:
  • 加载XML的方式
  • 处理空白和换行的方法
第一点之前已经讲过了,下面来看第二点。
 
为了阅读方便,XML文件经常在节点之间含有换行或空格,下例:
<book>
  <title>Harry Potter</title>
  <author>J K. Rowling</author>
  <year>2005</year>
  <price>29.99</price>
</book>
每行之间都有换行,每个子节点之间都有两个空格。
 
Firefox及其他浏览器会把空格和换行作为文本节点来处理,而IE则会忽略这些换行和空格。
 
比如,要是想得到第一个<book>元素的第一个子节点<title>的内容
 
在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;
 
原文地址:https://www.cnblogs.com/daban/p/2683082.html