DOM结构与DOM操作

DOM——两个节点之间可能存在哪些关系以及如何在节点之间任意移动。

DOM是文档对象模型的简称，借助DOM模型可以将一个结构化文档转换成DOM树，程序可以访问、修改梳理的节点，也可以新增、删除树里的节点。DOM只是访问结构化文档（主要是HTML和XML）的一种思想，并不是一种技术。基于这种思想，各种语言都有自己的DOM解析器。解析器的作用是完成结构化文档和DOM树之间的转换关系。通过使用DOM模型，js可以动态地更新HTML页面内容。

DOM模型中两个节点可能存在的关系有两种：父子关系，兄弟关系。

节点之间移动？

DOM——怎样添加、移除、移动、复制、创建和查找节点。

 

添加节点：appendChild(Node newNode):将newNode 添加成当前节点的最后一个子节点；insertBefore(Node newNode,Node refNode):在ref节点之前插入newNode节点；replaceChild(Node newChild,Node oldChild):将oldChild节点替换成newChild节点。

移除节点：removeChild(oldChild):删除oldChild子节点。

复制节点：Node cloneNode(boolean deep):复制当前节点，当deep为true时，表示在复制当前节点的同时，复制该节点的全部后代节点，当为false时，表示进复制当前节点。

创建节点：document.createElement(Tag):创建Tag标签对应的节点。

 

查找节点：document.getElementById(""):根据ID访问HTML元素；

                    利用节点关系访问HTNL元素：Node parentNode:返回当前节点的父节点；Node previousSibling：返回当前节点的前一个兄弟节点；Node nextSibling:返回当前节点的后一个兄弟节点；Node[]  childNodes:返回当前节点的所有子节点；Node[] getElementByTagName(tagName):返回当前节点的具有指定标签名的所有子节点；Node firstChild:返回当前节点的第一个子节点；Node lastChild：返回当前及诶单的最后一个子节点。

 

移动节点：