第10章 文档对象模型DOM 10.3 Element类型

Element 类型用于表现 XML或 HTML元素，提供了对元素标签名、子节点及特性的访问。

要访问元素的标签名，可以使用 nodeName 属性，也可以使用 tagName 属性；这两个属性会返回相同的值。如下所示：

<div id="myDiv"></div>

var div = document.getElementById("myDiv");

alert(div.tagName); //"DIV"

alert(div.tagName == div.nodeName); //true

在 HTML 中，标签名始终都以全部大写表示；而在 XML（有时候也包括 XHTML）中，标签名则始终会与源代码中的保持一致。假如你不确定自己的脚本将会在 HTML 还是 XML 文档中执行，最好是在比较之前将标签名转换为相同的大小写形式，如下所示：

if (element.tagName == "div"){ //不能这样比较，很容易出错！

//在此执行某些操作

}

if (element.tagName.toLowerCase() == "div"){ //这样最好（适用于任何文档）

//在此执行某些操作

}

（可以在任何浏览器中通过脚本访问 Element 类型的构造函数及原型，包括 IE8及之前版本。在 Safari 2之前版本和 Opera 8之前的版本中，不能访问 Element 类型的构造函数。）

HTML 元素

所有 HTML 元素都由 HTMLElement 类型表示，不是直接通过这个类型，也是通过它的子类型来表示。

HTMLElement 类型直接继承自 Element 并添加了一些属性。 添加的这些属性分别对应于每个HTML元素中都存在的下列标准特性：

id ，元素在文档中的唯一标识符。

title ，有关元素的附加说明信息，一般通过工具提示条显示出来。

lang ，元素内容的语言代码，很少使用。

dir ，语言的方向，值为 "ltr" （left-to-right，从左至右）或 "rtl" （right-to-left，从右至左） ，也很少使用。

className ， 与元素的 class 特性对应， 即为元素指定的CSS类。 没有将这个属性命名为 class ，是因为 class 是 ECMAScript 的保留字

上述这些属性都可以用来取得或修改相应的特性值。

所有 HTML 元素都是由 HTMLElement 或者其更具体的子类型来表示的。下表列出了所有 HTML 元素以及与之关联的类型（以斜体印刷的元素表示已经不推荐使用了） 。这些类型在 Opera、Safari、Chrome 和 Firefox 中都可以通过 JavaScript 访问。

取得特性

每个元素都有一或多个特性，这些特性的用途是给出相应元素或其内容的附加信息。操作特性的DOM 方法主要有三个，分别是 getAttribute() 、 setAttribute() 和 removeAttribute() 。这三个方法可以针对任何特性使用， 包括那些以 HTMLElement 类型属性的形式定义的特性。

如下所示：

var div = document.getElementById("myDiv");

alert(div.getAttribute("id")); //"myDiv"

alert(div.getAttribute("class")); //"bd"

alert(div.getAttribute("title")); //"Body text"

alert(div.getAttribute("lang")); //"en"

alert(div.getAttribute("dir")); //"ltr"

传递给 getAttribute() 的特性名与实际的特性名相同，如果给定名称的特性不存在， getAttribute() 返回 null 。

通过 getAttribute() 方法还可以取得自定义特性，如：

<div id="myDiv" myAttribute="hello!"></div>

var value = div.getAttribute("myAttribute");

不过，特性的名称是不区分大小写的，另外，根据HTML5规范，自定义特性应该加上 data- 前缀以便验证。

任何元素的所有特性，也都可以通过 DOM元素本身的属性来访问。当然， HTMLElement 也会有 5个属性与相应的特性一一对应。不过，只有公认的（非自定义的）特性才会以属性的形式添加到 DOM对象中。以下面的元素为例：

<div id="myDiv" align="left" my_special_attribute="hello!"></div>

因为 id 和 align 在 HTML 中是 <div> 的公认特性，因此该元素的 DOM对象中也将存在对应的属性。不过，自定义特性 my_special_attribute 在 Safari、Opera、Chrome 及 Firefox 中是不存在的；但 IE 却会为自定义特性也创建属性，因此：

alert(div.id); //"myDiv"

alert(div.my_special_attribute); //undefined（IE 除外）

alert(div.align); //"left"

有两类特殊的特性， 它们虽然有对应的属性名， 但属性的值与通过 getAttribute() 返回的值并不相同。

第一类特性就是 style ，用于通过 CSS 为元素指定样式。在通过 getAttribute() 访问时，返回的 style 特性值中包含的是 CSS 文本，而通过属性来访问它则会返回一个对象。

第二类与众不同的特性是 onclick 这样的事件处理程序。如果通过 getAttribute() 访问，则会返回相应代码的字符串。而在访问onclick 属性时，则会返回一个 JavaScript 函数

由于这些差别，在通过 JavaScript 以编程方式操作 DOM 时，开发人员经常不使用getAttribute() ，而是只使用对象的属性。只有在取得自定义特性值的情况下，才会使用 getAttribute() 方法。

设置特性

与 getAttribute() 对应的方法是 setAttribute() ，这个方法接受两个参数：要设置的特性名和值。 如果特性已经存在， setAttribute() 会以指定的值替换现有的值； 如果特性不存在， setAttribute()则创建该属性并设置相应的值。

如：

div.setAttribute("id", "someOtherId");

div.setAttribute("class", "ft");

通过 setAttribute() 方法既可以操作 HTML 特性也可以操作自定义特性。通过这个方法设置的特性名会被统一转换为小写形式，即 "ID" 最终会变成 "id" 。

因为所有特性都是属性，所以直接给属性赋值可以设置特性的值，如下所示：

div.id = "someOtherId";

div.align = "left";

不过，像下面这样为 DOM 元素添加一个自定义的属性，该属性不会自动成为元素的特性。

div.mycolor = "red";

alert(div.getAttribute("mycolor")); //null（IE 除外）

最后一个方法是 removeAttribute() ，这个方法用于彻底删除元素的特性。调用这个方法不仅会清除特性的值，而且也会从元素中完全删除特性。

attributes 属性

Element 类型是使用 attributes 属性的唯一一个 DOM节点类型。

attributes 属性中包含一个NamedNodeMap，与NodeList类似，也是一个“动态”的集合。

元素的每一个特性都由一个 Attr 节点表示，每个节点都保存在 NamedNodeMap 对象中。

NamedNodeMap 对象拥有下列方法。

q getNamedItem(name) ：返回 nodeName 属性等于 name 的节点；

q removeNamedItem(name) ：从列表中移除 nodeName 属性等于 name 的节点；

q setNamedItem(node) ：向列表中添加节点，以节点的 nodeName 属性为索引；

q item(pos) ：返回位于数字 pos 位置处的节点。

attributes 属性中包含一系列节点， 每个节点的 nodeName 就是特性的名称， 而节点的 nodeValue

就是特性的值。

要取得元素的 id 特性，可以使用以下代码：

var id = element.attributes.getNamedItem("id").nodeValue;

或者：var id = element.attributes["id"].nodeValue;

同样可以使用这种语法来设置特性的值：

element.attributes["id"].nodeValue = "someOtherId";

调用 removeNamedItem() 方法与在元素上调用 removeAttribute() 方法的效果相同——直接删除具有给定名称的特性。

removeNamedItem() 返回表示被删除特性的 Attr 节点：

var oldAttr = element.attributes.removeNamedItem("id");

setNamedItem() 是一个很不常用的方法，通过这个方法可以为元素添加一个新特性，为此需要为它传入一个特性节点。

在需要将 DOM结构序列化为 XML 或 HTML 字符串时，多数都会涉及遍历元素特性。以下代码展示了如何迭代元素的每一个特性，然后将它们构造成 name="value" name="value" 这样的字符串格式。

function outputAttributes(element){

var pairs = new Array(),

attrName,

attrValue,

i,

len;

for (i=0, len=element.attributes.length; i < len; i++){

attrName = element.attributes[i].nodeName;

attrValue = element.attributes[i].nodeValue;

pairs.push(attrName + "=\"" + attrValue + "\"");

}

return pairs.join(" ");

}

这个函数使用了一个数组来保存名值对，最后再以空格为分隔符将它们拼接起来（这是序列化长字符串时的一种常用技巧） 。通过 attributes.length 属性， for 循环会遍历每个特性，将特性的名称和值输出为字符串。

创建元素

使用 document.createElement() 方法可以创建新元素。

这个方法只接受一个参数，即要创建元素的标签名。这个标签名在 HTML 文档中不区分大小写，而在 XML（包括 XHTML）文档中，则是区分大小写的。

在使用 createElement() 方法创建新元素的同时，也为新元素设置了 ownerDocuemnt 属性。

要把新元素添加到文档树，可以使用 appendChild() 、 insertBefore() 或 replaceChild() 方法。

例如：

var div = document.createElement("div");

div.id = "myNewDiv";

div.className = "box";

document.body.appendChild(div);

在IE中可以以另一种方式使用 createElement()，即为这个方法传入完整的元素标签，也可以包含属性：

var div = document.createElement("<div id=\"myNewDiv\" class=\"box\"></div >");

元素的子节点

不同浏览器在看待这些节点方面存在显著的不同，以下面的代码为例：

<ul id="myList">

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

</ul>

如果是 IE 来解析这些代码，那么 <ul> 元素会有 3 个子节点，分别是 3 个 <li> 元素。但如果是在其他浏览器中， <ul> 元素都会有 7 个元素，包括 3 个 <li> 元素和 4 个文本节点。

如果像下面这样将元素间的空白符删除，那么所有浏览器都会返回相同数目的子节点：

<ul id="myList"><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>

浏览器间的这一差别。这意味着在执行某项操作以前，通常都要先检查一下 nodeTpye 属性，

如下所示：

for (var i=0, len=element.childNodes.length; i < len; i++){

if (element.childNodes[i].nodeType == 1){

//执行某些操作

}

}

这个例子会循环遍历特定元素的每一个子节点，然后只在子节点的 nodeType 等于 1（表示是元素节点）的情况下，才会执行某些操作。

要想取得前面<ul> 元素中包含的所有 <li> 元素，可以如下：

var ul = document.getElementById("myList");

var items = ul.getElementsByTagName("li");

要注意的是，这里 <ul> 的后代中只包含直接子元素。不过，如果它包含更多层次的后代元素，那

么各个层次中包含的 <li> 元素也都会返回。