DOM（二）

5、访问父子、兄弟节点：

childNodes	访问选定元素节点下的所有子节点列表，返回节点数组（如果选定节点没有子节点，则该属性返回不包含节点的NodeList）
firstChild、lastChild	firstChild：返回childNodes数组的第一个子节点，如果选定节点没子节点，则该属性返回NULL lastChild：返回childNodes数组的最后一个子节点，如果没有，则返回NULL
parentNode	获取指定节点的父节点
nextSibling previousSibling	nextSibling：返回某个节点之后紧跟的节点（处于同一树层级中），如无，NULL； previousSibling：返回某个节点之前紧跟的节点（处于同一树层级中）

Tips小贴士：

a、IE全系列、firefox、chrome、opera、safari兼容问题

b、节点之间的空白符，在firefox、chrome、opera、safari浏览器是文本节点，所以IE是 3，其它浏览器是7，如下图：



6、增删改节点方法：

A、创建：createElement()（创建元素节点）、

document.createElement(tagName)

参数：字符串值，这个字符串用来指明创建元素的类型。

createTextNode()（创建文本节点）

document.createTextNode(data)

参数：字符串值，可规定此节点的文本。

B、删除：removeChild()：

nodeObject.removeChild(node)

参数：node ：必需，指定需要删除的节点。

C、替换：replaceChild()：

node.replaceChild (newnode,oldnew )

参数：newnode : 必需，用于替换 oldnew 的对象。 oldnew : 必需，被 newnode 替换的对象。

注意：

1. 当 oldnode 被替换时，所有与之相关的属性内容都将被移除。

2. newnode 必须先被建立。

D、插入：

appendChild(newnode);

参数：newnode：指定追加的节点。

insertBefore(newnode,node);

参数：newnode: 要插入的新节点。node: 指定此节点前插入节点。