《javascript高级程序设计》笔记(十八)

javascript与XML

(一)浏览器对XML DOM的支持

DOM2级是第一个提到动态创建XML DOM概念的规范。DOM3级进一步增强XML DOM。

1.DOM2级核心

document.implementation.createDocument(namespaceUri, root, doctype);

通过javascript处理XML时通常只使用参数root,因为这个参数指定的是XML DOM文档元素的标签名。

//创建新的、文档元素为<root>的XML文档
        var xmldom = document.implementation.createDocument("", "root", null);

        alert(xmldom.documentElement.tagName);  //"root"

        var child = xmldom.createElement("child");
        xmldom.documentElement.appendChild(child);

给命名空间传入空字符意味着未指定命名空间,给文档类型传入null意味着不指定文档类型。变量xmldom保存着DOM2级Document类型的实例。

这个例子显示了文档元素的标签名,又创建并给文档元素添加了一个新的子元素。

实际上往往是将某个DOM文件解析为DOM结构,或反之。

2.DOMParse类型

将XML解析为DOM文档

在解析XML之前,先要创建DOMParter实例,再调用parseFormString()方法。这个方法接收两个参数:要解析的XML字符串和内容类型(text/xml),返回值是Document的实例。

        var xmldom = document.implementation.createDocument("", "root", null);

        alert(xmldom.documentElement.tagName);  //"root"

        var child = xmldom.createElement("child");
        xmldom.documentElement.appendChild(child);

只能解析格式良好的XML,不能把HTML解析为HTML文档。

IE9+ Firefox  Safari  Chrome  Opera

3.XMLSerializer类型

将DOM文档序列化为XML字符串

先创建XMLSerializer的实例,再将文档传入其serializeToString()方法

        var serializer = new XMLSerializer();
        var xml = serializer.serializeToString(xmldom);
        alert(xml);

IE9+ Firefox  Safari  Chrome  Opera

4.IE8及之前版本的XML

使用ActiveXObject构造函数并为其传入一个表示XML文档版本的字符串,最好用MSXML2.DOMDocument .6.0。

要解析XML字符串,先要创建一个DOM文档,然后调用loadXML()方法。

        var xmldom = createDocument();
        xmldom.loadXML("<root><child/></root>");

        alert(xmldom.documentElement.tagName);  //"root"
        alert(xmldom.documentElement.firstChild.tagName); //"child"

        var anotherChild = xmldom.createElement("child");
        xmldom.documentElement.appendChild(anotherChild);

①序列化XML

IE每个DOM节点都有xml属性,保存着表示该节点的XML字符串

②加载XML文件

async属性:指定加载文档的方式,true表示异步,false表示同步,默认为true。

确定加载XML文档的方式后调用load()方法,接收一个参数即要加载的XML文件的URL。

        var xmldom = createDocument();
        xmldom.async = true;
        xmldom.load("example.xml");

异步加载XML文件需要为XML DOM文档的onreadystatechage事件指定事件处理程序,4状态表示XML文件完全加载完毕,而且全部解析为DOM文档。通过XML文件的readyState属性可以取得其状态。为onreadyStatechange事件指定事件处理程序的语句,必须放在调用load()方法的语句之前。在事件处理程序,必须使用XML文档变量的名称,不能用this对象。

5.跨浏览器处理XML

        function parseXml(xml){
            var xmldom = null;
            //检测DOMParser
            if (typeof DOMParser != "undefined"){
                xmldom = (new DOMParser()).parseFromString(xml, "text/xml");
                //检测返回的文档,
                var errors = xmldom.getElementsByTagName("parsererror");
                if (errors.length){
                    throw new Error("XML parsing error:" + errors[0].textContent);
                }
            } else if (typeof ActiveXObject != "undefined"){
                //创建适当版本的XML文档
                xmldom = createDocument();
                xmldom.loadXML(xml);
                if (xmldom.parseError != 0){
                    throw new Error("XML parsing error: " + xmldom.parseError.reason);
                }
            } else {
                throw new Error("No XML parser available.");
            }

            return xmldom;
        }

(二)浏览器对XPath的支持

是用来在DOM文档中查找节点的一种手段

1.DOM3级XPath

XPathEvaluator、XPathResult是最重要的类型,XPathEvaluator用于在特定的上下文对XPath表达式求值。

evaluate:在给定的上下文,基于特定的命名空间信息来对XPath求值。接收5个参数:Xpath表达式、上下文节点、命名空间求解器、返回结果的类型和保存结果的XPathResult对象(通常是null)。XPathResult.ORDERED_NODE_ITERATOR_TYPE是最常用的结果类型,表示返回匹配的节点集合,次序与文档一直。

如果指定的是快照结果类型,必须使用snapshotItem()方法和snapshotLength属性。

 var result = xmldom.evaluate("employee/name", xmldom.documentElement, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);
            while (element) {
                message += serializer.serializeToString(element) + "\n";
                count++;
                element = result.iterateNext()
            }

①单节点结果

指定XPathResult.FIRST_ORDERED_NODE_TYPE会返回第一个匹配的节点,可以通过结果的singleNodeValue属性访问该节点

②简单类型结果

通过XPathResult的布尔值、数值和字符串类型,可以取得简单的非节点数据类型,分别通过booleanValue、numberValue和stringValue返回一个值。

对于布尔值类型,如果至少一个节点与XPath的表达式匹配,则返回true。

            var result = xmldom.evaluate("employee/name", xmldom.documentElement, null, XPathResult.BOOLEAN_TYPE, null);
            alert(result.booleanValue);

对于数值类型,必须在XPath表达式参数的位置上指定一个能返回数值的XPath函数,如计算给定模式匹配的所有节点数量的count()。

            var result = xmldom.evaluate("count(employee/name)", xmldom.documentElement, null, XPathResult.NUMBER_TYPE, null);
            alert(result.numberValue);

③默认类型结果

使用XPathResult.ANY_TYPE可以自动确定返回结果的类型,要确定返回的是什么结果类型可以检测结果的resultType属性。

  

④命名空间支持

createNSResolver()来创建XPathNSResolver对象,这个方法接收一个参数,即文档中包含命名空间定义的节点。将nsresolver对象传入evaluate()后可以确保它能理解XPath表达式使用的wrox前缀。

            var xmldom = (new DOMParser()).parseFromString("<?xml version=\"1.0\</wrox:books>", "text/xml");
            var nsresolver = xmldom.createNSResolver(xmldom.documentElement);
            var result = xmldom.evaluate("wrox:book/wrox:author",
                                         xmldom.documentElement, nsresolver,
                                         XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);

或者定义一个函数,让它接收命名空间前缀,返回关联的URI。

2.IE中的XPath

IE9及之前版本使用XPath必须使用基于ActiveX的实现。

方法:selectSingeNode() :接收一个XPath模式,在找到匹配节点时返回第一个匹配的节点。

seclectNodes():返回与匹配的所有节点的NodeList。

IE对命名空间的支持

必须知道使用的命名空间,并按照格式创建字符串  "xmlns:prefix1=‘uri1‘  xmlns:prefix2=‘uri2‘  xmlns:prefix3=‘uri3‘"

必须将这个字符串传入setProperty(),接收两个参数,要设置的属性名和属性值。

3.跨浏览器使用XPath

(三)浏览器对XSLT的支持

XSLT是与XML相关的技术,利用XPath将文档从一种表现形式转换成另一种。

1.IE中的XSLT

①简单的XSLT转换

将XSLT和XML分别加到一个DOM文档,再使用transformNode()方法,接收一个参数:包含XSLT样式表的文档。调用transformNode()方法返回一个包含转回信息的字符串。

②复杂的XSLT转换

使用XSL模板和XSL处理器。第一部把XSLT样式表加载到一个线程安全的XML文档,可以通过使用MSXML2.FreeThreadedDOMDocument。然后将转换的节点指定给input属性,并调用transform()。

2.XSLTProcessor类型

加载两个DOM文档,分别基于XML和XSLT,然后创建新XSLTProcessor对象,并使用importStylesheet()方法为其指定一个XSLT。

如果要返回完整的DOM文档调用transformToDocument(),只要传入XML DOM,就可以将结果作为完全不同的DOM文档使用。调用transformTOFragment()得到一个文档片段对象。

transformToFragmentj()接收两个参数,要换货的XML DOM和应该拥有结果片段的文档,要将片段插入到页面,只要将ducoment作为第二个参数。

处理器创建一个由ducument对象拥有的片段,可以将返回的片段添加到页面已有的<div>元素。

            var fragment = processor.transformToFragment(xmldom, document);
            var div = document.getElementById("divResult");

            div.appendChild(fragment);

①使用参数

XSLTProcessor支持使用setParameter()设置XSLT的参数,这个方法接收三个参数:命名空间URI。参数的内部名称和要设置的值。必须在调用transformToDocument或transformToFragment()之前调用这个方法。

getParameter()和removeParameter()方法分别用于取得和移除当前参数的值。

②重置处理器

要调用reset方法,从处理器移除所有参数和样式表。

3.跨浏览器使用XSLT

跨浏览器兼容性最好的XSLT转换技术只能返回字符串,在IE只需在上下文节点上调用 transformNode(),其他浏览器要序列化transformToDocument()操作的结果。

使用IE的transformNode()可以确保不必使用线程安全的DOM文档进行转换。

时间: 2024-10-06 21:51:12

《javascript高级程序设计》笔记(十八)的相关文章

javascript高级程序设计 第十四章--表单脚本

javascript高级程序设计 第十四章--表单脚本 在HTML中表单由<form>元素表示,在js中表单对应的是HTMLFormElement类型,这个类型也有很多属性和方法:取得表单元素的引用还是为它添加id特性,用DOM操作来获取表单元素:提交表单:把<input>或<button>元素的type特性设置为"submit",图像按钮把<input>元素的type特性设置为"image",也可以调用submit(

javascript高级程序设计——笔记

javascript高级程序设计--笔记 基本概念 基本数据类型包括Undefined/Null/Boolean/Number和String 无须指定函数的返回值,实际上,未指定返回值的函数返回的是一个特殊的undefined值 变量.作用域和内存问题 基本类型值在内存中占据固定大小的空间,因此保存在栈内存中 引用类型的值是对象,保存在堆内存中 确定一个值是哪种基本类型用typeof,确定一个值是哪种引用用instanceof 所有变量都存在于一个执行环境当中,这个执行环境决定了变量的生命周期,

javascript高级程序设计笔记1

最近在看javascript高级程序设计,看之前觉得自己的js学得还不错,然后,看了没几页就觉得自己好像没有学过一样,这主要写写我以前不完全了解的一些知识. 首先是关于基本数据类型的,从Number开始,以前经常用parseInt来转换数值,看过书才知道,这个函数的本意是专门用于把字符串转换成数值,而且以前也不知道它具体是怎么一个转换规则.先来看看Number()函数的转换规则: 1.如果是Boolean 值,true 和false 将分别被转换为1 和0.2.如果是数字值,只是简单的传入和返回

javascript高级程序设计笔记(第5章 引用类型)

1.Object类型 两种方式定义:对象字面量.new 两种方式访问:括号.点 2.Array类型 2.1  定义方式:new Array.数组字面量 2.2  lenght属性:可以利用它方便的想数组末尾添加元素 2.3  检测数组 instanceof isArray()方法  2.4  toString().soLocaleString().valueOf().join()方法 2.5.栈方法   push()方法:逐个添加到数组末尾,并返回修改后的数组长度 pop()方法:返回数组的最后

【javascript高级程序设计笔记】第六章OOP

忙了一段时间,加了将近一个月的班. 书也落下没看,上次看到第七章(这部分笔记大概还是9月份的吧),偶尔看到很吃力.看的速度慢下来. 学习就是一个慢慢积累慢慢沉淀的过程.看书时没有明显觉得提升.但在看完书后近段时间工作中写代码,明显感觉效率还是有提升,基础知识牢固了. 这本书是第二次看,这次很认真的遍读和做笔记,笔记的文字均是自己边看边敲的,这样才更好的真正的吸收到一部分吧! 这些天在看web响应式设计:HTML5和CSS3实战 第6章 面向对像的程序设计 6.1.1属性类型 ECMAScript

【javascript高级程序设计笔记】第一章与第三章

第1章 javascript简介 1.2Javascript实现 一个完整的javascript实现由下列三个不同的部分组成 核心(ECMAScript) 提供核心语言功能 文档对象模型(DOM) 提供访问和操作网页内容的方法和接口 浏览器对象模型(BOM)提供与浏览器交互的方法和接口 ECMAScript 它规定了这门语言的下列组成部分: 语法  类型  语句  关键字 保留字 操作符 对象 ECMA-262第5版,发布于2009年. 文档对象模型(DOM) Document Object M

JavaScript高级程序设计笔记之面向对象

说起面向对象,大部分程序员首先会想到 类 .通过类可以创建许多具有共同属性以及方法的实例或者说对象.但是JavaScript并没有类的概念,而且在JavaScript中几乎一切皆对象,问题来了,JavaScript中如何面向对象? JavaScript中将对象定义为:一组无序的 键值对的集合,属性以及方法的名称就是键,键的值可以是任何类型(字符串,数字,函数--) 在JavaScript中,所有对象继承自Object,所有对象继承自Object,所有对象继承自Object! 创建 1  简单创建

javascript高级程序设计笔记(第7章 函数表达式)

7.5 小结 在JavaScript 编程中,函数表达式是一种非常有用的技术.使用函数表达式可以无须对函数命名,从而实现动态编程.匿名函数,也称为拉姆达函数,是一种使用JavaScript 函数的强大方式.以下总结了函数表达式的特点.? 函数表达式不同于函数声明.函数声明要求有名字,但函数表达式不需要.没有名字的函数表达式也叫做匿名函数.? 在无法确定如何引用函数的情况下,递归函数就会变得比较复杂:? 递归函数应该始终使用arguments.callee 来递归地调用自身,不要使用函数名——函数

JavaScript高级程序设计笔记

1.1 JavaScript简史 <script> async/defer可以控制js加载顺序 把js文件放在页面底部,加快页面打开速度 3 基本概念 语法 数据类型 流控制语句 理解函数 3.4 数据类型 ECMAScript中定义了六种数据类型:Underfined.Null.Boolean.Number.String.Object 使用typeof关键字来检测类型 //Boolean()转换 var bool1 = Boolean(true); var bool2 = Boolean(&

javascript高级程序设计--笔记01

概述 JavaScript的实现包含三个部分: 1  核心(ECMAScript)   提供核心语言功能 2  文档对象模型(DOM)  一套提供了访问以及操作网页内容的API 3  浏览器对象模型(BOM)  一套提供了与浏览器交互的API ECMAScript仅仅定义了这门语言的基础,如定义了:语法.类型.语句.关键字等,实际上这门语言本身不包含输入输出定义. 而现实中,ECMAScript大多借用了某些宿主环境(如web浏览器,Node,Adobe Flash)来实现丰富的功能,这些宿主环