XML文档操作


XML概述

  • XML 被设计用来传输和存储数据。
  • XML 仅仅是纯文本
  • XML 允许创作者定义自己的标签和自己的文档结构。
  • XML 不是对 HTML 的替代,而是对 HTML 的补充。
  • XML 是独立于软件和硬件的信息传输工具。
  • XML 是 W3C 的推荐标准

代码示例

<?xml version="1.0" encoding="utf-8"?>
<students>
	<student>
		<sn>201709000123</sn>
		<name>张嘉佳</name>
		<sex>女</sex> 
		<nation>汉族</nation>
		<address>湖北武汉</address>
		<profession>英语</profession>
	</student>
	<student>
		<sn>201709000124</sn>
		<name>李文斌</name>
		<sex>男</sex> 
		<nation>傣族</nation>
		<address>云南昆明</address>
		<profession>建筑</profession>
	</student>
	<student>
		<sn>201709000548</sn>
		<name>王香凝</name>
		<sex>女</sex> 
		<nation>苗族</nation>
		<address>四川成都</address>
		<profession>音乐</profession>
	</student>
	<student>
		<sn>201709000789</sn>
		<name>张文煊</name>
		<sex>女</sex> 
		<nation>汉族</nation>
		<address>广东广州</address>
		<profession>语言</profession>
	</student>

</students>

这个简单的XML文档类似于C语言中的结构体对象

CSS格式化XML

为什么要用CSS样式表:

在浏览器中打开XML文档时,如果没有为XML指定样式表,浏览器将会使用默认样式显示XML,
而且,XML没有预定义的<style>标记,也没有预定义的<style>和class属性
所以当我们需要自定义一种XML输出样式时,就需要自定义一个外部CSS样式表;

代码示例:

XML部分:Css-xml.xml

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="cssformat.css"?>			
<students>
	<h2>XSLT转化XML</h2>
	<student>
		<sn>201709000123</sn>
		<name>张嘉佳</name>
		<sex>女</sex> 
		<nation>汉族</nation>
		<address>湖北武汉</address>
		<profession>英语</profession>
	</student>
	<student>
		<sn>201709000124</sn>
		<name>李文斌</name>
		<sex>男</sex> 
		<nation>傣族</nation>
		<address>云南昆明</address>
		<profession>建筑</profession>
	</student>
	<student>
		<sn>201709000548</sn>
		<name>王香凝</name>
		<sex>女</sex> 
		<nation>苗族</nation>
		<address>四川成都</address>
		<profession>音乐</profession>
	</student>
	<student>
		<sn>201709000789</sn>
		<name>张文煊</name>
		<sex>女</sex> 
		<nation>汉族</nation>
		<address>广东广州</address>
		<profession>语言</profession>
	</student>
</students>
	

CSS部分: cssformat.css

students{
	
	border-collapse: collapse;
	display: table;	
	margin: auto;
	margin-top: 24px;
}
student{
	
	display:table-row;
	line-height: 24px;
	
}
sn, name, sex, nation, address, profession{
	display:table-cell;
	border:1px solid;
	padding: 6px;
}
txt{
	font-style: normal;
	font-weight: bolder;
	font-size: x-large;
	line-height: 24px;
	text-align: left;
	margin-top: 20px;
}

运行结果:
在这里插入图片描述

代码详解:

  • 在上面的 XML 中,根节点是 。文档中的所有其他节点都被包含在 中。

    根节点 有四个 节点。

    第一个 节点六个节点:<sn>, <name>, <sex>,<natiion>,<address>以及 <profession>,其中每个节点都包含一个文本节点,“201709000123”, “张嘉佳”, “女” 以及 "汉族"等。

XMl文档中引用外部样式表的格式是:

<?xml-stylesheet type="text/css" href="cssformat.css"?>	

注意:

  • type=“text/css” 注意在引用外部CSS时,text/后应为css(它也可能为JavaScript、xsl等)
  • href=“cssformat.css” 注意文件名
    CSS文件中的书写格式与HTML中的<style>一样
    更多CSS属性详解CSS 参考手册

XSLT转化XML

XSLT简介:

  • XSLT 指 XSL 转换(XSL Transformations)。
  • XSLT 是 XSL 中最重要的部分。
  • XSLT 可将一种 XML文档转换为另外一种 XML 文档。
  • XSLT 使用 XPath 在 XML 文档中进行导航。
  • 所有主流的浏览器都支持 XML 和 XSLT。
  • XPath 是一个 W3C 标准。

代码示例

`XML部分:xslt-xml.xml

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="xsltformat.xsl"?>

<students>
	
	<student>
		<sn>201709000123</sn>
		<name>张嘉佳</name>
		<sex>女</sex> 
		<nation>汉族</nation>
		<address>湖北武汉</address>
		<profession>英语</profession>
	</student>
	<student>
		<sn>201709000124</sn>
		<name>李文斌</name>
		<sex>男</sex> 
		<nation>傣族</nation>
		<address>云南昆明</address>
		<profession>建筑</profession>
	</student>
	<student>
		<sn>201709000548</sn>
		<name>王香凝</name>
		<sex>女</sex> 
		<nation>苗族</nation>
		<address>四川成都</address>
		<profession>音乐</profession>
	</student>
	<student>
		<sn>201709000789</sn>
		<name>张文煊</name>
		<sex>女</sex> 
		<nation>汉族</nation>
		<address>广东广州</address>
		<profession>语言</profession>
	</student>
</students>

	

XSLT部分: xsltformat.xsl

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/>
<xsl:template match="/">
		<html>
			<head>
			<meta charset="utf-8"/>
				<title>XTSL转化XML</title>
			</head>
			<body>
				<h2 align="center">XSLT转化XML</h2>
				<table border="1" cellpadding="6" align="center">
				<caption>
				studentlist
				</caption>
				<tr>
					<th>学号</th>
					<th>姓名</th>
					<th>性别</th>
					<th>民族</th>
					<th>籍贯</th>
					<th>专业</th>
				</tr>
				<xsl:for-each select="students/student">
					<tr>
					<td align="center"><xsl:value-of select="sn"/></td>
					<td align="center"><xsl:value-of select="name"/></td>
					<td align="center"><xsl:value-of select="sex"/></td>
					<td align="center"><xsl:value-of select="nation"/></td>
					<td align="center"><xsl:value-of select="address"/></td>
					<td align="center"><xsl:value-of select="profession"/></td>
					</tr>
				</xsl:for-each>
				</table>
			</body>
		</html>
	</xsl:template>
</xsl:stylesheet>

运行结果:
在这里插入图片描述

代码详解:

  • 在上面的 XML 中,根节点是 。文档中的所有其他节点都被包含在 中。

    根节点 有四个 节点。

    第一个 节点六个节点:<sn>, <name>, <sex>,<natiion>,<address>以及 <profession>,其中每个节点都包含一个文本节点,“201709000123”, “张嘉佳”, “女” 以及 "汉族"等。

XMl文档中引用外部样式表的格式是:

<?xml-stylesheet type="text/xsl" href="xsltformat.xsl"?>

注意:

  • type=“text/xsl” ,text/后应为xsl
  • href=“xsltformat.xsl” 注意文件名

正确的样式表声明

把文档声明为 XSL 样式表的根元素是 <xsl:stylesheet><xsl:transform>

注释: <xsl:stylesheet><xsl:transform> 是完全同义的,均可被使用!
根据 W3C 的 XSLT 标准,声明 XSL 样式表的正确方法是:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

或者:

<xsl:transform version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

如需访问 XSLT 的元素、属性以及特性,我们必须在文档顶端声明 XSLT 命名空间

从XML里提取数据

在XSLT中通常需要将XML中的内容复制到文档中,XSLT提供了value-of元素可实现该功能,格式:
<xsl:value-of select="name"/>
select后面为指定的XML中的节点 **“.”**表示选取钙元素下的所有元素(当前节点无嵌套元素除外)
XSLT xsl:template 元素
XSLT xsl:value-of 元素
XSLT xsl:for-each 元素

节点匹配

  1. 匹配根节点 <xsl:template match="/">
  2. 匹配元素名 <xsl:value-of select="name1"/> <xsl:for-each select="name1/name2"/>
  3. 匹配后代节点 <xsl:value-of select="//name1"/>
  4. 通过ID匹配节点 <xsl:value-of select="ID(09000532)"/>
  5. 通过I匹配属性@ <xsl:value-of select="name1/@atter"/>
  6. 通过多个节点 <xsl:value-of select="name1|name2"/>(用“|”分隔)
  7. 扩展匹配[] <xsl:value-of select="name1[@atter='value]"/>

DOM解析XML

XML DOM简介

在这里插入图片描述

  • XML DOM这种结构层次是根据XML文档生成的一颗节点树。
  • XML 文档中的每个成分都是一个节点。
  • XML DOM 是用于获取、更改、添加或删除 XML 元素的标准。

节点

根据 DOM,XML 文档中的每个成分都是一个节点。
DOM 是这样规定的:

  • 整个文档是一个文档节点
  • 每个 XML 标签是一个元素节点
  • 包含在 XML 元素中的文本是文本节点
  • 每一个 XML 属性是一个属性节点
  • 注释属于注释节点

代码示例

XML部分:Dom-xml.xml

<?xml version="1.0" encoding="utf-8"?>
<students>
	<student>
		<sn>201709000123</sn>
		<name>张嘉佳</name>
		<sex>女</sex> 
		<nation>汉族</nation>
		<address>湖北武汉</address>
		<profession>英语</profession>
	</student>
	<student>
		<sn>201709000124</sn>
		<name>李文斌</name>
		<sex>男</sex> 
		<nation>傣族</nation>
		<address>云南昆明</address>
		<profession>建筑</profession>
	</student>
	<student>
		<sn>201709000548</sn>
		<name>王香凝</name>
		<sex>女</sex> 
		<nation>苗族</nation>
		<address>四川成都</address>
		<profession>音乐</profession>
	</student>
	<student>
		<sn>201709000789</sn>
		<name>张文煊</name>
		<sex>女</sex> 
		<nation>汉族</nation>
		<address>广东广州</address>
		<profession>语言</profession>
	</student>

</students>

Dom部分:Domformat.html(Dom为HTML文件)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>XML DOM应用</title>
</head>
<body>
<table border="1" align="center">
  <caption>
  使用DOM显示XML文挡
  </caption>
  <tr>
    <td>学号</td>
    <td>姓名</td>
    <td>性别</td>
    <td>民族</td>
    <td>籍贯</td>
    <td>专业</td>
  </tr>
  <script type="text/javascript">
	var isie=true;
	var xmlDoc;
	try {
  		xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
	}
	catch(e) {
  		isie=false;
  		xmlDoc=document.implementation.createDocument("","",null);//
	}
	xmlDoc.async=false;
	xmlDoc.load("Dom-xml.xml");
	var stuList=xmlDoc.getElementsByTagName("student");
	for(var i=0; i<stuList.length; i++) {
  		document.write("<tr>");
  		var subList=stuList[i].childNodes;
  		for(var j=0; j<subList.length; j++) {
   		 if(isie) {
      		document.write("<td>" + subList[j].text + "</td>");
    	 }
    	 else {
      		if(subList[j].nodeType==1) {
       			document.write("<td>" + subList[j].textContent + "</td>");//
      		}
    	}
  	  }
  	  document.write("</tr>");
   } 
</script>
</table>
</body>
</html>

运行结果
在这里插入图片描述

注意:上述Dom案例代码只能在IE9+打开,否则只会出现表头(Dom无法解析XML文档中的内容)
如果出现这种情况,直接点击允许即可
在这里插入图片描述

代码详解

节点

  • 在上面的 XML 中,根节点是 。文档中的所有其他节点都被包含在 中。

    根节点 有四个 节点。

    第一个 节点六个节点:<sn>, <name>, <sex>,<natiion>,<address>以及 <profession>,其中每个节点都包含一个文本节点,“201709000123”, “张嘉佳”, “女” 以及 "汉族"等。

XML DOM 节点树

XML DOM 把 XML 文档视为一种树结构。这种树结构被称为节点树。
可通过这棵树访问所有节点。可以修改或删除它们的内容,也可以创建新的元素。
这颗节点树展示了节点的集合,以及它们之间的联系。这棵树从根节点开始,然后在树的最低层级向文本节点长出枝条:

(借用W3School的图)

在这里插入图片描述

加载函数

XML DOM 含有遍历 XML 树以及访问、插入、删除节点的方法(函数)。
然后,在访问并处理 XML 文档之前,必须把它载入 XML DOM 对象。

xmlDoc.load("Dom-xml.xml");:加载XML

下面代码为了兼容浏览器

	try {
  		xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
	}
	catch(e) {
  		isie=false;
  		xmlDoc=document.implementation.createDocument("","",null);//
	}

加载函数整体:

try {
  		xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
	}
	catch(e) {
  		isie=false;
  		xmlDoc=document.implementation.createDocument("","",null);//
	}
	xmlDoc.async=false;
	xmlDoc.load("Dom-xml.xml");

遍历XML文档数据

var stuList=xmlDoc.getElementsByTagName("student");
	for(var i=0; i<stuList.length; i++) {
  		document.write("<tr>");
  		var subList=stuList[i].childNodes;
  		for(var j=0; j<subList.length; j++) {
   		 if(isie) {
      		document.write("<td>" + subList[j].text + "</td>");
    	 }
    	 else {
      		if(subList[j].nodeType==1) {
       			document.write("<td>" + subList[j].textContent + "</td>");//
      		}
    	}
  	  }
  	  document.write("</tr>");
   } 

XML DOM Document 对象

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值