第一百二十六节，JavaScript，XPath操作xml节点

第一百二十六节，JavaScript，XPath操作xml节点

学习要点：

1.IE中的XPath

2.W3C中的XPath

3.XPath跨浏览器兼容

XPath是一种节点查找手段，对比之前使用标准DOM去查找XML中的节点方式，大大降低了查找难度，方便开发者使用。但是，DOM3级以前的标准并没有就XPath做出规范；直到DOM3在首次推荐到标准规范行列。大部分浏览器实现了这个标准，IE则以自己的方式实现了XPath。

一．IE中的XPath

在IE8及之前的浏览器，XPath是采用内置基于ActiveX的XML DOM文档对象实现的。在每一个节点上提供了两个方法：selectSingleNode()和selectNodes()。

selectSingleNode()方法接受一个XPath模式（也就是查找路径），找到匹配的第一个节点并将它返回，没有则返回null。

selectSingleNode()方法，查找xml节点，查找单一节点如果有相同的节点只返回第一个节点，有参参数是要查找的节点路径，此方法只支持IE并且是IE9以下
使用方式
XML DOM对象.selectSingleNode(‘要查找的节点路径‘)

var xml = ‘<root><user id="5">Lee</user><user id="6">Koko</user></root>‘;  //定义xml字符串
var xmldom = getXMLDOM(xml); //创建XML DOM对象,接收xml字符串
//通过XML DOM对象查找xml标签节点
var chzhao = xmldom.selectSingleNode(‘root/user‘); //selectSingleNode()方法，查找xml节点，有参参数是要查找的节点路径，此方法只支持IE并且是IE9以下
alert(serializeXML(chzhao)); //执行序列化函数，序列化查找到的节点
alert(chzhao.tagName); //打印查找到的元素标签名称
alert(chzhao.firstChild.nodeValue); //打印查找到的元素文本内容

//首先，我们需要跨浏览器获取XML DOM
function getXMLDOM(xmlStr) {  //自定义跨浏览器创建xml DOM对象，接收一个参数xml字符串
    var xmlDom = null;  //初始化一个对象

    if (typeof window.DOMParser != ‘undefined‘) {        //判断DOMParser类型不等于undefined说明支持
        //创建DOMParser对象，并且创建xml DOM对象
        xmlDom = (new DOMParser()).parseFromString(xmlStr, ‘text/xml‘);
        //获取错误信息的parsererror标签
        var errors = xmlDom.getElementsByTagName(‘parsererror‘);
        //判断错误信息标签返回集合长度大于0，说明xml有错误
        if (errors.length > 0) {
            //创建一个错误对象，获取到第一个错误标签，并且获取到他的文本内容
            throw new Error(‘XML解析错误：‘ + errors[0].firstChild.nodeValue);
        }
    //如果不支持DOMParser类型，尝试IE的方法
    } else if (typeof window.ActiveXObject != ‘undefined‘) {    //判断ActiveXObject类型不等于undefined说明支持
        var version = [  //创建一个数组，元素分别为3个xml版本
            ‘MSXML2.DOMDocument.6.0‘,
            ‘MSXML2.DOMDocument.3.0‘,
            ‘MSXML2.DOMDocument‘
        ];
        for (var i = 0; i < version.length; i++) {  //根据数组的长度循环次数
            try {
                //尝试着执行每次循环到的xml版本，创建xml对象
                xmlDom = new ActiveXObject(version[i]);
            } catch (e) {  //如果出错跳过执行第二次循环
                //跳过
            }
        }
        xmlDom.loadXML(xmlStr);  //载入xml字符串
        if (xmlDom.parseError != 0) {  //判断载入xml错误返回代码，如果不等于0说明xml有错
            //创建一个错误对象，返回错误的解释信息
            throw new Error(‘XML解析错误：‘ + xmlDom.parseError.reason);
        }
    } else {  //如果 上面两种方式都不支持
        //创建一个错误对象，抛出您所使用的系统或浏览器不支持XML DOM！
        throw new Error(‘您所使用的系统或浏览器不支持XML DOM！‘);
    }

    return xmlDom;  //最后返回创建的xmlDOM对象
}

//其次，我们还必须跨浏览器序列化XML
function serializeXML(xmlDom) {  //序列化xml函数，接收xmlDOM对象对象
    var xml = ‘‘;  //初始化一个变量等于空字符串
    if (typeof XMLSerializer != ‘undefined‘) {  //判断XMLSerializer类型，不等于undefined，说明支持序列化
        //给xml重新赋值，创建XMLSerializer对象，并且使用serializeToString方法序列化
        xml = (new XMLSerializer()).serializeToString(xmlDom);
    //如果不支持XMLSerializer类型
    } else if (typeof xmlDom.xml != ‘undefined‘) { //判断IE方式xmlDOM对象下的xml属性是否等于undefined，不等于说明支持
        //给xml重新赋值，序列化xml
        xml = xmlDom.xml;
    } else { //如果上面两种都不支持
        //创建一个错误对象，抛出无法解析XML！错误信息
        throw new Error(‘无法解析XML！‘);
    }
    return xml; //最后返回序列化
}

上下文节点

上下文节点：我们通过xmlDom这个对象实例调用方法，而xmlDom这个对象实例其实就是一个上下文节点，这个节点指针指向的是根，也就是root元素之前。那么如果我们把这个指针指向user元素之前，那么结果就会有所变化。

通过xmlDom，并且使用root/user的路径

//通过xmlDom，并且使用root/user的路径

var user = xmlDom.selectSingleNode(‘root/user‘);

alert(user.tagName);                                                //user

通过xmlDom.documentElement，并且使用user路径，省去了root

//通过xmlDom.documentElement，并且使用user路径，省去了root

var user = xmlDom.documentElement.selectSingleNode(‘user‘);

alert(user.tagName);                                                //user

通过xmlDom，并且使用user路径，省去了root

//通过xmlDom，并且使用user路径，省去了root

var user = xmlDom.selectSingleNode(‘user‘);

alert(user.tagName);                                                //找不到了，出错 

PS：xmlDom和xmlDom.documentElement都是上下文节点，主要就是定位当前路径查找的指针，而xmlDom对象实例的指针就是在最根上。

XPath常用语法

通过user[n]来获取第n+1条节点，PS：XPath其实是按1为起始值的，也就是通过索引位置来获取对应的标签

//通过user[n]来获取第n+1条节点，PS：XPath其实是按1为起始值的
var user = xmlDom.selectSingleNode(‘root/user[1]‘);
alert(user.xml);

通过text()获取节点内的值

//通过text()获取节点内的值
var user = xmlDom.selectSingleNode(‘root/user/text()‘);
alert(user.xml);
alert(user.nodeValue);

通过//user 表示在整个xml获取到user节点，不关心任何层次，通过双斜杠获取节点

//通过//user表示在整个xml获取到user节点，不关心任何层次
var user = xmlDom.selectSingleNode(‘//user‘);
alert(user.xml);

通过root//user表示在root包含的层次下获取到user节点，在root内不关心任何层次，通过指定节点下双斜杠获取节点

//通过root//user表示在root包含的层次下获取到user节点，在root内不关心任何层次
var user = xmlDom.selectSingleNode(‘root//user‘);
alert(user.tagName);

通过root/user[@id=6]表示获取user中id=6的节点，通过id获取指定节点

//通过root/user[@id=6]表示获取user中id=6的节点
var user = xmlDom.selectSingleNode(‘root/user[@id=6]‘);
alert(user.xml);

PS：更多的XPath语法，可以参考XPath手册或者XML DOM手册进行参考，这里只提供了最常用的语法。

selectNodes()方法，查找xml节点，返回相同名称的节点集合，有参参数是要查找的节点路径，此方法只支持IE并且是IE9以下
使用方式
XML DOM对象.selectNodes(‘要查找的节点路径‘)

var xml = ‘<root><user id="5">Lee</user><user id="6">Koko</user></root>‘;  //定义xml字符串
var xmldom = getXMLDOM(xml); //创建XML DOM对象,接收xml字符串
//通过XML DOM对象查找xml标签节点
var chzhao = xmldom.selectNodes(‘root/user‘); //selectNodes()方法，查找xml节点，返回相同名称的节点集合，有参参数是要查找的节点路径，此方法只支持IE并且是IE9以下
alert(chzhao.length); //查看节点集合长度
alert(serializeXML(chzhao[0])); //通过索引，执行序列化函数，序列化查找到的节点
alert(chzhao[0].tagName); //通过索引打印查找到的元素标签名称
alert(chzhao[0].firstChild.nodeValue); //通过索引打印查找到的元素文本内容

//首先，我们需要跨浏览器获取XML DOM
function getXMLDOM(xmlStr) {  //自定义跨浏览器创建xml DOM对象，接收一个参数xml字符串
    var xmlDom = null;  //初始化一个对象

    if (typeof window.DOMParser != ‘undefined‘) {        //判断DOMParser类型不等于undefined说明支持
        //创建DOMParser对象，并且创建xml DOM对象
        xmlDom = (new DOMParser()).parseFromString(xmlStr, ‘text/xml‘);
        //获取错误信息的parsererror标签
        var errors = xmlDom.getElementsByTagName(‘parsererror‘);
        //判断错误信息标签返回集合长度大于0，说明xml有错误
        if (errors.length > 0) {
            //创建一个错误对象，获取到第一个错误标签，并且获取到他的文本内容
            throw new Error(‘XML解析错误：‘ + errors[0].firstChild.nodeValue);
        }
    //如果不支持DOMParser类型，尝试IE的方法
    } else if (typeof window.ActiveXObject != ‘undefined‘) {    //判断ActiveXObject类型不等于undefined说明支持
        var version = [  //创建一个数组，元素分别为3个xml版本
            ‘MSXML2.DOMDocument.6.0‘,
            ‘MSXML2.DOMDocument.3.0‘,
            ‘MSXML2.DOMDocument‘
        ];
        for (var i = 0; i < version.length; i++) {  //根据数组的长度循环次数
            try {
                //尝试着执行每次循环到的xml版本，创建xml对象
                xmlDom = new ActiveXObject(version[i]);
            } catch (e) {  //如果出错跳过执行第二次循环
                //跳过
            }
        }
        xmlDom.loadXML(xmlStr);  //载入xml字符串
        if (xmlDom.parseError != 0) {  //判断载入xml错误返回代码，如果不等于0说明xml有错
            //创建一个错误对象，返回错误的解释信息
            throw new Error(‘XML解析错误：‘ + xmlDom.parseError.reason);
        }
    } else {  //如果 上面两种方式都不支持
        //创建一个错误对象，抛出您所使用的系统或浏览器不支持XML DOM！
        throw new Error(‘您所使用的系统或浏览器不支持XML DOM！‘);
    }

    return xmlDom;  //最后返回创建的xmlDOM对象
}

//其次，我们还必须跨浏览器序列化XML
function serializeXML(xmlDom) {  //序列化xml函数，接收xmlDOM对象对象
    var xml = ‘‘;  //初始化一个变量等于空字符串
    if (typeof XMLSerializer != ‘undefined‘) {  //判断XMLSerializer类型，不等于undefined，说明支持序列化
        //给xml重新赋值，创建XMLSerializer对象，并且使用serializeToString方法序列化
        xml = (new XMLSerializer()).serializeToString(xmlDom);
    //如果不支持XMLSerializer类型
    } else if (typeof xmlDom.xml != ‘undefined‘) { //判断IE方式xmlDOM对象下的xml属性是否等于undefined，不等于说明支持
        //给xml重新赋值，序列化xml
        xml = xmlDom.xml;
    } else { //如果上面两种都不支持
        //创建一个错误对象，抛出无法解析XML！错误信息
        throw new Error(‘无法解析XML！‘);
    }
    return xml; //最后返回序列化
}
时间： 2024-08-02 02:36:46

第一百二十六节，JavaScript，XPath操作xml节点的相关文章

第一百二十三节，JavaScript错误处理与调试

JavaScript错误处理与调试 学习要点: 1.浏览器错误报告 2.错误处理 3.错误事件 4.错误处理策略 5.调试技术 6.调试工具 JavaScript在错误处理调试上一直是它的软肋,如果脚本出错,给出的提示经常也让人摸不着头脑.ECMAScript第3版为了解决这个问题引入了try...catch和throw语句以及一些错误类型,让开发人员更加适时的处理错误. 一．浏览器错误报告 随着浏览器的不断升级,JavaScript代码的调试能力也逐渐变强.IE.Firefox.Safari.

第一百八十六节，jQuery，验证表单插件，Ajax 表单插件，验证和提交表单

jQuery,验证表单插件,Ajax 表单插件,验证和提交表单 HTML <form id="reg" method="post" action="yzh.php" title="会员注册"> <ol class="reg_error"></ol> <p> <label for="user">帐号:</label>

第一百七十六节，jQuery，插件

jQuery,插件 学习要点: 1.插件概述 2.验证插件 3.自动完成插件 4.自定义插件 插件(Plugin)也成为 jQuery 扩展(Extension),是一种遵循一定规范的应用程序接口编 写出来的程序.目前 jQuery 插件已超过几千种,由来自世界各地的开发者共同编写.验证 和完善.而对于 jQuery 开发者而言,直接使用这些插件将快速稳定架构系统,节约项目成 本. 一．插件概述 插件是以 jQuery 的核心代码为基础,编写出复合一定规范的应用程序.也就是说,插 件也是 jQu

一起talk C栗子吧（第一百二十六回：C语言实例--static关键字）

各位看官们,大家好,上一回中咱们说的内置宏的例子,这一回咱们说的例子是:static关键字.闲话休提,言归正转.让我们一起talk C栗子吧! 看官们,C语言提供了static关键字,它经常出现在变量或者函数的最前面,为什么要加上它呢?它主要有什么作用呢?今天我们一起来了解static关键字. 在介绍之前,我们先做一些铺垫.主要是介绍一下变量或者函数的生命周期和作用域. 变量和函数的生命周期 所谓的生命周期就是指变量或者函数在程序中可以被使用的时间,它是一段时间,可能是一分钟或者一小时等.生命周

第三百八十六节，Django+Xadmin打造上线标准的在线教育平台—HTML母版继承

第三百八十六节,Django+Xadmin打造上线标准的在线教育平台-HTML母版继承 母板-子板-母板继承 母板继承就是访问的页面继承一个母板,将访问页面的内容引入到母板里指定的地方,组合成一个新页面返回给浏览器 一般母板里都是写的一个网页里不变的地方,也就是通用的地方,被继承页(访问页)都是每个页面不同的地方,也就是将页面不同的地方引入到母板组合成一个新页面返回浏览器 母板里一般都是网页的.头部.底部.头部底部css.头部底部js 被继承页(访问页)里一般都是新内容,新内容的css和js 母

第三百七十六节，Django+Xadmin打造上线标准的在线教育平台—创建用户操作app，在models.py文件生成5张表，用户咨询表、课程评论表、用户收藏表、用户消息表、用户学习表

第三百七十六节,Django+Xadmin打造上线标准的在线教育平台-创建用户操作app,在models.py文件生成5张表,用户咨询表.课程评论表.用户收藏表.用户消息表.用户学习表 创建名称为app_operation的用户操作APP,写数据库操作文件models.py models.py文件 #!/usr/bin/env python # -*- coding:utf-8 -*- from __future__ import unicode_literals from datetime i

第三百五十六节，Python分布式爬虫打造搜索引擎Scrapy精讲—scrapy分布式爬虫要点

第三百五十六节,Python分布式爬虫打造搜索引擎Scrapy精讲-scrapy分布式爬虫要点 1.分布式爬虫原理 2.分布式爬虫优点 3.分布式爬虫需要解决的问题

第三百二十四节，web爬虫，scrapy模块介绍与使用

第三百二十四节,web爬虫,scrapy模块介绍与使用 Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架. 其可以应用在数据挖掘,信息处理或存储历史数据等一系列的程序中.其最初是为了页面抓取 (更确切来说, 网络抓取 )所设计的, 也可以应用在获取API所返回的数据(例如 Amazon Associates Web Services ) 或者通用的网络爬虫.Scrapy用途广泛,可以用于数据挖掘.监测和自动化测试. Scrapy 使用了 Twisted异步网络库来处理网络通讯.

第一百二十节，JavaScript事件对象

JavaScript事件对象 学习要点: 1.事件对象 2.鼠标事件 3.键盘事件 4.W3C与IE JavaScript事件的一个重要方面是它们拥有一些相对一致的特点,可以给你的开发提供更多的强大功能.最方便和强大的就是事件对象,他们可以帮你处理鼠标事件和键盘敲击方面的情况,此外还可以修改一般事件的捕获/冒泡流的函数. 一．事件对象 事件处理函数的一个标准特性是,以某些方式访问的事件对象包含有关于当前事件的上下文信息. 事件处理三部分组成:对象.事件处理函数=函数.例如:单击文档任意处. //