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){

           var nowprice=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");

    }

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

比较全的Dom知识在

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

中有详细解释，可查看！