Js之屠龙刀——Dom解析

Js之屠龙刀——Dom解析

     在开发过程中，经常要用到javascript操作HTML和XML（文档对象模型）。HTML和XML的文档对象模型都类似于倒置的树形结构，在Dom模型中，每个节点（node）都有一系列的子节点（childNode），每个节点都有唯一的父节点（parentNode），节点又分为元素节点（element node）和文本节点（text node）两种，元素节点可以包含属性（attribute）。所以掌握了操作Dom的方法，就可以操作整个XML和HTML中的所有元素，就是屠龙刀，想砍谁，就砍谁！

javaScript按照层次顺序解析DOM时常用的方法：

名称

类型

作用

documentElement

节点

获取文档的根节点

childNode

节点数组

获取节点下的子节点

firstChild

节点

获取第一个子节点

lastChild

节点

获取最后一个子节点

nextSibling

节点

获取后一个兄弟节点

previousSibling

节点

获取前一个兄弟节点

parentNode

节点

获取父节点

nodeType

整形

获取节点类型：1为元素，2为属性，3为文本

nodeName

字符串

获取节点名称，如果节点为  元素，返回元素名；如果为文本，返回null和undefined

nodeValue

字符串

获取节点的值，若为元素，返回null或undefined，若为文本，返回文本值

getAttribute

方法

获取属性值

其中一些方法是非常常用的：

名称

作用

参数

getElementById

根据id获得唯一元素

Id名称

getElementByName

根据name获取元素

Name名称

setAttribute

设置属性值

属性名，值

removeChild

删除子节点

子节点对象

removeAttribute

删除属性

属性名称

replaceChild

替换子节点

新节点，老节点

appendChild

追加子节点

子节点对象

createElement_x

创建元素节点

元素名称

createTextNode

创建文本节点

文本内容

InsertBefore

前部插入节点

节点对象

cloneNode

复制节点

复制时是否包含子节点

在具体的使用中，有很多方法可以使用，还有比较强大的jquery工具。

以下是在实际项目flowershop中使用到的js部分代码，包含有Dom解析的部分：

function changegoodsnum(obj,flowerid){

   var value=obj.value;

   if(value!=""){

$.post('${pageContext.request.contextPath}/ajax/changegoodsnum.action',{'flowerid':flowerid,'flonum':value},function(data){

          varnowprice=obj.parentNode.parentNode.children[6].children[0].innerHTML;

          var allprices=value*nowprice;

          obj.parentNode.parentNode.children[7].children[0].innerText=allprices+".0";

          document.getElementByIdx_x("goodsnum").innerText=data.counts;

         document.getElementByIdx_x("shenqianle").innerText=(data.allprice-data.newallprice)+".0";

          document.getElementByIdx_x("innerallprice").innerText=data.allprice+".0";

          document.getElementByIdx_x("innernewallprice").innerText=data.newallprice+".0";

          },"json");

   }

绿色的为jqueryAjax中的Post异步请求方式。

比较全的Dom知识在

http://www.cnblogs.com/yansheng/archive/2010/01/25/1656014.html

中有详细解释，可查看！