21天学通javascript

联系方式：北京源智天下科技有限公司第十五讲：JavaScript与XML技术1-2北京源智天下科技有限公司联系方式：课程内容安排•XML简介•使用DOM•HTMLDOM•综合练习1-3北京源智天下科技有限公司联系方式：简介•XML应用背景–XML技术已经为成为中间数据的标准格式，使用XML描述的数据可以在任何系统间进行数据交换。近年来XML已经广泛的使用在了应用开发的各个方面，当中也包含Internet。在Web开发中，XML用于描述各种各样的数据用以交换，比如最近流行的Ajax技术就使用XML来描述在浏览器端到服务器端的数据。•XML是ExtensibleMarkupLanguage的缩写，它是一种类似于HTML的标记语言，用来描述数据的层次结构及存储数据。1-4北京源智天下科技有限公司联系方式：简介•XML是一种描述数据结构的语言，与之相应的是XML语言解析器。–如果没有解析器它所描述的数据就无法理解，同时也失去了意义。•程序接口对程序员来说统称为API，最先出现针对XML的API是SAX（SimpleAPIforXML），它是一套程序包。–SAX提供了一套基于事件的XML解析的API。SAX解析器从XML文件的开头出发，每当遇到节点标签、文本或者其他的XML语法时，就会激发一个事件。事件处理程序由应用开发人员编写，因此可以在事件处理程序中决定如何处理XML文件当前节点的数据。1-5北京源智天下科技有限公司联系方式：简介•W3C的DOM规范制定了一系列标准用于描述结构化、层次化的数据，例如HTML和XML。使用DOM接口处理XML文件是当前WEB客户端开发常用的方法，大多数浏览器都实现W3C制定的DOM接口。•节点的层次–DOM以树的形式组织文档中的数据，树的结构也就是由HTML或XML文档的元素节点组成的结构。遍历一个文档中所有结点就是遍历DOM树的操作，第一个节点使用一个Node对象来表示，该对象提供了操作节点的接口–document是最顶层的节点，所有的其他节点都是附属于它的。1-6北京源智天下科技有限公司联系方式：简介•XML文档节点层次如下XML代码片段所示01?xmlversion=1.0encoding=gb2312!--XML文件开始--02products!--产品集合--03product!--产品--04nameIBMThinkpadR61i7732CJC/name!--名字--05price5300/price!--价格--06/product!--产品结束--07product!--产品--08nameCGX/name!--名字--09price100/price!--价格--10/product!--产品结束--11/products!--产品结束--12customers!--客户集合--13customer!--客户--14namePeter/name!--名字--15phone123456/phone!--电话--16/customer17customer!--客户--18nameZognan/name!--名字--19phone456789/phone!--电话--20/customer21/customers!--客户集合结束--1-7北京源智天下科技有限公司联系方式：北京源智天下科技有限公司联系方式：简介•特定语言的文档模型–DOM模型是以XML为核心，所有遵循DOM规范的文档都可以使用DOM接口来处理。但已经得到广泛应用的HTML却没有完全遵循DOM规范，因此为了能支持HTML，W3C提出针对HTML的DOM规范。1-9北京源智天下科技有限公司联系方式：•DOM接供操作遵循DOM规范文档的能力，使用DOM来操作页面中的元素。–诸如，更改元素显示的内容、添加删除节点、遍历统计节点、过滤特定内容等等。•访问相关的节点–JavaScript在Web客户端的编程工作基本上都围绕DOM展开，DOM的常用操作就是创建、访问、修改各个元素节点。–childNodes：每一个节点的所有下一级子节点组成一个集合，该集合作为该节点的childNodes属性。1-10北京源智天下科技有限公司联系方式：•下面是Node对象的常用方法和属性:–firstChild，表示头一个子节点。–lastChild，表示最后一个子节点。–hasChildNodes()，判断是否拥有子节点。–childNodes，子节点集合。–parentNode，其父节点的引用。•演示：范例15-1，检测当前HTML文档BODY标签下的所有节点，并将节点名输出。•处理节点属性–DOM的节点对象都拥有一些从Node对象继承而来的属性，也可以拥有自己独有的属性。属性可以用来存储一些与节点相关的数据，读取一个属性通常调用节点元素的getAttribute方法，设置某个属性的值通常调用节点元素的setAttribute方法。1-11北京源智天下科技有限公司联系方式：•演示：范例15-3，给当前WEB页的BODY标签添加自定义属性“Author”并设值为“Zognan”，表示创建该WEB页的作者。•访问指定节点：DOM接口提供了更快更方便的方法访问一个指定的节点，例如通过指定节点标签名、节点名称或节点ID来获得目标节点的引用。–getElementsByTagName，该方法返回一个与指定标签名吻合的节点对象的引用，如果传入的标签名为“*”，则返回文档中所有的节点元素。–getElementsByName，该方法返回与指定name属性相吻合的元素集合。–getElementById，该方法返回与指定ID相同元素节点。1-12北京源智天下科技有限公司联系方式：•创建新节点：DOM接口对节点的操作不仅仅只有访问，还可以为一个节点创建任意数目的子节点。–createTextNode，创建文本节点。–createDocumentFragment，创建文档碎片。–createElement，通过指定标签名创建节点。•修改节点：在文档对象（DOM）中，可以动态的插入、删除或替换某一个节点。节点对象（Node）提供实现这些操作的方法，这方法都通过节点对象（Node）来调用。–removeChild，删除一个指定的子节点。–insertBefore，在指定的子节点前插入一个子节点。–replaceChild，用一个节点替换一个指定的节点。–appendChild，将一个节点添加到子节点集合的尾部。1-13北京源智天下科技有限公司联系方式：特性•HTMLDOM特性–JavaScript是动态语言，属性、方法、事件在其中称为特性。属性用于描述对象的状态，但在使用上却和事件一样，通过给事件赋予一个函数的地址即可完成绑定的任务，操作方式和给属性赋值一样。在标准DOM中，通常使用getAttribute和setAttribute操作的特性，但特定于HTML的DOM为能更方便的操作对象的特性，将操作方式统一起来。1-14北京源智天下科技有限公司联系方式：综合练习•演示：综合练习1•回顾本章的内容1-15北京源智天下科技有限公司联系方式：联系方式：北京源智天下科技有限公司第十六讲：正则表达式1-17北京源智天下科技有限公司联系方式：课程内容安排•正则表达式基础•简单模式•复杂模式•常用模式1-18北京源智天下科技有限公司联系方式：正则表达式基础•为什么使用正则表达式–在这之前曾有过字符验证例子，其中验证字符的代码非常繁琐冗长。有了正则表达式，验证程序的代码变得简洁而更强大，代码运行的速度更快。为了判断某个字符串是否符合某种格式，使用正规表达的最为合适。通常，人们在表单数据发送到服务器之前，都需要进行数据合法性验证。例如，客户所填写的电子邮件地址格式是否正确等。使用正则表达式可以使程序代码简单高效。1-19北京源智天下科技有限公司联系方式：正则表达式基础•使用RegExp对象–RegExp是JavaScript提供的一个对象，用来完成有关正则表达式的操作和功能，每一条正则表达式模式对应一个RegExp实例。JavaScript使用RegExp对象封装与正则表达式相关的功能和操作，每一个该对象的实例对应着一条正则表达式。和其他对象一样，在使用之前必须取得其引用或新建一个对象实例。创建一个RegExp实例语法如下：varregObj=newRegExp(“pattern”[,”flags”]);参数说明：pattern：必选项，正则表达式的字符串。flags：可选项，是一些标志组合。1-20北京源智天下科技有限公司联系方式：正则表达式基础–在标志组合中，“g”表示全局标志。设定时将搜索整个字符串，以找匹配的内容，每一次新的探索都从RegExp对象的lastIndex标记的字符起，否则只搜索到第一个匹配的内容。“i”表示忽略大小写标志，若设置该项，则在搜索匹配项时忽略大小写，否则将区别大小写。以上所述是创建正则表达式对象的方式之一，另一种创建方式如下：varregObj=/pattern/[flags];–参数的意义和第一种方式一样，但这种方式不能用引号将pattern和flags括起来。正则表达式的使用非常简单，只要用一个test方法就行了，如下所示。regObj.test(string);1-21北京源智天下科技有限公司联系方式：正则表达式基础–regObj表示正则表达式对象，是一个RegExp对象实例。string为源字符串，即将在其中进行匹配操作的字符串。test方法返回一个布尔值，表明是否已经在源串中找到了正则表达式所定义的模式。–下面举一个例子来说明。01scriptlanguage=javascript02varreg=/.o./g;//寻找字符o前后接任意字符组成的有三个字符的字符串03varstr=Howareyou?//源串04varresult=newArray();//用于接收结果05while(reg.exec(str)!=null)//执行匹配操作，如果找到匹配则继续找下一项06{07result.push(RegExp.lastMatch);//添加结果08}09alert(result);//输出找到的匹配项10/script1-22北京源智天下科技有限公司联系方式：简单模式•元字符–元字符是正则表达式最为简单的情况。它指的是与字符序列相匹配，例如范例16-1中的正则表达式filter。其简单的查找语句said中是否存在“一枪爆头”这个语句，这个语句中没有其他有特别含义的字符。01scriptlanguage=javascript02varfilter=/一枪爆头/g;//将受限制的词句组成正则表达式03varsaid=他被人一枪爆头了;//将接受检查的语句04if(filter.test(said))//如果被检查语句中存在受限词句05{06alert(该语句中有限制级词语，系统已经过