HTML标签中的attribute和DOM对象

　　HTML标签中的attribute和DOM对象的property是比较容易混淆的两个概念，实际上这二者对于理解”文档对象模型”是十分重要的。通常我们会把HTML标签的attribute译为”特性”而把DOM对象的property译为”属性”。

　　文档对象模型(DOM)是针对HTML和XML文档的一个API。DOM描绘了一个层次化的节点树，它允许我们通过DOM添加、移除以及修改页面的某一部分。

　　实际上这里面就包含了2个概念，一个是HTML页面，另一个是DOM对象模型。

　　以上是一个HTML元素。其中的”id”，”class”，”title”都是该元素的特性(attribute)。我们希望能够通过JS来访问、删改该div的这些特性怎么办?在JS中我们可以通过DOM来取得对应元素的引用：

　　var div1 = document.getElementById("div1");

　　注意，这里的div1是对一个JS对象的引用。该对象中包含”id”，”className”，”title”等属性(property)。它们分别和HTML中div元素的”id”，”class”，”title”特性相对应。通常情况下，它们的名字是相同的。例如”id”和”id”对应，”title”和”title”对应。但这里，由于class是JS中的保留字，所以去”calssName”对应于div元素的”calss”特性。

　　我们可以通过div1对象中的对应属性或者getAttribute、setAttribute、removeAttitude方法来访问删改HTML元素中的特性值。但需要注意的是，元素特性和DOM对象属性是两个不同的概念。

　　HTML中每一种元素都对应DOM中一种HTMLXXXElement接口，该接口继承自HTMLElement，而HTMLElement接口又直接继承于Element，同时Element接口又继承自Node。

　　Element类型节点

　　Element类型节点在Web编程中十分常用。内容较多，分为以下部分：

　　元素标签名的获取 HTML元素特性的操作方法 Element类型节点的attributes属性 元素的创建

　　元素标签名的获取

　　在Node类型中定义的12种节点类型中，Element类型属Node.ELEMENT_NODE，对应数值1。基本特征如下：

　　nodeType值为1 nodeName值为元素标签名 nodeValue值为null

　　我们要获取元素的标签名可以直接通过nodeName属性获得，例如：

　　...

　　... var div1 = document.getElementById("div1"); var tag1 = div1.nodeName;

　　另外，也可以通过tagName属性获得，二者返回值是完全一样的：

　　var tag2 = div1.tagName; // tag1 == tag2