DOM基础

一、基础概念：DOM(DocumentObject  Model)文档对象模型：百度百科上的解释是W3C组织推荐的处理可扩展标志语言的标准编程接口。它可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。我对DOM的初步理解就是，目前我们接触到的文档有HTML、XML等等，我们在网页设计中，不可能每次修改源文档内容来实现或者完善我们的网页，通过DOM我们就可以以面向对象的方式操作这些文档，改变这些对象的行为或者属性，甚至是对象之间的联系。

DOM对这些文档能进行的操作无非有添加、删除、修改。在HTML或者XML中，他们的根节点、属性节点、文本节点等等，以一种树的形式出现，那么在DOM中也就形成了一种树结构。

二、       DOM操作HTML？

DOM操作HTML重点就是对HTML中的节点或者属性的控制，DOM中的NODE对象通过nodeType属性可以判断节点类型。

需要判断的节点类型有5中，分别对应着HTML或者XML中的元素节点、属性节点、文本节点、注释节点、根节点，如图所示：

下面我们分别介绍这些节点类型中每一种节点对应的属性和方法使用方式：

根节点：

<script type="text/javascript" >      function testapi(){          //获得根节点元素  var htmlrootElement=documnt.documentElement;//获得指定的元素节点  var divNode=document.getElementById("div1");  //获得整个页面所有的div元素节点          var divNodes=document.getElementsByTagName("div");  //创建元素节点  var newdivNode=document.createElement("div");  //创建文本节点          var newTextNode=document.createTextNode("aaaa");    }  </script>  

元素节点：

//根据标签名获得元素节点      var divNode2=document.getElementById("div2");      var divNodes2=divNode2.getElementsByTagName("div");  

//操作属性  

    var inputtext=document.getElementById("inputtext");      var flag=inputtext.hasAttribute("value");      inputtext.setAttribute("value", "aaacede");      var textValue=inputtext.getAttribute("value");      flag=inputtext.hasAttribute("value");        inputtext.removeAttribute("value");  

所有节点都具有的属性和方法：这里我们介绍几个在使用过程中不容易理解的：

childNodes：当前节点的所有子节点数组，如果没有子节点，则返回空数组

parentNode：返回当前节点的父节点，如果没有父节点，则返回null

appendChild():给当前节点增加一个子节点，增加的子节点位于当前节点的所有子节点的末尾，方法参数为node对象

InsertBefore():插入一个节点，为止在当前节点的指定子节点之前，如果指定子节点不存在，则执行效果和appendChild方法相同。

如果插入的已经是当前节点的子节点，则将这个节点移动到指定节点前

 removeChild():从文档树中删除当前节点的指定子节点，同时返回指定的子节点。

//获取所有的子节点  

var childs=divNode2.childNodes;  

//获取父节点  var parent=divNode2.parentNode; 

//获取第一个子节点和最后一个子节点  var first=divNode2.firstChild;  

//获取兄弟节点   var next=divNode2.nextSibling; 

//追加节点     newdivNode.appendChild(newTextNode);      divNode2.appendChild(newdivNode);  

//移除节点

var remove=divNode2.removeChild(new3); 

以上是利用DOM操作HTML的基础知识，总结为两部分分别为DOM对节点的控制，对属性的控制，所有的操作无非就是增加节点或者属性，删除节点或者属性，或者是查找节点或者属性，对于DOM操作XML将在后面的博客中介绍。