xml,可扩展标记语言. 想必大家都知道html了. 现在我们拿xml和html做个标记, xml的优势就是:xml标记对开发人员有一定的提示作用, 看起来更加直观.
菜鸟教程上这样说,xml被设计用来传输和存储数据, html被设计是用来显示数据的.
1.什么是xml呢?
XML 指可扩展标记语言(EXtensible Markup Language)。
XML 是一种很像HTML的标记语言。
XML 的设计宗旨是传输数据,而不是显示数据。
XML 标签没有被预定义。您需要自行定义标签。
XML 被设计为具有自我描述性。
XML 是 W3C 的推荐标准。
2.xml, html之间的区别
xml被设计用来传输,存储数据. html被设计用来显示数据.
xml中的标签都是自定义的, 而html标签都是实现定义好的.
3.xml分离html中的数据
试想,html文档中包含了一些数据.我们要向改变这些数据, 就意味着要不断地修改html文档,可想而知,任务量不是一般大.
这时候,我们用xml把数据从html文档中剥离出来. 然后JS负责改变数据, html/css专注于格式/布局. 这样做是不是条理更清晰,任务量也相应地少了一些.
4.xml树结构
xml文档形成了一种树结构, 它从"根部"开始, 然后扩展到"枝叶"
实例:
<bookstore>
<bookcategory="COOKING">
<titlelang="en">Everyday Italian</title>
<author>Giada De Laurentiis</author>
<year>2005</year>
<price>30.00</price>
</book>
<bookcategory="CHILDREN">
<titlelang="en">Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
<bookcategory="WEB">
<titlelang="en">Learning XML</title>
<author>Erik T. Ray</author>
<year>2003</year>
<price>39.95</price>
</book>
</bookstore>
解析:<bookstore></bookstore>, 根节点.
<book></book> <title></title> <author></author> <year></year> <price></price> 子节点
每个节点都可以有自己的属性,内容.
5.xml语法规则
首先,整个实例分析一下:
<?xmlversion="1.0"encoding="UTF-8"?>
<note>
<to>Tove</to>
<from>Jani</from>
<heading color="red"><i>Reminder</i></heading>
<body>Don't forget me this weekend!</body>
</note>
细心的朋友应该都看到了, xml文档中有这么一句:<?xml version="1.0" encoding="UTF-8"> 它就是个xml声明部分(包括版本,编码声明).
<note>,根节点. 这里提一下:所有的xml文档都要有一个根节点作为其它元素的父元素.
xml文档中的自定义标签必须都要有起始标签,闭合标签.然后小伙伴们就要问了,为什么xml声明部分没有闭合标签呢?? 这里要明确一点:xml声明部分是不属于xml文档的...
xml标签对字母的大小写是敏感的. 比如:<heading></heading>,<Heading></Heading>是两个完全不同的标签...
xml元素必须正确嵌套.比如:<heading><i>...</i></heading>
xml元素的属性值都要加上引号, 比如:<heading color="red"><i>...</i></heading>
6.xml实体引用
xml,html中都有一些字符实体携带特殊含义,即不能直接使用. 那我们怎么做呢? 用实体引用输出这些特殊字符.
xml中常用的实体引用:
字符 | 转义字符 | 描述 |
& | & | 和 |
< | < | 小于号 |
> | > | 大于号 |
" | " | 双引号 |
' | ' | 单引号 |
html中常用的实体引用:
字符 | 转义字符 | 描述 |
& | & | 和 |
< | < | 小于号 |
> | > | 大于号 |
" | " | 双引号 |
| | 空格 |
© | © | 版权符 |
® | ® | 注册符 |
xml注释和html中的一样, 这里就不说了..
我们都知道html文档中的空格,制表符,换行符都会bei被合并乘一个空格. 而xml中的空格却不会被裁剪.
XML 以 LF 存储换行。 这点我没搞懂~~
8.xml元素
1)什么是xml元素??
xml元素是指从起始标签到结束标签的部分(注意:这里包括标签部分).
2)xml元素中都包含了哪些东西?
属性, 其它元素, 文本内容
3)xml标签的命名规则
我们前面说到,xml标签都是自定义的. 而我们给xml标签命名时也要遵循相应的规则...
xml标签名称可以包含字母,数字,以及其它的字符.
xml标签名称不能以数字,标点符号,xml(XML)字样开头.
xml标签名称不能包含空格
4)xml可扩展特性的补充
假设我们有这么一个xml文件,里面包含的内容是:
<note>
<to>Tove</to>
<from>Jani</from>
<body>Don't forget me this weekend!</body>
</note>
现在我们要做的是:从xml文件中提取部分信息.并且在提取信息的过程中在该xml文件中添加额外信息.请问,添加信息的操作会使得提取信息的操作中断吗? 明确告诉你:不会~
9.xml属性
1)xml属性需要避免哪些情况??
属性不能包含多个值,元素可以
属性不能包含树结构,元素可以
属性不容易扩展
2)元数据是什么??
菜鸟教程中有这么一句话:元数据(有关数据的数据)应当存储为属性,而数据本身应当存储为元素. 很明显,元数据,即属性.
10.XML验证
前面已经讲过了XML的语法规范:
1).XML 文档必须有一个根元素
2).XML元素都必须有一个关闭标签
3).XML 标签对大小写敏感
4).XML 元素必须被正确的嵌套
5).XML 属性值必须加引号
如果我们XML语句严格遵循上面的语法规范,就称之为"形式良好"的XML. XML语句的合法性检测是通过DTD完成的.DTD是怎么使用的呢??我们是通过将DTD包装在DOCTYPE声明中完成对XML合法性的检测的...
1)DTD规范包含在XML文档中,例如:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE note
[
<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
]>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
2)DTD规范写在一个文件中,然后引入到XML文档中:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE note SYSTEM "Note.dtd">
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
11.xml查看
xml是在html基础上扩展的标记语言. xml文档中的标签都是用户自定义来的,所以浏览器在解析的时候并不能确定这些xml标签的含义. 因此,大多数的浏览器都选择显示xml源码.
那么,我们要怎么做才能让xml在浏览器中布局输出呢?
1)css修饰xml文件, 比如:
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/css" href="cd_catalog.css"?>
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD>
<TITLE>Hide your heart</TITLE>
<ARTIST>Bonnie Tyler</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS Records</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1988</YEAR>
</CD>
.
.
</CATALOG>
2)XSLT模版转换xml文档
xml文档只能表现数据的内容,而实际上数据要呈现在网页中.使用css可以格式化xml文档,使它按照一定布局显示出来,这些前面已经说过了..除了css外,还有另外一种语言也可以在网页中表现出xml数据内容,那就是XSL. 而现在我们要说的XSLT包含在XSL中.XSLT模版可以将XML文档转换成其他格式,如HTML,TXT等..
使用XSLT时最重要的部分是选择XML节点值和创建模版.创建模版使用标签<xsl:template></xsl:template>,且该标签需要一个match属性,用来确定它所匹配的xml节点.选择xml节点值使用的标签是<xsl:value-of />,这个标签需要select属性来确定它匹配的xml节点.
想要了解更多的XSLT知识,请转:http://www.runoob.com/xsl/xsl-tutorial.html
12.JS操作xml文件
描述:JS操作xml是通过XML DOM完成的. XML DOM是用于XML的标准文档对象模型. XML DOM定义了所有XML元素的对对象和属性,以及访问它们的方法. XML DOM是用于查询,添加,修改,删除XML元素的标准.
首先,我们再来熟悉一下XML的定义,例如:
<?xml version="1.0" encoding="utf-8"?>
<bookstore>
<book category="COOKING">
<title lang="en">Everyday Italian</title>
<author>Giada De Laurentiis</author>
<year>2005</year>
<price>30.00</price>
</book>
<book category="CHILDREN">
<title lang="en">Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
<book category="WEB">
<title lang="en">XQuery Kick Start</title>
<author>James McGovern</author>
<author>Per Bothner</author>
<author>Kurt Cagle</author>
<author>James Linn</author>
<author>Vaidyanathan Nagarajan</author>
<year>2003</year>
<price>49.99</price>
</book>
<book category="WEB">
<title lang="en">Learning XML</title>
<author>Erik T. Ray</author>
<year>2003</year>
<price>39.95</price>
</book>
</bookstore>
DOM(标准文档对象模型)中规定:
* 整个文档是一个文档节点
* 每个 XML 标签是一个元素节点
* 包含在 XML 元素中的文本是文本节点
* 每一个 XML 属性是一个属性节点
* 注释属于注释节点
此外,xml元素节点包含文本,这样说是错误的. 只能说,文本包含在文本节点中~~~
XML DOM被看作是一个节点树,树中的所有节点彼此都有联系. 我们可以通过这棵树访问到所有节点,修改,删除它们的内容, 也可以创建新的节点. 这棵节点树看作是节点的集合,并且展示了节点之间的联系.这棵树从根节点开始,向底层长出新的枝条. 父节点,子节点,兄弟节点之间都有一种联系, 父节点包含子节点,位于相同层级的节点成为兄弟节点.
在这颗节点树中:
顶端的节点成为根节点
根节点之外的每个节点都有一个父节点
节点可以有任何数量的子节点
叶子是没有子节点的节点
兄弟节点是拥有相同父节点的节点
XML解析~~~~~
大多数的浏览器都有内建的XML解析器. 解析器把XML载入内存,然后转换成JS可以访问的XML DOM对象.
微软的XML解析器和其它的浏览器解析器有些差异: IE的XML解析器可以解析XML文件 XML字符串, 其它的浏览器对于解析XML文件 XM字符串有着独立的解析器. 所有浏览器中的解析器都有增,删,改,查的功能.
1)微软(IE)的XML解析器
加载XML文件
var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");xmlDoc.async="false";xmlDoc.load("note.xml");
第一句:创建一个空的XML文档对象.
第二句:关闭xml文档的异步加载, 这样做的目的是:在加载XML文档到新建对象的过程中不会执行其它的脚本.
第三句:将指定的XML文档加载到新建对象中.
加载XML字符串
var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");xmlDoc.async="false";xmlDoc.loadXML(txt);
第一句:创建一个空的XML文档对象.
第二句:关闭xml文档的异步加载,这样做的目的是:在加载XML文档到新建对象的过程中不会执行其它的脚本.
第三句:加载指定的字符串到新建对象中.
其它的浏览器是加载XML到新建对象的过程这里就不介绍了, 有兴趣的朋友请转:http://www.cnblogs.com/mimi001/p/3549958.html
XML解析器加载XML文件/字符串到内存中之后,我们就可以通过JS对其进行增,删,改,查操作了~~下面我们一起看一下:
先说一下XML DOM中的主要属性:
documentElement,XML文档中的根节点
nodeName,节点的名称(只读)
nodeValue,节点的值
nodeType,节点的类型
childNodes,得到子节点集合
parentNode,返回父节点
firstChild,返回第一个子节点
lastChild,返回最后一个子节点
nextSibling,返回下一个兄弟节点
previousSibling,返回前一个兄弟节点.
nodeName, 获取节点的名称. 但我们知道,节点有文档节点,元素节点,属性节点,文本节点...文档节点的nodeName永远是#document,元素节点的nodeName与标签名相同,属性节点的nodeName是属性的名称,文本节点的nodeName永远是#text
nodeValue属性规定节点的值.但我们知道,这里包括元素节点的值,属性节点的值,文本节点的值...元素节点的nodeValue是undefined,属性节点的nodeValue是属性的值,文本节点的nodeValue是文本自身.
通过上面的讲解,想必大家已经知道了XML DOM中的属性.接下来,我们说一下XML的节点定位:
1).getElementsById(),通过这个方法得到指定的节点. 拿到节点之后,就可以使用上面的属性 了~~
2).getElementsByTagName()
通过这个方法同样得到指定的节点,这里注意它返回的是一个数组.
假如我们现在有一个xml段落,如下:
<?xml version="1.0" encoding="utf-8"?>
<bookstore>
<book category="COOKING">
<title lang="en">Everyday Italian</title>
<author>Giada De Laurentiis</author>
<year>2005</year>
<price>30.00</price>
</book>
<book category="CHILDREN">
<title lang="en">Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
<book category="WEB">
<title lang="en">XQuery Kick Start</title>
<author>James McGovern</author>
<author>Per Bothner</author>
<author>Kurt Cagle</author>
<author>James Linn</author>
<author>Vaidyanathan Nagarajan</author>
<year>2003</year>
<price>49.99</price>
</book>
<book category="WEB">
<title lang="en">Learning XML</title>
<author>Erik T. Ray</author>
<year>2003</year>
<price>39.95</price>
</book>
</bookstore>
那么,我们就可以通过下面的语句操作上面的xml~~细节如下:
var arrNodes=xmlDoc.getElementsByTagName("title");
for (i=0;i<arrNodes.length;i++)
{
alert(arrNodes.childNodes[0].nodeValue);
}
3)获取xml文档中根节点下的所有子节点,细节如下:
x=xmlDoc.documentElement.childNodes;
for (i=0;i<x.length;i++)//这里遍历只取得了第一层子节点的nodeName
{
document.write(x.nodeName);
document.write("<br />");
}
4)节点树内部有指针定位~~ 细节如下:
x=xmlDoc.getElementsByTagName("book")[0].childNodes;
y=xmlDoc.getElementsByTagName("book")[0].firstChild;
for (i=0;i<x.length;i++)
{
document.write(y.nodeName + "<br />");
y=y.nextSibling;
}
我们通过上面的讲解已经知道了节点定位, 下面来探讨一下xml的节点操作,主要是增删改查
首先给出一个xml源码. 下面是针对该实例的操作:
function loadXMLDoc(dname) { try //Internet Explorer { xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); } catch(e) { try //Firefox, Mozilla, Opera, etc. { xmlDoc=document.implementation.createDocument("","",null); } catch(e) {alert(e.message)} } try { xmlDoc.async=false; xmlDoc.load(dname); return(xmlDoc); } catch(e) {alert(e.message)} return(null); }这里提用JS对xml进行增删改查系列操作,必须以-->xml加载到内存-->节点定位为前提.
而节点定位这里在复习一下:
var t=xmlDoc.getElementsByTagName("title");
for (i=0;i<t.length;i++)
{
document.write(t.childNodes[0].nodeValue);
document.write("<br />");
}
1)增
var newNode=xmlDoc.createElement("New Element Name");//创建元素节点
var nodeBook =xmlDoc.getElementsByTagName("book")[0];//找到节点book
nodeBook.appendChild(newNode);
下面看一下克隆的使用:
oldNode=xmlDoc.getElementsByTagName('book')[0];
newNode=oldNode.cloneNode(true);// 克隆复制原节点以及所有属性和子节点
xmlDoc.documentElement.appendChild(newNode);
2)删
var nodeBook=xmlDoc.getElementsByTagName("book")[0];//找到节点book
xmlDoc.documentElement.removeChild(nodeBook);
这里我们注意两点:
调用父节点对象中的removeChild()删除子节点
删除指定节点的同时,也删除了节点内部的所有内容
3)改
前面有说到:元素节点的值永远都是undefined,所以我们所谓的修改元素节点并不是改变其内部内容.若想改变元素节点,只能使用replace.
-->修改文本节点(的值),比如:
<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js">
</script>
</head>
<body>
<script>
xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];
x.nodeValue="Easy Cooking";
document.write(x.nodeValue);
</script>
</body>
</html>
-->修改属性节点(的值)
使用setAttribute()
<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js">
</script>
</head>
<body>
<script>
xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.getElementsByTagName('book');
x[0].setAttribute("category","food");
document.write(x[0].getAttribute("category"));
</script>
</body>
</html>
使用getattributeNode()定位到指定元素节点的指定属性
<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js">
</script>
</head>
<body>
<script>
xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.getElementsByTagName("book")[0]
y=x.getAttributeNode("category");
y.nodeValue="food";
document.write(y.nodeValue);
</script>
</body>
</html>
4)查
省略
想了解更多相关XML的东西,请转:http://www.runoob.com/dom/dom-tutorial.html