1.DOM

DOM(文档对象模型)是由 W3C 制定的一套访问和操作 XML(eXtensible Markup Language)文档的标准,即 API。比如 DOM 告诉JavaScript 引擎如何在浏览器窗口中显示和操作 XML 创建的标记(Tag)。

DOM 与特定的平台、浏览器、语言无关,很多语言都实现了 DOM。比如 JavaScript 和 PHP 都实现了 DOM,所以它们都有 getElementsByTagName() 方法。

2.XML、XHTML、HTML

XML 与 HTML 都含有标记,而且语法相似,但两者是有区别的。最大的区别在于:HTML 是一个定型的标记语言,用固定的标记来描述和显示数据,比如 <h1> 表示首行标题,有固定的尺寸;而 XML 没有固定的标记,只能通过自定义的标记来描述数据的形式和结构,而不能显示。HTML 是将数据 和显示混在一起,而 XML 则是将数据和显示分开来。

那为什么能使用 DOM 访问和操作 HTML 文档(即网页)呢?Web 语义化的一个发展方向是将 HTML 逐渐演变为更有语义、能将数据内容与现实分离的 XML,但 HTML 不可能立即演变为 XML,目前推荐使用的是一个过渡产物 —— XHTML。HTML 与 XHTML 网页形成的节点树(统称为 HTML 节点树)在结构上与 XML 节点树一样,可以看做是一个符合 DOM 的 XML 文档,因此可以使用实现了 DOM 的程序语言(如 JavaScript、PHP 等)来访问和操作 HTML 文档,即访问和操作那些节点。

3.DOM Core 和 HTML-DOM

由于 HTML 与 XML 的相似性及差异,JavaScript 不仅实现了标准的 DOM 方法和属性(也就是由 W3C 制定的 DOM Core),而且还实现了 HTML 特有的 DOM 方法和属性(也就是 HTML DOM)。不管是 DOM Core 还是 HTML DOM,我们在使用 JavaScript 的时候都要注意浏览器之间的兼容性,因为不同的浏览器对这两类方法和属性的支持可能不一样。

常见的 DOM Core 方法如下:

1、创建节点
createElement()
createTextNode()
2、复制节点
cloneNode()
3、插入节点
appendChild()
insertBefore()
4、删除节点
removeChild()
5、替换节点
replaceChild()
6、查找和设置节点属性
setAttribute()
getAttribute()
7、查找节点
getElementById()
getElementsByTagName()
hasChildNode()

常见的 DOM Core 属性如下:

node.childNodes
node.firstChild
node.lastChild
node.nextSibling
node.previousSibling
node.parentNode