DOM（二）

• 文档信息

document对象还有一些标准的Document对象所没有的属性：

1. title属性：包含着<title>元素中的文本——显示在浏览器窗口的标题栏或标签页上，通过整个属性可以取得当前页面的标题，也可以修改当前页面的标题并反映在浏览器的标题栏中。
2. URL属性包含页面完整的URL。
3. domain属性包含页面的域名。
4. referrer属性保存着链接到当前页面的那个页面的URL，在没有来源页面的情况下，referrer属性中可能包含空字符串。

所有这些信息都存在于请求的HTTP头部，只不过通过这些属性让我们能在js中访问它们而已。

• 查找元素

1. getElementById(),接收一个参数：要取得的元素的ID，如果找到相应的元素则返回该元素，如果不存在带有相应ID的元素，则返回null。
2. getElementsByTagName(),这个方法接受一个参数，即要取得元素的标签名，而返回的是包含零或多个元素的NodeList，在HTML文档中，这个方法返回一个HTMLCollection对象，该对象与NodeList非常类似。HTMLCollection对象还有一个方法，叫做namedItem()，使用这个方法可以通过元素的name特性取得集合中的项。
3. 只有HTMLDocument类型才有的方法，getElementsByName()这个返回返回带有给定name特性的所有元素，最常用使用getElementsByName方法的情况是取得单选按钮。

• 特殊集合

1. document.anchors，包含文档中多余带name特性的a元素。
2. document.applets,包含文档中所有的applet元素，因为不再推荐使用applet元素，所有这个集合已经不建议使用了，
3. document.forms，包含文档中所有的form元素，与document.getElementsByTagName(“form”)得到的结构相同。
4. document.images，包含文档中所有的img元素，与document.getElementByTagName(“img”)得到的结构相同。
5. document.links，包含文档中所有带href特性的a元素。

• DOM一致性检测

由于DOM分为多个级别，也包含多个部分，因此检测浏览器实现了DOM的哪些部分就十分必要了，document.implementation属性就是为此提供相应的信息和功能对象，与浏览器对DOM的实现直接对应，DOM1级只为document.imolementation规定了一个方法，即hasFeature()，这个方法接受两个参数：要检测的DOM功能的名称和版本号，如果流量器支持给定的名称和版本的功能则该方法返回true，如下：

var hasXmlDom=document.implementation.hasFeature(“XML”,”1.0”);

尽管使用hasFeature() 确实方便，但也有缺点，因为实现者可以自行决定是否与DOM规范的不同部分保持一致，事实上，要想让hasFearture()方法针对所有值都返回true很容易，但返回true有时候也不意味着实现与规范一致，例如：Safari 2.x及更早版本会在没有完全实现某些DOM功能的情况下返回true。为此，我们建议多数情况下，在使用DOM的某些特殊的功能之前，最好除了检测hasFeature之外，还同时使用能力检测。

• Element类型

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

1. nodeType的值为1；
2. nodeName的值为元素的标签名；
3. nodeValue的值为null；
4. parentNode可能是Document或Element；
5. 其子节点可能是Element、Text、Comment、ProcessingInstruction、CSATASection或EntityReference。

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

• HTML元素

所以HTML元素都由HTMLElement类型表示，不是直接通过整个类型，也是通过它的子类型来表示。特性如下：

1. id，元素在文档中唯一标识符。
2. title，有关元素的附加说明信息，一般通过工具提示条显示出来。
3. lang，元素内如语音代码，很少使用。
4. dir，语言的方向，值为”ltr”（从左至右）或”rtl”(从右至左)，很少使用。
5. className，与元素的class特性对应，即为元素指定的CSS类。

• 取得特性

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

注意，传递给getAttribute的特性名与实际的特性名相同。因此要想得到class特性值，应该传入”class”而是不是”className”，后者只有在通过对象访问特性时才用。

通过getAttribute方法也可以取得自定义特性的值。特性的名称是不区分大小写的。

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

有两个类特殊的特性，它们虽然有对应的属性名，但属性的值与通过getAttribute返回的值并不相同，第一类特性就是style，用于通过css为元素指定样式。在通过getAttribute访问时，返回的style特性值中包含的是css文本，而通过属性来访问它则会返回一个对象，由于style属性是用于以编程方式访问元素样式的，因此并没有直接映射到style特性。

第二类与众不同的特性时onclick这样的事件处理程序，当元素上使用时，onclick特性中包含的是js代码，如果通过getAttribute访问，则会返回相应代码的字符串，在访问onclick属性时，则会返回一个js函数，这是因为onclick及其他事件处理程序属性本身就应该被赋予函数值。

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

• 设置特性

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

通过setAttribute方法既可以操作HTML特性也可以操作自定义属性。

removeAttribute这个方法用于彻底删除元素的特性，调用这个方法不仅会清除特性的值，而且也会从元素中完全删除特性。如下：

div.removeAttribute(“class”);

这个方法并不常用，但在序列化DOM元素时，可以通过它来确切地指定包含哪些特性。

• attributes属性

Element类型是使用attribute属性的唯一一个DOM节点类型，attribute属性中包含一个NamedNodeMap，与NodeList类型，NamedNodeMap对象拥有下列方法：

1. getNamedItem(name)：返回nodeName属性等于name的节点；
2. removeNamedItem(name)：从列表中移除nodeName属性等于name的节点；
3. setNamedItem(node)：向列表中添加节点，以节点的nodeName属性为索引。
4. item(pos)：返回位于数字pos位置处的节点。

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

var id=element.attributes[“id”].nodeValue;

也可以使用这种语法来设置特性的值，即先取特性节点，然后再将其nodeValue设置为新值如下：

element.attributes[“id”].nodeValue=”someOtherId”;

调用removeNamedItem方法与在元素上调用removeAttribute方法的效果项目，直接删除具有给定名称的特性。

一般来说，由于前面介绍的attributes的方法不够方便，因此开发人员更多的会使用getAttribute()，removeAttribute()和setAttribute()方法。

不过，如果想要遍历元素的特性，attributes属性倒是可以派上用场，在需要将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(“  ”)

}

1. 针对attributes对象中的特性，不同浏览器返回的顺序不同，这些特性在XML或HTML代码中出现的先后顺序，不一定与它们出现在attributes对象中的顺序一致。
2. IE7及更早的版本会返回HTML元素中所有可能的特性，包括没有指定的特性，换句话说，返回100多个特性的情况会很常见。

• 创建元素

使用document.createElement()方法可以创建新元素，这个方法只接受一个参数，即要创建元素的标签名。在使用createElement方法创建新元素的同时，也为新元素设置了ownerDocument属性，此时，可以操作元素的特性，为它添加更多子节点，以及执行其他操作。

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

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

这种方式有助于避开在IE7及更早版本中动态创建元素的某些问题，例如：

1. 不能设置动态创建的<iframe>元素的name特性。
2. 不能通过表单的reset方法重设动态创建的input元素。
3. 动态穿件的type特性值为reset的button元素重设不了表单。
4. 动态创建的一批name相同的单选按钮彼此毫无关系，name值相同的一组单选按钮本来应该同于表示同一选项的不同值，但动态创建的一批这种单选按钮之间却没有这种关系。

• 元素的子节点

元素可以有任意数目的子节点和后代节点，因为元素可以是其他元素的子节点，元素的childNodes属性中包含了它的所有子节点，在不同浏览器中看待这些节点方面有显著的不同，如：

<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个文本节点。如果需要通过childNodes属性遍历子节点，那么一定不要忘记浏览器间的这一差别，这意味着在执行某项操作以前，通常都要先检测一下nodeType属性，如下：

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

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

}

}

如果想通过某个特定的标签名取得子节点或后代节点该怎么办呢？实际上，元素也支持getElementsByTagName方法，在通过元素调用这个方法时，除了搜索起点是当前元素之外，其他方面都跟通过document调用这个方法项目，因此结构只会返回当前元素的后代，如下：

var ul=document.getElementById(“myList”);

var items=ul.getElementsByTagName(“li”);

要注意的是，这里ul的后代中只包含直接子元素，不过，如果它包含更多层次的后代元素，那么各个层次中包含的li元素也都会返回。