前端-xml

已于 2022-10-21 17:37:19 修改
阅读量2.1k 收藏 1
点赞数
分类专栏： Java Web 文章标签： 开发语言 前端 xml
于 2022-03-07 20:31:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zyy130988/article/details/123329176
版权

前端-xml

 
 
一个XML文件分为如下几部分内容

  1. 文档声明
  2. 元素
  3. 属性
  4. 注释
  5. CDATA区、特殊字符

 
文档声明
<?xml version="1.0" encoding="utf-8"?>

  1. XML声明放在XML文档的第一行
  2. version --文档符合XML1.0规范"
  3. encoding --文档字符编码，比如"utf-8
     

元素
1.元素语法要求

  1. 每个XML文档必须有且只有一个根元素
  2. 根元素是一个完全包括文档中其他所有元素的元素
  3. 根元素的起始标记要放在所有其他元素的起始标记之前
  4. 根元素的结束标记要放在所有其他元素的结束标记之后
  5. XML元素指XML文件中出现的标签，一个标签分为开始标签和结束标签，一个标签有如下几种书写形式包含标签体:<a>www.sohu.cn</a>
    不含标签体的:<a></a>，简写为:<a/>
  6. 一个标签中也可以嵌套若干子标签。但所有标签必须合理的嵌套，绝对不允许交叉嵌套
     

xml元素命令规则

  1. 区分大小写，例如，<P>和<p>是两个不同的标记
  2. 不能以数字开头
  3. 不能包含空格
  4. 名称中间不能包含冒号（:) 。
  5. 如果标签单词需要间隔，建议使用下划线比如<book_title>hello</book_title>
     

属性

<Student ID="100">
<Name>TOM</Name>
</Student>

1.属性值用双引号(")或单引号(')分隔（如果属性值中有'，用"分隔;有"，用'分隔)
2. 一个元素可以有多个属性，它的基本格式为:<元素名属性名=“属性值”>
3. 特定的属性名称在同一个元素标记中只能出现一次
4. 属性值不能包括&I字符
 

注释

  1. <!--这是一个注释-->
  2. 注释内容中不要出现- -
  3. 不要把注释放在标记中间;错误写法<Name <!--the name-->>TOM</Name>
  4. 注释不能嵌套
  5. 可以在除标记以外的任何地方放注释

 
CDATA、特殊字符
有些内容不想让解析引擎执行，而是当作原始内容处理(即当做普通文本)，可以使用CDATA包括起来，CDATA节中的所有字符都会被当作简单文本，而不是XML标记。
1.语法:

<![GDATA[
这里可以把你输入的字符原样显示，不会解析xml
]]>
  1. 可以输入任意字符(除]]>外)
  2. 不能嵌套
     

xml转义字符

转义符符号
<<
>>
&&
""
''
 

格式正规的XML文档

  1. XML声明语句<?xml version="1.0" encoding="utf-8"?>
  2. 必须有且仅有一个根元素
  3. 标记大小,区分大小写的
  4. 属性值用引号
  5. 标记成对
  6. 空标记关闭
  7. 元素正确嵌套

 

<?xml version="1.0" encoding="UTF-8" ?>
<!-->
1 xml :表示该文件的类型xml
2.version="1.0"版本
3 encoding="UTF-8”文件编码
4. students: root元素/根元素，程序员自己来定
5. <student></student>表示students一个子元素，可以有多个
6. id就是属性name , age, gender是student元素的子元素
7.xml也可以被映射成xml dom树(xml文件是树形结构,有层次感)
-->
<students>
    <student>
        <name>张三</name>
        <age>18</age>
        <gender>男</gender>
    </student>
    <student>
        <name>李四</name>
        <age>20</age>
        <gender>女</gender>
    </student>
</students>

 
 

XML的作用

在这里插入图片描述
在这里插入图片描述

创建xml文件

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<?xml version="1.0" encoding="UTF-8" ?>
<!-->
1 xml :表示该文件的类型xml
2.version="1.0"版本
3 encoding="UTF-8”文件编码
4. students: root元素/根元素，程序员自己来定
5. <student></student>表示students一个子元素，可以有多个
6. id就是属性name , age, gender是student元素的子元素
7.xml也可以被映射成xml dom树(xml文件是树形结构,有层次感)
-->
<students>
    <student>
        <name>张三</name>
        <age>18</age>
        <gender>男</gender>
    </student>
    <student>
        <name>李四</name>
        <age>20</age>
        <gender>女</gender>
    </student>
</students>

xml语法

在这里插入图片描述

文档说明

在这里插入图片描述

元素

在这里插入图片描述
5.XML元素指XML文件中出现的标签，一个标签分为开始标签和结束标签，一个标签有如下几种书写形式包含标签体:<a>www.sohu.cn</a>
不含标签体的:<a></a>，简写为:<a/>
6.一个标签中也可以嵌套若干子标签。但所有标签必须合理的嵌套，绝对不允许交叉嵌套

在这里插入图片描述
在这里插入图片描述

属性

在这里插入图片描述

<?xml version="1.0" encoding="UTF-8" ?>
<!--
    id='01'也是正确写法
    如果属性值有”则使用’包括属性比如 id="xxx'yyy"
    如果属性值有’则使用”包括属性比如 id='xxx"yyy'
    属性名在同一个元素标记只能出现一次<stduent id=""01" id="03">错误的
    属性值不能包括&字符比如:<stduent id="0&1">是错误的
    相同子元素是可以有多个的
-->
<students>
    <student id="1'0'1">
        <name>张三</name>
        <name>王五</name>
        <age>18</age>
        <gender>男</gender>
    </student>
    <student>
        <name>李四</name>
        <age>20</age>
        <gender>女</gender>
    </student>
</students>

注释

在这里插入图片描述

CDATA、特殊字符

在这里插入图片描述

<?xml version="1.0" encoding="UTF-8" ?>


<!--如果希望把某些字符串，当做普通文本，使用CDATA包括-->

<students>
    <student>
        <name>李四</name>
        <age>20</age>
        <gender>女</gender>
        <code>
            <!--如果希望把某些字符串，当做普通文本，使用CDATA包括-->
            <![CDATA[
                 <script data-compress=strip>
                 function h(obj){
                 obj.style.behavior='url(#qefault#homepage) ';
                 var a = obj.setHomePage( ' // www.baidu.com/');
                 }
            </script>
            ]]>
        </code>
    </student>
</students>

xml转义字符

在这里插入图片描述
在这里插入图片描述

dom4j

xml解析技术

在这里插入图片描述
映射成xml dom树后，就可以调用Java dom4j API来使用
在这里插入图片描述
上图表示下面的 XML 中的一本书：

<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">Learning XML</title> 
  <author>Erik T. Ray</author> 
  <year>2003</year> 
  <price>39.95</price> 
</book>
</bookstore>

获取Document对象的三种方式

在这里插入图片描述

dom4j应用

在这里插入图片描述
在这里插入图片描述

    public void loadXML() throws DocumentException {
        //得到一个解析器
        SAXReader reader = new SAXReader();
        Document document = reader.read(new File("src\\students.xml"));
        System.out.println(document);

    }

document --> rootElement --> content --> elementData(xml所有的属性存放在这里) --> 1(代表一个student节点) --> content --> elementData(student节点中所有属性存放在这里) --> 1(name节点) --> content --> text(找到name的值)
在这里插入图片描述

<?xml version="1.0" encoding="utf-8"?>
<students>
    <student id="01">
        <name>小龙女</name>
        <gender>女</gender>
        <age>16</age>
        <resume>古墓派掌门人</resume>
    </student>
    <student id="02">
        <name>欧阳锋</name>
        <gender>男</gender>
        <age>18</age>
        <resume>白驼山,蛤蟆神功</resume>
    </student>
</students>

遍历xml指定元素

    public void listStus() throws DocumentException {
        //得到一个解析器
        SAXReader reader = new SAXReader();
        Document document = reader.read(new File("src\\students.xml"));
        //1. 得到rootElement
        Element rootElement = document.getRootElement();
        //2. 得到rootElement的student Elements
        List<Element> students = rootElement.elements("student");
        for (Element student : students) {
            //获取Student元素的name Element
            Element name = student.element("name");
            Element age = student.element("age");
            Element resume = student.element("resume");
            Element gender = student.element("gender");
            System.out.println("学生姓名= " + name.getText() + " "
                    + "年龄=" + age.getText() + " "
                    + "自我介绍=" + resume.getText() + " "
                    + "性别" + gender.getText());
        }
    }

指定读取xml元素

    public void readOne() throws DocumentException {
        //得到一个解析器
        SAXReader reader = new SAXReader();
        Document document = reader.read(new File("src\\students.xml"));
        //1. 得到rootElement
        Element rootElement = document.getRootElement();
        //2.获得第一个学生
        Element student = (Element) rootElement.elements("student").get(0);
        Element name = student.element("name");
        Element age = student.element("age");
        Element resume = student.element("resume");
        Element gender = student.element("gender");
        //3.输出该信息
        System.out.println("学生姓名= " + name.getText() + " "
                + "年龄=" + age.getText() + " "
                + "自我介绍=" + resume.getText() + " "
                + "性别" + gender.getText());
        //4. 获取student元素的属性
        System.out.println("id=" + student.attributeValue("id"));
    }
poixao
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
前端开源库-xml-loader
08-30
前端开源库-xml-loaderXML加载器，用于加载XML文件的Webpack模块。
前端项目-fast-xml-parser.zip
09-03
前端项目-fast-xml-parser,在没有C/C 的基础上快速解析XML到JS/JSON库
XML的加载与渲染
最新发布
m0_59664761的博客
01-28 1655
setViewContent()，将XML解析为ViewTree，并加载到Window中（其实DecorView是root）硬件每16.67ms触发一次Vsync信号（USE_VSYNC），由Choreographer获取，交由ViewRootHnadler处理ViewRootHnadler触发mTraversalRunnable.run()，最终performTraversals（Measure、Layout、Draw）
前端开源库-xml-js
08-30
前端开源库-xml-jsXML JS，XML文本和JavaScript对象/JSON文本之间的转换器。
解析xml文件导入数据，并在前端分页展示
11-26
利用dom4j架包获取xnl节点，导入数据库，并用分页架包在前端分页展示
前端开源库-node-xml
08-30
前端开源库-node-xmlnode xml，一个用javascript编写的node.js的XML解析器。
前端基础之XML
qq_40701750的博客
05-15 1090
XML是可扩展的标识语言（eXtensible Markup Language），其先驱是SGML和HTML。
Web 前端学习 之XML
Weary_PJ的博客
08-13 1042
Web 前端学习 之XML 什么是XML xml是可扩展的标记性语言 xml的作用 xml 的主要作用有： 1、用来保存数据，而且这些数据具有自我描述性 2、它还可以做为项目或者模块的配置文件 3、还可以做为网络传输数据的格式（现在JSON 为主）。 xml 语法 1.文档声明 xml文件开头部分如下图所示 图书有id属性表示唯一标识,书名,作者,价格的信息 如下 <?xml version="1.0" encoding="utf-8" ?> <books> <b
xml解析
m0_53151031的博客
07-29 1078
前言：昨天与大家分享了DTD的一些知识，今天与大家分享的是xml解析，xml在整个前端中是很重要。跟着思维导图来看看我今天要分享东西。 一、JAVA中配置文件的三种位置以及读取方式 1、在同一包中： 读取方式：直接写文件名（如图所示） 2、在同一根目录下（与src资源并列） 读取方式：在路径前面要加"/",不然会报错。（注意：一定一定要加"/"） 3、在WEB-INF中 读取方式：因为是存放在web-inf目录下，情况比较特殊，不能被外界直接访问...
Javaweb前后端交互技术基础：XML配置详解
程序猿小样的博客
11-26 169
XML是一种可扩展标记语言，用于存储和传输数据。它由一系列标签组成，每个标签用于表示文档中的一个元素。XML提供了一种结构化的方式来描述和组织数据，使其适用于配置文件、数据交换等多个领域。本文深入探讨了XML在Javaweb前后端交互中的基础配置，涵盖了XML的基础结构、在web.xml中配置Servlet、数据库连接配置以及利用XML实现前后端数据交互等方面。如果你对任何内容有疑问或需要更多详细信息，请随时在下方评论区留言，我将竭诚为你解答。
【小白入门】始于前端UI（二）——XML简介
weixin_43226986的博客
12-22 604
目录1. 什么是XML2. XML树结构3. XML语法规则4. XML属性5. 查看XML文件6. 显示XML6.1 使用CSS显示XML6.2 使用XSLT显示XML7. XML解析器（XML parser）7.1 解析XML文档7.2 解析XML字符串 1. 什么是XML XML （eXtensible Markup Language）指可扩展标记语言，被设计用来传输和存储数据。 区别于XML，HTML 被设计用来显示数据。但需要注意的是XML并不能替代HTML，两者重点偏重不同，XML作为HTML的
前端开源库-xml2json
08-29
前端开源库-xml2jsonxml2json，使用node expat将XML转换为json，反之亦然。
前端操作xml，从本地获取xml格式的文件，并且解析xml文件，拿到需要的值
咖啡壶的博客
07-12 4563
前端操作xml，从本地获取xml格式的文件，并且解析xml文件，拿到需要的值
【React】前端导出Excel，导出xml文件
dreamer_sen的博客
06-13 972
最近有个需求，需要从前端导出Excel文件与xml文件，写个文档记录一下 知识点 Blob ArrayBuffer Excel导出 npm包及文档：xlsx，file-saver demo 写成工具：exportExcel.js import FileSaver from 'file-saver'; import XLSX from 'xlsx'; const object = 'DATA_OBJECT'; const array = 'DATA_ARRAY'; const s2ab = (s) =&g
前端上传xml文件后，前端自行将上传的xml跳转展示到浏览器上
weixin_42484910的博客
05-10 1535
问题描述： 解决步骤： 1.之前想要在点击view按钮跳转时将xml文件的file对象传递给预览页在预览页进行读取xml内容，但是传递file对象很难实现（如果有人实现了 可以告诉我一下吗 学习下 感谢！） 2.之后我就在上传页那里进行读取xml文件 获取到他的文件内容（字符串类型），然后将字符串内容存储在session里（感觉不友好，但还没想到怎么解决，如有人知道 望告知 感谢！）。然后进行页面跳转到预览页 // 点击view 跳转到展示xml页面 toXmlView() { //
生成XMl文件的四种方式
m0_46360888的博客
11-27 9048
一、Dom写入 import java.io.File; import javax.xml.parsers.DocumentBuilder; import javax.xml.parsers.DocumentBuilderFactory; import javax.xml.transform.OutputKeys; import javax.xml.transform.Transformer; import javax.xml.transform.TransformerFactory; import ja
前端页面显示原生xml
恨_别离的博客
04-15 1021
因为公司业务需要，需要将协议传输过来的xml文件原封不动的显示在JSP页面上 经多次查找验证，使用xmp即可解决 <xmp>${msdXml.msdInfo}</xmp>
前端读取服务器xml文件,前端利用XMLHttpRequest读取本地文本文件
weixin_39863155的博客
08-11 1426
问题前端常见是通过input按钮上传读取文件信息，此时知道本地文件路径需要直接js读取本地文件内的信息注意本地测试，需要解决本地浏览器跨域问题，如：解决利用XMLHttpRequest获取到文件的信息。/*** XMLHttpRequest.open() 初始化请求参数* XMLHttpRequest.send() 发送网络请求* XMLHttpRequest.onload() 监听请求结果* X...
简单实现项目页面PDF，Doc，Xml在线预览功能
guoyingjie0328的博客
05-08 1068
通过iframe标签简易实现在线预览项目上传的文件，然后前端通过后端返回二进制文件流加载
前端如何展示xml数据
09-02
前端可以通过以下几种方式展示XML数据： 1. 使用XML解析器：前端可以使用浏览器内置的XML解析器（如DOMParser、XMLHttpRequest等）或第三方的解析库（如jQuery、xml2js等）来解析XML数据，并将解析后的数据渲染到页面上。通过解析器可以将XML数据转换为JavaScript对象，从而方便操作和展示数据。 2. 使用XSLT转换：前端可以使用XSLT（可扩展样式表语言转换）来将XML数据转换为想要的HTML格式。XSLT是一种基于XML的转换语言，可以通过定义模板和规则来改变XML的结构和呈现方式。通过使用XSLT转换，前端可以将XML数据按照自己的需求进行展示。 3. 使用JavaScript模板引擎：前端可以使用一些JavaScript模板引擎（如Handlebars、Mustache等）来将XML数据和HTML模板结合，生成最终的展示结果。这些模板引擎通常支持类似于{{}}这样的占位符语法，可以通过在页面上插入占位符，并提供相应的XML数据，来动态生成页面内容。 4. 使用CSS样式：前端可以通过定义CSS样式来控制XML数据的呈现方式。通过为XML元素添加样式属性，如颜色、字体、边距等，可以改变元素的外观。同时，也可以通过CSS选择器来选择和操作XML元素，从而实现展示和样式的控制。 以上是几种常见的前端展示XML数据的方式，具体选择哪种方式还要根据具体的场景和需求来决定。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值