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:返回当前及诶单的最后一个子节点。
移动节点: