10.1.3 Element 类型
3.设置特性
与getAttribute（）对应的方法是setAttribute（）。
这个方法接受两个参数：要设置的特性名和值。
如果特性已经存在，setAttribute（）会以指定的值替换现有的值；如果特性不存在，setAttribute（）则创建该属性并设置相应的值。
通过setAttribute（）方法既可以操作HTML特性也可以操作自定义特性。通过这个方法设置的特性名会被统一转换为小写形式，即“ID”最终会变成“id”。
div.id="someOtherId";
div.align="left";
//上面的特性都是属性，所以直接赋值。
//下面这样为DOM元素添加一个自定义的属性，该属性不会自动成为元素的特性
div.mycolor="red";
alert(div.getAttribute("mycolor"));//null(IE除外)
最后一个方法就是removeAttribute（），这个方法用于彻底删除元素的特性。调用这个方法不仅会清楚特性的值，而且也会从元素中完全删除特性：
div.removeAttribute("class");
这个方法并不常用，但在序列化DOM元素时，可以通过它来确切的指定要包含哪些特性。IE6以前版本不支持removeAttribute（）。
4.attributes属性
Element类型是使用attributes属性的唯一一个DOM节点类型。attributes属性中包含一个NameNodeMap，与NodeList类似，也是一个“动态”的集合。元素的每一个特性都由一个Attr节点表示，每个节点都保存在NameNodeMap对象中。
NameNodeMap对象用于下列方法：
◆ getNamedItem(name)：返回nodeName属性等于name的节点；
◆ removeNamedItem（name）：从列表中移除nodeName属性等于那么的节点；
◆ setNamedItem（node）：向列表中添加节点，以节点的nodeName属性为索引；
◆ item（pos）：返回位于数字pos位置处的节点。
attributes属性中包含一系列节点，每个节点的nodeName就是特性的名称，而节点的nodeValue就是特性的值。要取得元素的id特性，可以如下：
var id = element.attributes.getNamedItem("id").nodeValue;
//可以使用方括号语法通过特性名称访问节点
var id = element.attributes["id"].nodeValue;
//可以先取得特性节点，然后再讲其nodeValue设置为新值。
element.attributes["id"].nodeValue="someOtherId";
调用removeNamedItem（）方法与在元素上调用removeAttribute（）方法的效果相同——直接删除具有给定名称的特性。
两个方法的唯一区别就是：removeNamedItem（）返回表示被删除特性的Attr节点。
最后还有一个很不常用的方法：setNamedItem()——通过这个方法可以为元素添加一个新特性：
element.attributes.setNamedItem(newAttr);
不过如果想要遍历元素的特性，attributes属性倒是可以派上用场。在需要将DOM结构序列化为XML或HTML字符串时，多数都会涉及遍历元素特性。
5.创建元素
使用document.createElement()方法可以创建新元素。这个方法只接受一个参数，即要创建元素的标签名。
这个标签名在HTML文档中不区分大小写，而在XML（包括XHTML）文档中，则是区分大小写的。
var div = document.createElement("div");
在新元素上设置的这些特性只是给它们赋予了相应的信息。由于新元素尚未被添加到文档树中，因此设置这些特性不会影响浏览器的显示。
要把新元素添加到文档树，可以使用appendChild（）、insertBefore（）或replaceChild（）方法。
document.body.appendChild(div);//这样的代码会把新创建的元素添加到文档的<body>元素中
一旦将元素添加到文档树中，浏览器就会立即呈现该元素。此后，对这个元素所做的任何修改都会实时反映在浏览器中。
在IE中可以以另一种方式使用createElement（），即为这个方法传入完整的元素标签，也可以包含属性：
var div = document.createElement("<div id = \"myNewDiv"\ class=\"box\"></div>");
这种方式有助于避开在IE7及更早版本中动态创建元素的某些问题。下面是已知的一些问题：
◆ 不能设置动态创建的<iframe>元素的name特性
◆ 不能通过表单的reset（）方法重设动态创建的<input>元素
◆ 动态创建的 type特性值为“reset”的<button>元素重设不了表单
◆ 动态创建的一批name相同的单选按钮彼此毫无关系。name值相同的一组单选按钮本来应该用于表示同一选项的不同值，但动态创建的一批这种单选按钮质检却没有这种关系。
if(client.browser.ie && client.browser.ie <=7){
//创建一个带name特性的iframe元素
var iframe = document.createElement("<iframe name=\"myframe\"></iframe>")
//创建input元素
var input = document.createElement("<input type=\"checkbox\">")
}
与使用createElement（）的惯常方式一样，这样的用法也会返回一个DOM元素的引用。
可以将这个引用添加到文档中，也可以对其加以增强。
6.元素的子节点
元素可以有任意数目的子节点和后代节点，因为元素可以是其他元素的子节点。元素的childNodes属性中包含了它的所有子节点，这些子节点有可能是元素、文本节点、注释或处理指定。
不同浏览器在看待这些节点方面存在显著的不同。
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
如果是IE来解析这些代码，那么<ul>元素会有3个子节点，分别是3个<li>元素
但如果是在其他浏览器中，<ul>元素都会有7个元素，包括3个<li>元素和4个文本节点(表示<li>元素之间的空白符)
但是如果把元素之间的空白符删除，那么所有浏览器都会返回相同数目的子节点。
<ul id="myList"><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>
<ul>元素在任何浏览器中都会包含3个子节点。如果需要通过childNodes属性遍历子节点，那么一定不要忘记浏览期间的这一差别。这意味着在执行某项操作以前，通常都要先检查一下nodeType属性：
for(var i=0, len=element.childNodes.length; i<len; i++){
if(element.childNodes[i].nodeType--1){
//执行某些操作
}
}
//会循环遍历特定元素的每一个子节点
//然后只在子节点的nodeType等于1的情况下，才会执行某些操作
网友评论