javascript DOM详解之DOM1

DOM是针对HTML和XML文档的一个API。DOM描述了一个层次化的节点树，允许开发人员添加、移除和修改页面的一部分。

DOM可以将任何的HTML或者XML描述成为一个由多层次节点构成的结构。节点分为几种不同的类型，每种类型分别表示文档中不同的信息或者标记。每个节点都拥有各自的特点、数据和方法，另外也与其他节点存在特定的关系。节点之间构成了层次，而所有的页面标记则表现为一个以特定节点为根节点的树形结构。

HTML文档的根元素是html，这个根节点有且只有一个。而XML中没有明确的规定根节点是谁，所以任何元素都有可能成为根节点。

节点的类型：Node类型

DOM1级定义了一个Node接口，该接口将由DOM中所有的节点类型实现。这个Node接口在Javascript中是作为Node类型实现的；除了IE外，其它所有浏览器中都可以访问这个类型。每个节点都有一个nodeType属性，用于表明节点的类型。节点类型由在Node类型中定义的下列12个数值常量来表示，任何节点必居其一：

节点数值常量	节点常量名称
1	Node.ELEMENT_NODE
2	Node. ATTRIBUTE_NODE
3	Node. TEXT_NODE
4	Node. CDATA_SECTION_NODE
5	Node. ENTITY_REFERENCE_NODE
6	Node. ENTITY_NODE
7	Node. PROCESSING_INSTRUCTION_NODE
8	Node. COMMENT_NODE
9	Node. DOCUMENT_NODE
10	Node. DOCUMENT_TYPE_NODE
11	Node. DOCUMENT_FRAGMENT_NODE
12	Node. NOTATION_NODE

由于IE不支持节点常量名称，所以为了保证浏览器的兼容，通常使用节点数值常量进行比较。

每个节点都支持的属性和方法

1.nodeName和nodeValue属性

要了解节点信息，可以使用这两个属性。但是在使用之前，要检测节点的类型

var value;

if(someNode.nodeType==1){

   value=someNode.nodeName;

}

2.节点关系

节点之间的关系类似一种数组结构，但是他们之间存在着顺序。使用DOM获取NodeList，这个NodeList是DOM的动态的结果，真实的反应当前的Node状态。NodeList具有length属性。IE8以及更早的版本不支持NodeList，想要做到兼容，可以使用下面的代码进行兼容：

function convertToArray(nodes){

var array=null;

try{

array=Array.prototype.slice.call(nodes,0);//针对非IE

}catch(ex){

array=new Array();

for(var i=0,len=nodes.length;I<len;i++){

  array.push(nodes[i]);

}

}

   return array;

}

每个节点都有parentNode属性，该属性指向文档书中的父节点。在childNodes中，nextSibling指向后一个节点，previousSibling指向前一个节点。当指向节点不存在时，值为null。

3.操作节点

方法	描述
createAttribute()	用指定的名字创建新的Attr节点。
createComment()	用指定的字符串创建新的Comment节点。
createElement()	用指定的标记名创建新的Element节点。
createTextNode()	用指定的文本创建新的TextNode节点。
getElementById()	返回文档中具有指定id属性的Element节点。
getElementsByTagName()	返回文档中具有指定标记名的所有Element节点。

方法	描述
appendChild()	通过把一个节点增加到当前节点的childNodes[]组，给文档树增加节点。
cloneNode()	复制当前节点，或者复制当前节点以及它的所有子孙节点。
hasChildNodes()	如果当前节点拥有子节点，则将返回true。
insertBefore()	给文档树插入一个节点，位置在当前节点的指定子节点之前。如果该节点已经存在，则删除之再插入到它的位置。
removeChild()	从文档树中删除并返回指定的子节点。
replaceChild()	从文档树中删除并返回指定的子节点，用另一个节点替换它。

其中这些方法相当的常用，需要熟记。

在操作子节点的方法中，它们操作后都是返回不用的节点或者是正在被操作的节点。

cloneNode(true),实现的是深层复制，子节点也会复制；cloneNode(false),实现的是浅层复制，子节点不会复制。normalize():处理文档树中的文本节点。

Document类型

js通过Document类型表示文档。在浏览器中，document对象是HTMLDocument的一个实例，表示整个页面。而且document对象是window对象的一个属性，可以将其作为全局对象来访问。

特征：nodeName="#document" nodeType=9

1.文档的子节点

documentElement始终指向页面的html部分，它要比childNodes速度要快。由于页面中body属性比较常用，因此document.body就是对页面上body的快捷引用。document另一个可能的子节点DocumentType可以通过docuemnt.doctype来获取。

2.文档信息

document.title,获取页面上title标签的文本内容。document.url包含着完整的URL，document.domain只包含着页面的域名。document.referrer则保存着连接到当前页面的那个页面的URL。如果没有页面来源，referrer是空字符串。document.domain设置可以解决跨域问题，但是它一旦设置将会无法再次被更改。

3.查找元素

document.getElementById(),参数为domNode的id，但是它只返回第一次出现这个id的domNode。document.getElementByTagName(),参数为要取得元素的标签名，返回零个或者多个元素的NodeList。这个NodeList对象可以使用方括号语法或item()方法来访问HTMLCollection对象中的项。HTMLCollection对象还有以一个方法叫做namedItem(),使用这个方法可以通过元素的name属性取得集合中的项。当document.getElementsByTagName()的参数为"*"时，表示获取页面的全部元素。

document.getElementsByName(),参数为节点的name属性，结果类似document.getElementByTagName()。

4.特殊集合

document.anchors;document.forms;document.images;document.links

5DOM一致性检测

检测实例

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

但是这个检测有时并不可靠，需要进行能力检测。

6文档的写入

write(),writeln(),open(),close()是操作文档写入相关的函数。

Element类型

nodeName为元素的标签名，nodeValue为null。

要访问元素的标签名，可以使用tagName获取，获取到的标签名很大的可能性为大写，比较的时候，要进行转化才可以比较。

1.一般情况下具有的属性：id,title,lang（语言）,dir（语言的方向，左右朝向，上下朝向）,className（样式）

2.取得属性的方法：getAttribute(),setAttribute(),removeAttribute().属性名称不区分大小写，HTML5的自定义属性前面要加data-前缀以方便验证。style属性返回的是CSS中的第一个对象，它是为了方便编程方式访问使用的。js的事件处理程序，通过getAttribute()获取，只会得到第一个处理函数。由于IE的兼容问题，getAttribute()使用频率降低了不少，一般用对象.属性的方式获取属性值。

3.Element类型是使用attributes属性的唯一DOM节点类型。attributes属性包含了一个NameNodeMap,与NodeList类似，也是一个动态集合。每个属性都有一个Attr节点表示，每个节点保存在NameNodeMap中。NameNodeMap对象具有以下方法：

getNamedItem(name):返回nodeName属性等于name的节点

removeNamedItem(name):从列表中移除以节点nodeName属性等于name的节点

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

item(pos):返回位于数字pos位置处的节点

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

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

如果想遍历元素的特性，attributes属性可以派上用场。

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.attribute[i].nodeValue;

  if(element.attribute[i].specified){

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

      }

  }

  return pairs.join(" ");

}

4创建元素

document.createElement(),参数为标签名。但是IE中也可以使用下面的方法

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

这种方式有助于规避IE7以前的动态创建问题：

    1.不能设置动态创建的<iframe>元素的name

    2.不能通过表单的reset()方法重设动态创建的input元素

    3.动态创建的type特性值为“reset”的按钮重设不了表单

    4.动态创建的一批name相同的单选按钮彼此毫无关系

5.元素的子节点

var items=document.getElementById("mydiv").getElementsByTagName("li");

Text类型

nodeName="#text",nodeValue的值为节点所包含的文本。data的值为nodeValue的值是一样的，两个等价。

appendData(text):将text添加到节点的尾部。

deleteData(offset,count):从offset处开始删除，长度为count

insertData(offset,text):在offset指定的位置插入text

replaceData(offset,count,text):用text替换从offset位置开始长度为count的文本

splitText(offset):从offset处将文本分成两个文本节点

substringData(offset,count):提取从offset开始，长度为count的文本

length属性，保存文本的长度

创建文本节点的方法：document.createTextNode(),参数为要插入的文本。在创建新的文本节点的同时，也会设置ownerDocument属性。创建示例：

var textNode=document.createTextNode("<strong>Hello</strong>world!");

规范化文本节点使用的方法是normalize()，它会将两个相邻的文本节点进行合并。使用的时候调用相邻文本节点的父节点的normalize（）方法，会合并文本节点。

分割文本节点splitText(offset),操作的节点为文本节点，即TextNode.splitText(offset);

Comment类型

它表示在DOM中的注释节点。nodeName=“#comment”;nodeValue值是注释的内容，同TextNode类似，data也可以取得注释的内容。

CDATASection类型

这个类型只是针对基于XML的文档，表示的是CDATA区域。由于这种类型继承自Text类型，因此除了splitText()之外所有的字符串操作方法，它还具有一下的特征和方法：

nodeName="#cdata-selection";nodeValue是CDATA区域中的内容。

只有真正的XML文档才可以使用document.createCDataSelection()来创建CDATA区域，只需要传入节点内容即可。

DocumentType类型

在web浏览器中并不常用，仅有FireFox,Safari和Opera支持。它包含着与文档doctype相关的所有信息。

nodeName的值是doctype的名称，nodeValue是null。在DOM1中，DocumentType对象不能动态的创建，而只能通过解析代码的方式来创建。它有三个属性，name:表示文档的名称；entities：由文档类型描述的实体的NamedNodeMap对象，notations:由文档类型描述的符号的NamedNodeMap对象。

DocumentFragment类型

DOM规定文档片段（document fragment）是一种轻量级的文档，可以包含和控制节点，但是不会像完整的文档那样占用额外的资源。nodeName="#document-fragment",nodeValue值为null。虽然不能把文档片段直接添加到文档当中，但是可以将它作为一个仓库来使用，即里面可以保存一些可能会添加到文档中的节点。创建方法：

var  fragment=document.createDocumentFragment()；

文档片段可以采用document类似的对子节点的操作，但是把文档片段当做子节点添加到文档树中的时候，只是将文档片段的子节点添加到文档树中，fragment不会添加到DOM中，但是fragment会清空，它本身永远不会成文档树的一部分。

Attr类型

它是DOM中attributes的节点，nodeName的值是属性的名称，nodeValue是属性的值。它有三个相关属性name，value，specified是一个布尔值，以区别是代码指定的Attr还是默认的。

DOM操作技术

动态加载js文件，css文件，动态生成表格.

NodeList,NamedNodeMap,HTMLCollection是DOM的实际状况的反应，是整体上把握DOM的关键。