JS基础-DOM

一、DOM之间的关系

获取A节点的子节点：DOMA.childNodes

获取B节点的父级节点：DOMB.parentNode

获取A节点的第一个子节点：DOMA.firstChild

获取A节点的最后一个子节点：DOMA.lastChild

获取C节点的前一个节点：DOMC.previousSibling

获取C节点的后一个节点：DOMC.nextSibling

 

二、DOM节点的操作

【1】向A节点的childNodes中的末尾添加节点B ---partentDom.appendChild(newNode)

         DOMA.appendChild(DOMB);

说明：参数：需要添加的子节点的dom；返回添加的新节点dom；

【2】向A节点的childNodes中的任意位置添加节点 ---partentDom.insertBefore(newNode,node)

         DOMA.insertBefore(newNode,DOMA.firstChild) ----向A节点的首位添加newNode节点

         DOMA.insertBefore(newNode,DOMA.lastChild) ----向A节点的最后一个子节点之前添加newNode节点

         DOMA.insertBefore(newNode,null) ----向A节点的子节点的末尾增加newNode节点，等价于appendChild()

说明：参数1：需要插入的dom节点；参数2：参照节点；返回替换后的节点DOM

【3】替换A节点的childNodes中的任意一个节点 ---partentDom.replaceChild(newNode,node)

             DOMA.replaceChild(newNode,DOMA.firstChild) ---替换A节点的第一个子节点

说明：参数1：需要插入的子节点dom，参数2：需要删除的子节点dom；返回需要插入的子节点dom

【4】删除A节点的childNodes中的某个子节点 ---parentDom.removeChild(node)

             DOMA.removeChild(DomA.firstChild) ---删除A节点的第一个子节点

             DOMA.parentNode.removeChild(DOMA) ---删除A节点

说明：参数1：需要删除的节点；返回删除的节点dom

三、其他DOM的方法

【1】赋值A节点：DOMA.cloneNode（boolean）；

说明：参数：true-代表对A节点进行深复制（包括A节点下的所有子节点）

                      false-代表对A节点进行浅赋值（不包括A节点下的子节点）

                      返回值-对A节点的副本dom

注意：cloneNode不会复制Dom中的javascript属性，其中包括事件处理程序。

IE在此存在一个bug，会复制事件处理程序，所以在使用cloneNode时先移除事件处理程序。