Dom基础
dom简介:
dom中文名称为文档对象模型,它是由w3c制定的标准。
Node类型:
node接口由所有的节点类型实现,其中有一些常用的属性也是所有的节点共有的如:nodeType:节点的类型,nodeName:文档名称,nodeValue:文档值
节点关系:
纵所周知文档整个就是一个树形的结构,理所当然其中的节点之间肯定会有着关系,这种关系由下列属性来维持着,childNodes:节点的所有子节点集合;(该集合是一个类数组集合而且是动态的集合)。访问其中的节点有几种方式,如:someNode.childNodes[0]或者someNode.childNodes.item(0);firstChild:获得某元素的第一个子节点;lastChild:获得某元素的最后一个子节点;previousSibling:获得某元素的前一个兄弟节点;nextSibling:获得某元素的后一个兄弟节点;parentNode:获得某元素的父亲节点。
操作节点:
appendChild(someNode):用于向childNodes末尾添加节点,结果返回someNode;
insertBefore(newNode,someNode);将新节点插入childNodes中的特定位置,结果返回插入的节点,第一个参数是需要插入的节点,第二个参数是childNodes中的某个节点;
replaceChild(newNode,someNode);将childNodes中特定的节点换位新的节点,结果返回被换的节点即someNode;第一个参数为新节点,第二个参数为childNodes中的某个节点;
removeChild(someNode);移除childNodes中的某个节点,结果返回该节点;移除后从技术的角度看该节点还存在于文档中,但是此时它已经在文档中没有了自己的位置,下次垃圾回收时会将其回收掉(被替换掉的节点也是一样)。
上面这四个方法有一个共同的特点,那便是使用它们前必须获得父亲节点。也就是说是父亲节点在操作childNodes
cloneNode(boolean);boolean为true则为深复制,否则为浅复制
项目经验:前端开发过程中很多时间就是和文档在打交道,熟练的掌握这些基础知识讲给你带来很大的帮助