DOM节点

一.1.1 节点关系

文档中所有节点相互之间都有关系，包括父子关系，同胞关系。

每个节点都有childNodes属性，保存着一个NodeList对象，NodeList是一种类数组的对象，可以使用childeNode[0]，childNode.item(1)来访问，同时拥有length属性，但并不是Array实例。

parentNode：指向文档树种的父节点
nextSibling：紧挨着当前节点的下一个节点
previousSibling：紧挨着当前节点的上一个节点
firstChild：表现某一节点的第一个节点，childNodes[0]
lastChild：表示某一节点的最后一个子节点,childeNodes[childNodes.length-1]

1.2 节点操作

hasChildNodes()方法：判定一个节点是否有子节点，有返回true，没有返回false
removeChild()方法：去除一个节点
appendChild()方法：添加一个节点，如果文档树中已经存在该节点，则将它删除，然后在新位置插入
replaceChild(node1，node2)方法：从文档树中删除指定的节点node2，插入节点node1，被替换的节点仍然在文档中，但是没有位置
insertBefore(node1，node2)方法：在指定节点node2的前面插入节点node1，并返回node1.如果已经存在，则删除原来的，然后在新位置插入
cloneNode()方法：复制一个节点，该方法有一个参数，true表示深复制，false表示浅复制。不会复制属性，处理程序等。

二.1. Doucument类型

document对象是HTMLDocument（继承自Document类型）的一个实例，表示整个html页面或其他基于xml的文档。并且document是window对象的一个属性，可以将其当做全局对象来访问。

2. 文档子节点

Document的子节点可以是DocumentType、Element、ProcessingInstructior或Comment，有两个访问节点的快捷方式:

1. documentElement，该属性一直指向页面中的html元素。
2. childNodes，直接访问文档元素。
3. document.body，直接指向body元素
4. doucment.doctype，取得标签<!DOCTYPE>的信息
   文档类型是只读的，而且它只有一个元素节点，通常早已存在。

3 .查找元素

Document类型提供两个查找元素的方法:

1. getElementById(),如果找到相应的元素则返回该元素，如果不存在带有相应ID的元素，则返回null。
2. getElementByTagName(),返回包含零或多个元素的NodeList，在HTMl文档中，这个方法会返回一个HTMLCollection对象，与NodeList非常类似。其中THMLCollection对象有一个方法namedItem()
3. getElementsByName(),会返回带有给定name特性的所有元素。
   例： var images = document.getElementsById(“box”);//表示在文档中通过id查找id是box的元素。

2.文档写入

document.write()方法可以用在两个方面：

1.页面载入过程中用实时脚本创建页面内容。
2.用延时脚本创建本窗口或新窗口的内容。

只有当页面被加载的时候document.write()函数才会被执行

doucment.writeln()与上述类似，区别在于换行。
open()和close()分别用于打开和关闭网页的输出流，如果在页面加载期间使用write()，则不需要用这两个方法。

3. 操作特性

getAttribute():用来获取相应元素或其内容的附加信息，与上述获取属性基本一致，但是有两点区别：

1.style，通过getAttribute()获取的是CSS文本，通过属性获取的会返回一个对象。
2.onclick，getAttribute()获取相应代码的字符串，属性获取则会返回一个JavaScript函数。
节点属性的获取：obj.getAttribute(属性名)。
3.setAttribute()：接收两个参数，要设置的特性名和值，如果特性已经存在，会修改特性值，如果不存在则会创建。

4.removeAttribute():用于彻底删除元素的特性，IE6及之前的版本不支持此方法。

4. 创建元素

document.createElement()方法可以创建新元素，此方法只接收一个参数，即要创建元素的标签名（不区分大小）。

 /*** div创建插入过程 ***/
var div = document.createElement("div");
div.id = "myNewDiv";
div.className = "box";
//追加元素  appendChild()
document.body.appendChild(div);

三、Text类型

Text类型为文本节点，包含的是可照字面解释的纯文本内容，可以包含转义后的HTML字符，但不能包含HTML代码。

创建文本节点
document.createTextNode(“Hello world”);
document.createElement(“div”);
document.body.appendChild(element);//在未添加之前，虽然创建，但是不会显示出来