DOM编程(下)

简介: 笔记

现在问题就是,IE和fireFox的装载XML方式是不一样的。因此,我们最好封装成一个方法来装载XML

/**

* @param flag true代表的是文件,false代表的是字符串

* @param xmldoc 要封装成DOM对象的字符串或文件

* @return 返回的是根节点的元素节点

*  重点放在高版本上!!

* */



functionloadXML(flag,xmldoc){


   //浏览器是低版本的IE

   varobjXml;

   if(window.ActiveXObject){


       //是IE的话,有两种方式来创建ActiveXObject对象

       varname=["MSXML2.DOMDocument","Miscrosoft.XmlDom"];

       for(vari=0;i<name.length;i++){

           objXml=newActiveXObject(name);

           break;

       }


       //设置为同步【装载XML文件成DOM对象,我们都是同步操作】

       objXml.async=false;


       //如果是字符串

       if(flag==false){

           objXml.loadXML(xmldoc);

       }else{

           //如果是文件

           objXml.load(xmldoc)

       }

       returnobjXml.documentElement;



       //浏览器是fireFox或者高版本的IE

   }elseif(document.implementation.createDocument){

       //字符串

       if(flag==false){


           //创建对象,解析XML字符串

           objXml=newDOMParser();


           //解析到根节点

           varroot=objXml.parseFromString(xmldoc,"text/xml");

           return  root.documentElement;



       }else{


           //由于安全问题,想要得到XML文件,需要通过XMLHttpRequest对象来获取

           objXml=newXMLHttpRequest();


           //同步

           objXml.open("GET","1.xml",false);


           objXml.send(null);


           //返回XML数据

           returnobjXml.responseXML.documentElement;


       }

       //解析不了啦

   }else{

       alert("解析不了了");

   }


}


测试

10.jpg


去除空白字符


如果有需要就加这段功能吧!

functionremoveBlank(xml){

   if(xml.childNodes.length>1){

       for(varloopIndex=0;loopIndex<xml.childNodes.length;loopIndex++){

           varcurrentNode=xml.childNodes[loopIndex];

           if(currentNode.nodeType==1){

               removeBlank(currentNode);

           }

           if(((/^\s+$/.test(currentNode.nodeValue)))&&(currentNode.nodeType==3)){

               xml.removeChild(xml.childNodes[loopIndex--]);

           }

       }

   }

}


XPATH


XPATH技术其实我们已经接触过了,在讲解XML的时候,我们已经使用过了XPATH技术了。

可以参考我之前的XML博文:http://blog.csdn.net/hon_3y/article/details/55049184

XPATH总体可分为三种搜索:

  • 绝对路径搜索(/根节点/子节点)
  • 相对路径搜索(子节点/子节点)【与绝对路径搜索的差别就是开头有无"/"】
  • 全文搜索(//子节点)

如果我们要查找属性节点、文本节点、多条件的节点是这样写XPATH的

  • 属性节点:(先找到元素节点/@属性名)
  • 文本节点:(先找到元素节点/test())
  • 有条件查询节点:(先找到元素节点/[条件])
  • 多条件查询节点:(先找到元素节点/[条件][条件])【两个条件同时吻合】
  • 多条件查询节点:(先找到元素节点/[条件]|先找到元素节点/[条件])【或关系】

我们之前使用dom4j的时候,是调用selectSingleNode()和selectNodes()方法来获取任意深度的节点或多个节点

我们想要在JavaScript中使用XPATH技术,那么我们也实现这两个方法,调用它就行了!


selectSingleNode()


IE10,IE11下无法使用selectSingleNode()方法。解决参考:http://wenda.so.com/q/1458453513726662

但是,我没有解决掉该问题。。。。。

下面是JavaScript代码:

/**

*

* @param xmldoc 代表的是XML的根节点

* @param xpath 给出的XPATH表达式

* @return 返回的是对应的节点或多个节点

*

*

*

*/

functionselectSingleNode(xmldoc,xpath){



   //如果是IE,IE10,IE11解决不了....会的人告诉我一声!!

   if(navigator.userAgent.indexOf(".NET")>0){

       varvalue=xmldoc.selectNodes(xpath)

       returnvalue;


   }else{


       //如果是fireFox

       varxpathObj=newXPathEvaluator();

       varvalue=xpathObj.evaluate(xpath,xmldoc,null,XPathResult.FIRST_ORDERED_NODE_TYPE,null);


       returnvalue.singleNodeValue;

   }


}

 

  • 测试代码:

<scripttype="text/javascript"src="loadXML.js"></script>

   <scripttype="text/javascript"src="xpath.js"></script>


   <scripttype="text/javascript">


       functiontest(){


           varfile=loadXML(true,"1.xml");


           varxpathValue=selectSingleNode(file,"//dd");

           varvalue=xpathValue;


           alert(value);


       }


   </script>

  • 在fireFox,Chrome浏览器可以正常获取得到节点

11.jpg


selectNodes()


由于上面IE问题我到现在还没有解决,所以下面直接测试FireFox浏览器了

等我复习到Jquery的时候,再把这里的坑填了吧。。。

  • javaScript代码:

/**

*

* @param xmldoc 代表的是XML的根节点

* @param xpath 给出的XPATH表达式

* @return 返回的是节点数组

*/

functionselectNodes(xmldoc,xpath){


   varxpathObj=newXPathEvaluator();


   //如果是多节点,返回的是迭代器

   variterator=xpathObj.evaluate(xpath,xmldoc,null,XPathResult.ORDERED_NODE_ITERATOR_TYPE,null);


   //把迭代器的数据写到数组中

   vararr=newArray();


   varnode;

   while((node=iterator.iterateNext())!=null){

       arr.push(node);

   }


   returnarr;


}

 

  • 测试代码:

functiontest(){


           varfile=loadXML(true,"1.xml");


           varxpathValue=selectNodes(file,"//aa");

           varvalue=xpathValue;


           alert(value);

       }

  • 效果:


12.jpg


目录
相关文章
N..
|
2月前
|
JavaScript 前端开发 UED
DOM编程中的form对象
DOM编程中的form对象
N..
11 0
N..
|
2月前
|
XML JavaScript 数据格式
DOM编程中的Document对象
DOM编程中的Document对象
N..
17 0
|
6月前
|
XML 移动开发 JavaScript
DOM编程基础
DOM编程基础
51 0
|
7月前
|
JavaScript
DOM编程2-重要案例!!!
DOM编程2-重要案例!!!
|
7月前
|
JavaScript 前端开发 API
DOM编程:Document Object Model
DOM编程:Document Object Model
|
8月前
|
JavaScript 前端开发
DOM编程进阶(JS)
本篇是DOM编程基础(JS)的进阶版
|
8月前
|
存储 JavaScript 前端开发
JavaScript函数和BOM及DOM编程(详细总结-无尿点)(一)
JavaScript函数和BOM及DOM编程(详细总结-无尿点)(一)
35 0
|
8月前
|
XML JavaScript 前端开发
JavaScript函数和BOM及DOM编程(详细总结-无尿点)(二)
JavaScript函数和BOM及DOM编程(详细总结-无尿点)(二)
26 0
N..
|
2月前
|
JavaScript 前端开发
DOM编程浏览器
DOM编程浏览器
N..
13 0
|
5月前
|
XML JavaScript 前端开发
JavaScript-05 DOM编程 全网最最 详细最全面最易懂的
JavaScript-05 DOM编程 全网最最 详细最全面最易懂的