XML初级了解

最新推荐文章于 2022-08-03 17:56:12 发布

老梅的前端旅程

最新推荐文章于 2022-08-03 17:56:12 发布

阅读量365

点赞数

分类专栏：前端开发文章标签： xml 前端

本文链接：https://blog.csdn.net/weixin_42618191/article/details/107064083

版权

前端开发专栏收录该内容

10 篇文章 2 订阅

订阅专栏

主要是了解xml是做什么的以及和html的区别。了解xml常见语法

介绍

XML 被设计用来传输和存储数据。
HTML 被设计用来显示数据。
XHTML是更严格更纯净的 HTML 版本。

xml文件列子：https://www.runoob.com/try/xml/cd_catalog.xml

1.语法

1.XML 必须包含根元素：有一个标签是所有标签的父级
2.XML 声明文件的可选部分，如果存在需要放在文档的第一行
<?xml version="1.0" encoding="utf-8"?>
3.所有的 XML 元素都必须有一个关闭标签
4.大小写敏感
<Message>这是错误的</message>
5.必须正确嵌套
6.属性值必须加引号
7.空格会被保留
8.实体引用
在这里插入图片描述

2.元素及属性

（包括）开始标签直到（包括）结束标签的部分。即标签即标签内的内容所有内容。

创建元素的命名规则：

 1. 名称可以包含字母、数字以及其他的字符
 2. 名称不能以数字或者标点符号开始
 3. 名称不能以字母 xml（或者 XML、Xml 等等）开始
 4. 名称不能包含空格
 5. 避免 "-" 字符。避免 "." 字符。避免 ":" 字符

xml也可设置属性：

<note date="10/01/2008">
	<node id="502">
		<to>Jani</to>
		<from>Tove</from>
		<heading>Re: Reminder</heading>
		<body>I will not</body>
	</node>
</note >

属性难以阅读和维护。请尽量使用元素来描述数据。

<note>
	<date>
		<day>10</day>
		<month>01</month>
		<year>2008</year>
	</date>
	<to>Tove</to>
	<from>Jani</from>
	<heading>Reminder</heading>
	<body>Don't forget me this weekend!</body>	
</note>

3. 获取XML数据

xml文件，使用http请求

<html>
<body>
	<h1>W3Schools Internal Note</h1>
	<div>
		<b>To:</b> <span id="to"></span><br />
		<b>From:</b> <span id="from"></span><br />
		<b>Message:</b> <span id="message"></span>
	</div>
	
	<script>
		if (window.XMLHttpRequest){
			xmlhttp=new XMLHttpRequest();
		}else{// code for IE6, IE5。低版本ie请求
			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		};
		xmlhttp.open("GET","note.xml",false);
		xmlhttp.send();
		xmlDoc=xmlhttp.responseXML;
		
		document.getElementById("to").innerHTML=xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;
		document.getElementById("from").innerHTML=xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;
		document.getElementById("message").innerHTML=xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;
	</script>
</body>
</html>

xml字符串，使用解析器
Internet Explorer 使用 loadXML() 方法来解析 XML 字符串，而其他浏览器使用 DOMParser 对象。

<script>
	//xml格式字符串
	txt="<note>";
	txt=txt+"<to>Tove</to>";
	txt=txt+"<from>Jani</from>";
	txt=txt+"<heading>Reminder</heading>";
	txt=txt+"<body>Don't forget me this weekend!</body>";
	txt=txt+"</note>";
	
	if (window.DOMParser){
		parser=new DOMParser();
		xmlDoc=parser.parseFromString(txt,"text/xml");
	}else {// Internet Explorer{
		xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
		xmlDoc.async=false;
		xmlDoc.loadXML(txt);
	}
	
	document.getElementById("to").innerHTML=xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;
	document.getElementById("from").innerHTML=xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;
	document.getElementById("message").innerHTML=xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;
</script>

4.XML命名空间

XML 命名空间提供避免元素命名冲突的方法。

命名空间必须被定义，在元素的开始标签的 xmlns 属性中定义的。规则：xmlns:前缀="URI"。
所有相同前缀的子元素都会与同一个命名空间相关联。
可在根元素定义。<root xmlns:h="http://www.w3.org/TR/html4/" xmlns:f="http://www.w3cschool.cc/furniture">

<root>

//名称前缀可避免命名冲突  h:
<h:table xmlns:h="http://www.w3.org/TR/html4/">
<h:tr>
<h:td>Apples</h:td>
<h:td>Bananas</h:td>
</h:tr>
</h:table>

//名称前缀可避免命名冲突  f:
<f:table xmlns:f="http://www.w3cschool.cc/furniture">
<f:name>African Coffee Table</f:name>
<f:width>80</f:width>
<f:length>120</f:length>
</f:table>

</root>