HTMLDOM详解.ppt

HTML DOM详解 概念 当HTML页面被浏览器加载的时候，会创建与当前HTML页面对应的文档对象模型，即DOM（Document Object Model）. HTML文档对象模型示意图 这里需要强调一点的是：不同的浏览器对文本节点的认识是不一样的。比如google浏览器，body下面始终有一个文本节点，且把换行也作为一个节点。 针对的不同的浏览器或者同一浏览器不同版本的浏览器可能会有些出入，以测试为准。 通过示意图我们可以得出以下结论： 1、HTML文档对象模型被构造为HTML节点树，顶层节点就是document对象，节点和节点之间表现为兄弟或者父子关系。 2、通过document对象可以访问到HTML文档对象模型中任何一个节点 3、在得到HTML文档对象中其中任何节点，我们都可以得到其他节点 4、节点作为对象，我们就可以对其进行增、删、改、查 所谓增加，即指的是向节点树或者文档对象模型中添加节点，亦即向HTML中添加标签。 所谓修改，即指的是修改节点对象的属性、样式和文本内容 所谓删除，即指的是删除节点或者标签 所谓查询，即指的是通过节点名称或者节点ID属性去查询相应节点，或者通过某一个节点去查询相应的子节点、父节点或者兄弟节点，或者这些节点的父节点、兄弟节点、子节点。当然，查询节点通常并不是最终目的，而是要获取这些节点的属性或者内容。 一：查询 一般情况下，我们有两种查询机制： document.getElementById(String elementId); --通过节点元素的ID属性捕获该节点，这样做的好处是能够快速得到一个指定的节点。 document.getElementsByTagName(String tagName); --通过节点名称得到一组节点。这样做的好处是能够得到相同标签名称的一组节点。 还有一种方式： document.getElementsByName(String elementName) --这是根据节点元素的name属性获取节点。 这里需要注意的是：节点的ID属性值是唯一的，但name属性值不一定唯一，因此，该方法返回的是一个节点数组。 我们有的时候，可能还会有这样的需求：希望通过类名(即节点元素的class属性值)获取节点。但document并没有提供这样的方法，我们可以自己构建一个方法。这个时候需要分为两种情况来讨论，第一种：知道父节点，获取其子节点中同一个类的节点；第二种情况是：只要求获取同一类的节点。(这两种方式，都涉及到递归。) 只指定Class属性值 创建一个JS文件:dom.js，用于封装下列代码 --方法结构 getElementsByClass(String className); 实现 function getElementsByTagName(className){ //获取body节点及其子节点集合 var bodyNode=document.getElementsByTagName(body)[0]; var bodyChildNodes=bodyNode.childNodes; //创建存放相同class属性值的节点的集合 var nodesByClass=[]; //通过递归的方式找到body当中类名为className的节点 for(var i=0;ibodyChildNodes.length;i++){ pushNodeToArray(nodesByClass,className,bodyChildNodes[0]); } //返回存放有相同class属性值的节点的集合 return nodeByClass; } pushNodeToArray函数实现 function pushNodeToArray(nodesByClass,className,e){ if(e instanceof HTMLElement){ //如果元素e是HTML节点元素且class属性值为className,就存放到集合 if(e.getAttribute(class)==className){ nodesByClass.push(e); } //节点元素e的子节点当中有可能还有class属性值为className的子节点 //因此，需要递归调用pushNodeToArray函数 var nodes=e.childNodes; for(var i=0;inodes.length;i++){ pushNodeToArray(nodesByClass,className,nodes[i]); } } } 同时指定父节点和class