跳至主要內容

XML编程

wangdx大约 30 分钟

项目地址open in new window

XML 简介

XML

XML(eXtended Markup Language,可扩展的标记性语言是一种可以实现跨平台、跨网络并且不受程序开发平台的数据描述语言),在实际的项目开发中可以通过 XML 数据方便的实现数据交换、系统配置功能

1、
<html>
<head>
    <title>沐言科技 —— 通讯录</title>
    <meta charset="UTF-8">
</head>
<body>
<div>
    <div><strong>姓名:</strong>小李老师</div>
    <div><strong>电话:</strong>110</div>
    <div><strong>住址:</strong>天安门</div>
</div>
<div>
    <div><strong>姓名:</strong>小王老师</div>
    <div><strong>电话:</strong>120</div>
    <div><strong>住址:</strong>南池子</div>
</div>
<div>
    <div><strong>姓名:</strong>小木老师</div>
    <div><strong>电话:</strong>119</div>
    <div><strong>住址:</strong>故宫</div>
</div>
</body>
</html>

2、
<?xml version="1.0" encoding="UTF-8"?>
<contacts>
    <contact>
        <name>小李老师</name>
        <phone>110</phone>
        <address>天安门</address>
    </contact>
    <contact>
        <name>小王老师</name>
        <phone>120</phone>
        <address>南池子</address>
    </contact>
    <contact>
        <name>小目老师</name>
        <phone>119</phone>
        <address>故宫</address>
    </contact>
</contacts>

HTML 与 XML 分工

通过以上的两段代码的分析,相信读者已经可以清楚的发现利用 HTML 中的元素可以非常方便的在页面上进行不同效果的显示,而 XML 本身不擅长进行页面显示,即便显示默认情况下也是通过树状结构实现数据展示

XML 基础语法

XML 组成

  • XML 需要准确的实现数据信息的描述,所以在 XML 程序定义中对于语法的完整度要求较为严格,每一个 XML 文件实际上都由“前导声明”和“数据主体”两个核心的组成部分,这两个部分的定义要求如下:
  前导声明:<?xml version="XML版本编号" encoding="中文显示编码" standalone="是否独立运行"?>;
      “version”属性:描述当前XML支持的版本编号,现在唯一可用的版本编号就是“1.0”“
      “encoding”属性:当XML文件中包含有中文信息时必须配置正确的中文编码;
      “standalone”属性:当前的XML文件是否为独立运行,如果需要引入其他文件则将其配置为“no”:
  数据主体:描述具体的数据内容,可以由开发者根据需要动态扩充元素
    在XML中的数据可以通过元素和属性两种形式进行描述;
    数据主体必须存在有且只有一个根节点(或者称其为“根元素”),其他的数据要在根节点之中进行定义;
    每一个元素可以包含有若干属性定义,多个属性使用空格分割,所有的属性内容要使用双引号”"“声明。

<?xml version="1.0" encoding="UTF-8"?>
<contacts>
    <contact id="lee">
        <name>小李老师</name>
        <phone>110</phone>
        <address>天安门</address>
    </contact>
    <contact id="wang">
        <name>小王老师</name>
        <phone>120</phone>
        <address>南池子</address>
    </contact>
    <contact id="mu">
        <name>小目老师</name>
        <phone>119</phone>
        <address>故宫</address>
    </contact>
</contacts>


2、
<?xml version="1.0" encoding="UTF-8"?>
<members>
    <member id="muyan&amp;yootk.com">
        <name>沐言科技</name>
        <age>19</age>
        <book>&lt;&lt;Java就业编程实战&gt;&gt;</book>
    </member>
    <member id="Mr&apos;Lee">
        <name>李兴华</name>
        <age>16</age>
        <book>&lt;&lt;Spring微服务就业编程实战&gt;&gt;</book>
    </member>
</members>

XML 数据页面显示

CSS 显示

在 XML 发展的最初阶段,由于其可以非常方便的实现数据描述所以很多的开发者都开始尝试让 XML 具备更加方便的数据显示功能,而在 HTML 中使用最广泛的就是 CSS 样式表,这样 XML 就可以直接引入 CSS 样式实现页面显示。

XSL/XSLT

为了进一步提升 XML 数据显示的能力,提出了 XSLT(eXtensible Stylesheet Language Transformations、扩展样式表语言)语言,其可以实现显示界面与 XML 数据相分离的处理效果。

1、

2、
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="css/style.css"?>
<members>
    <member id="muyan&amp;yootk.com">
        <name>沐言科技</name>
        <age>19</age>
        <book>&lt;&lt;Java就业编程实战&gt;&gt;</book>
    </member>
    <member id="Mr&apos;Lee">
        <name>李兴华</name>
        <age>16</age>
        <book>&lt;&lt;Spring微服务就业编程实战&gt;&gt;</book>
    </member>
</members>

2、
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:template match="/">            <!-- 从XML根元素开始匹配 -->
        <html>
            <head>
                <title>沐言科技:www.yootk.com</title>
            </head>
            <body>
                <xsl:choose>                <!-- 判断语法 -->
                    <xsl:when test="members/member">    <!-- 指定节点是否存在 -->
                        <table border="1">
                            <thead>
                                <tr>
                                    <td>id</td>
                                    <td>姓名</td>
                                    <td>年龄</td>
                                    <td>图书</td>
                                </tr>

                            </thead>

                            <tbody>
                                <xsl:for-each select="members/member">    <!-- 数据迭代 -->
                                    <tr>
                                        <td>
                                            <xsl:value-of select="@id"/>
                                        </td>

                                        <td>
                                            <xsl:value-of select="name"/>
                                        </td>

                                        <td>
                                            <xsl:value-of select="age"/>
                                        </td>

                                        <td>
                                            <xsl:value-of select="book"/>
                                        </td>

                                    </tr>

                                </xsl:for-each>

                            </tbody>

                        </table>

                    </xsl:when>

                </xsl:choose>

            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet type="text/xsl" href="../xslt/muyan.xslt"?>
<members>
    <member id="muyan&amp;yootk.com">
        <name>沐言科技</name>
        <age>19</age>
        <book>&lt;&lt;Java就业编程实战&gt;&gt;</book>
    </member>
    <member id="Mr&apos;Lee">
        <name>李兴华</name>
        <age>16</age>
        <book>&lt;&lt;Spring微服务就业编程实战&gt;&gt;</book>
    </member>
</members>

DOM

DOM 树

DOM 操作

在 Java 程序开发中,可以通过 W3C 提供的 DOM(Document ObjectModel,文档对象模型)处理标准将 XML 文档转换为一个内存中的对象模型集合(通常称其为“DOM 树”),这样就可以方便的实现 XML 文档数据的操作,同时利用 DOM 标准方法也可以方便的获取 XML 中的任意部分数据,这种 DOM 处理机制也被称为随机访问机制

DOM 节点

Node 节点实现结构

在 W3C 所提供的 DOM 处理标准中,针对 XML 文档中的文档(Document)元素(Element)、属性(Attribute)、文本(Text)等全部都使用节点的形式进行描述,而在“javax.xml”模块中提供“org.w3c.dom.Node”接口进行描述,而后所有的 XML 组成结构全部都是其子接口

DOM 解析

XML 工具类

W3C 提供的 DOM 标准仅仅是一个 XML 数据的节点处理流程而在使用 DOM 处理时需要在内存中形成一个完整的 XML 文档该文档的信息有可能是用户自己创建的,也有可能是通过 XML 文件读取而来,这样就需要有一个工具可以实现该文档结构的统一管理,开发者可以直接借助于“javax.xml.parsers”开发包提供的程序类来进行处理

JavaXML 解析工具类

在“javax.xml.parsers”开发包中提供了两个核心类 DocumentBuilderFactory、DocumentBuilder,开发者可以通过 DocumentBuildeFactory 实例来构造 DocumentBuilder 类对象,这样就可以通过 DocumentBuilder 类的实例化对象,将一个 XML 文件结构解析成内存中 Document,或者创建一个新的 Document

javax.xml.parsers.DocumentBuilderFactory

提供了一个 DocumentBuilder 工厂类,可以直接通过本类中提供的静态方法实现对象实例化,同时可以通过本类对象创建 DocumentBuilder 实例

javax.xml.parsers.DocumentBuilder

可以实现 Document 接口对象的创建,或者直接通过 InputStream 或 File 将输入数据流转为 Document 接对象

1<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<members>
    <member id="muyan">
        <name>沐言科技</name>
        <age>19</age>
    </member>
    <member id="Lee">
        <name>李兴华</name>
        <age>16</age>
    </member>
</members>


2package com.yootk.test.xml;

import org.w3c.dom.Document;
import org.w3c.dom.Element;
import org.w3c.dom.NodeList;

import javax.xml.parsers.DocumentBuilder;
import javax.xml.parsers.DocumentBuilderFactory;
import java.io.File;

public class YootkXMLDemo {
    public static void main(String[] args) throws Exception {
        // 1、通过DocumentBuilderFactory类中的static方法获取本类的实例化对象
        DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();
        // 2、创建DocumentBuilder对象实例
        DocumentBuilder builder = factory.newDocumentBuilder(); // 是为了解析XML文件
        // 3、设置要加载的XML文件的路径
        String filePath = "h:" + File.separator + "muyan.xml"; // 程序文件路径
        File file = new File(filePath); // 获得一个文件对象
        // 4、有了现在的文件和DocumentBuilder对象实例,就可以进行DOM树的生成了
        Document document = builder.parse(file); // 文件解析
        // 5、此时肯定要获取全部的<member>节点的数据,所以就可以通过节点查找的方法进行处理
        NodeList memberList = document.getElementsByTagName("member"); // 根据名称获取节点列表
        // 6、进行集合的迭代
        for (int x = 0; x < memberList.getLength() ; x ++) {
            Element memberElement = (Element) memberList.item(x); // 获取指定的元素
            String id = memberElement.getAttribute("id"); // 获取属性的信息
            NodeList nameList = memberElement.getElementsByTagName("name"); // name节点集合
            NodeList ageList = memberElement.getElementsByTagName("age"); // age节点集合
            String name = nameList.item(0).getFirstChild().getTextContent();
            String age = ageList.item(0).getFirstChild().getTextContent();
            System.out.printf("ID:%s、姓名:%s、年龄:%s\n", id, name, age);
        }
    }
}

创建 XML 文件

XML 输出转换

除了实现 XML 文件的解析之外,也可以通过 DocumentBuilder 类在内存中创建一个新的 Document 接口实例,随后利用节点配置的方式实现 DOM 树的内容添加,但是需要注意的是,在 DOM 处理标准中是不包含有数据输出支持的,那么此时就需要借助 javax.xml.transform”包中提供的类实现输出转换处理

XML 数据转换类结构

在“javax.xml.transform”开发包中主要的输出转换处理类有两个:TransformerFactory 和 Transformer,利用这两个类进行转换时需要设置转换的 Source 接口实例以及 Result 接口实例

javax.xml.transform.TransformerFactory

转换器工厂类,主要功能是创建 Transformer 实例

javax.xml.transform.Transformer

转换处理类,提供数据转换操作,在进行数据转换时,需要设置转换源以及结果类型

javax.xm.transform.Source

数据转换源接口标准,如果现在要进行 DOM 数据转换,则可以直接使用 DOMSource 子类,该子类在对象实例化时需要明确的接收一个 Node 接口实例。

javax.xml.transform.Result

数据转换结果接口,可以通过该接口设置不同的转换目标形式如果要进行文件输出转换,则可以使用 javax.xm.transform.stream.StreamResult 子类,该类可以实现流转换

1package com.yootk.test.xml;

import org.w3c.dom.Document;
import org.w3c.dom.Element;
import org.w3c.dom.NodeList;

import javax.xml.parsers.DocumentBuilder;
import javax.xml.parsers.DocumentBuilderFactory;
import java.io.File;

public class YootkXMLDemo {
    public static void main(String[] args) throws Exception {
        // 1、通过DocumentBuilderFactory类中的static方法获取本类的实例化对象
        DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();
        // 2、创建DocumentBuilder对象实例
        DocumentBuilder builder = factory.newDocumentBuilder(); // 是为了解析XML文件
        // 3、创建一个空白的Document文档对象
        Document document = builder.newDocument(); // 空白文档
        // 4、定义本次操作要设置的数据内容
        String ids[] = new String[]{"muyan", "lee"};
        String names[] = new String[]{"沐言科技", "李兴华"};
        int ages[] = new int[]{19, 16};
        // 5、创建一个根节点
        Element membersElement = document.createElement("members");
        // 6、利用循环的模式将数据保存在相应的XML节点之中
        for (int x = 0; x < ids.length; x++) {
            Element memberElement = document.createElement("member"); // 创建节点
            Element nameElement = document.createElement("name"); // 创建节点
            Element ageElement = document.createElement("age"); // 创建节点
            memberElement.setAttribute("id", ids[x]); // 为member元素设置属性内容
            nameElement.appendChild(document.createTextNode(names[x])); // 创建并添加文本节点
            ageElement.appendChild(document.createTextNode(String.valueOf(ages[x]))); // 创建并添加文本节点
            memberElement.appendChild(nameElement);
            memberElement.appendChild(ageElement);
            membersElement.appendChild(memberElement);
        }
        document.appendChild(membersElement); // 文档里面需要进行节点的保存
        // 7、迭代输出测试
        NodeList memberList = document.getElementsByTagName("member"); // 根据名称获取节点列表
        for (int x = 0; x < memberList.getLength() ; x ++) {
            Element memberElement = (Element) memberList.item(x); // 获取指定的元素
            String id = memberElement.getAttribute("id"); // 获取属性的信息
            NodeList nameList = memberElement.getElementsByTagName("name"); // name节点集合
            NodeList ageList = memberElement.getElementsByTagName("age"); // age节点集合
            String name = nameList.item(0).getFirstChild().getTextContent();
            String age = ageList.item(0).getFirstChild().getTextContent();
            System.out.printf("ID:%s、姓名:%s、年龄:%s\n", id, name, age);
        }
    }
}


2package com.yootk.test.xml;

import org.w3c.dom.Document;
import org.w3c.dom.Element;
import org.w3c.dom.NodeList;

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 javax.xml.transform.dom.DOMSource;
import javax.xml.transform.stream.StreamResult;
import java.io.File;

public class YootkXMLDemo {
    public static void main(String[] args) throws Exception {
        // 1、通过DocumentBuilderFactory类中的static方法获取本类的实例化对象
        DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();
        // 2、创建DocumentBuilder对象实例
        DocumentBuilder builder = factory.newDocumentBuilder(); // 是为了解析XML文件
        // 3、创建一个空白的Document文档对象
        Document document = builder.newDocument(); // 空白文档
        // 4、定义本次操作要设置的数据内容
        String ids[] = new String[]{"muyan", "lee"};
        String names[] = new String[]{"沐言科技", "李兴华"};
        int ages[] = new int[]{19, 16};
        // 5、创建一个根节点
        Element membersElement = document.createElement("members");
        // 6、利用循环的模式将数据保存在相应的XML节点之中
        for (int x = 0; x < ids.length; x++) {
            Element memberElement = document.createElement("member"); // 创建节点
            Element nameElement = document.createElement("name"); // 创建节点
            Element ageElement = document.createElement("age"); // 创建节点
            memberElement.setAttribute("id", ids[x]); // 为member元素设置属性内容
            nameElement.appendChild(document.createTextNode(names[x])); // 创建并添加文本节点
            ageElement.appendChild(document.createTextNode(String.valueOf(ages[x]))); // 创建并添加文本节点
            memberElement.appendChild(nameElement);
            memberElement.appendChild(ageElement);
            membersElement.appendChild(memberElement);
        }
        document.appendChild(membersElement); // 文档里面需要进行节点的保存
        // 8、利用Java给出的辅助工具类,进行内容的输出处理
        TransformerFactory transformerFactory = TransformerFactory.newInstance();
        Transformer transformer = transformerFactory.newTransformer();
        transformer.setOutputProperty(OutputKeys.ENCODING, "UTF-8");
        transformer.transform(new DOMSource(document), new StreamResult(new File("H:" + File.separator + "自定义XML.xml")));
    }
}

修改 XML 文件

修改 XML 文件

使用 DOM 解析处理最重要的一点在于其可以直接实现 XML 数据的修改操作,而在进行 XML 数据修改前首先要通过 DocumentBuilder 实现 XML 文件的读取以及 DOM 树生成,随后开发者就可以直接修改 DOM 树中的节点结构或者是储存的数据,最后再利用 Transformer 实现文件的覆盖保存

package com.yootk.test.xml;

import org.w3c.dom.Document;
import org.w3c.dom.Element;
import org.w3c.dom.NodeList;

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 javax.xml.transform.dom.DOMSource;
import javax.xml.transform.stream.StreamResult;
import java.io.File;

public class YootkXMLDemo {
    public static void main(String[] args) throws Exception {
        File file = new File("H:" + File.separator + "自定义XML.xml");
        // 1、通过DocumentBuilderFactory类中的static方法获取本类的实例化对象
        DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();
        // 2、创建DocumentBuilder对象实例
        DocumentBuilder builder = factory.newDocumentBuilder(); // 是为了解析XML文件
        // 3、创建一个空白的Document文档对象
        Document document = builder.parse(file); // 解析XML文件
        // 4、如果要想添加节点,那么首先一定要获取要添加节点的父节点
        NodeList memberList = document.getElementsByTagName("member"); // 获取全部的Member节点
        // 5、循环每一个Node节点
        for (int x = 0; x < memberList.getLength(); x ++) { // 获取每一个Node
            Element memberElement = (Element) memberList.item(x); // 获取指定索引的元素
            Element urlElement = document.createElement("url"); // 创建新节点
            urlElement.appendChild(document.createTextNode("www.yootk.com")); // 设置文本内容
            memberElement.appendChild(urlElement); // 添加子节点
        }
        // 8、利用Java给出的辅助工具类,进行内容的输出处理
        TransformerFactory transformerFactory = TransformerFactory.newInstance();
        Transformer transformer = transformerFactory.newTransformer();
        transformer.setOutputProperty(OutputKeys.ENCODING, "UTF-8");
        transformer.transform(new DOMSource(document), new StreamResult(file));
    }
}

删除 XML 元素

节点删除

DOM 处理结构中支持有节点数据的删除操作,开发者如果要想删除节点,则首先应该获取到所有删除节点的 NodeList 集合而后通过要删除节点找到其对应的父节点,就可以通过 removeChid() 方法实现删除处理

1<?xml version="1.0" encoding="UTF-8" standalone="no"?><members><member id="muyan"><name>沐言科技</name><age>19</age><url>www.yootk.com</url></member><member id="lee"><name>李兴华</name><age>16</age><url>www.yootk.com</url></member></members>

2package com.yootk.test.xml;

import org.w3c.dom.Document;
import org.w3c.dom.Element;
import org.w3c.dom.NodeList;

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 javax.xml.transform.dom.DOMSource;
import javax.xml.transform.stream.StreamResult;
import java.io.File;

public class YootkXMLDemo {
    public static void main(String[] args) throws Exception {
        File file = new File("H:" + File.separator + "自定义XML.xml");
        // 1、通过DocumentBuilderFactory类中的static方法获取本类的实例化对象
        DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();
        // 2、创建DocumentBuilder对象实例
        DocumentBuilder builder = factory.newDocumentBuilder(); // 是为了解析XML文件
        // 3、创建一个空白的Document文档对象
        Document document = builder.parse(file); // 解析XML文件
        // 4、获取要删除的元素
        NodeList urlList = document.getElementsByTagName("url"); // url元素是要删除的元素
        // 5、删除一个元素的前提:获取删除父元素.remove()删除
        for (int x = 0; x < urlList.getLength(); x ++) {    // 动态的获取节点的长度
            Element urlElement = (Element) urlList.item(x); // 获取删除元素
            urlElement.getParentNode().removeChild(urlElement);
        }
        // 6、利用Java给出的辅助工具类,进行内容的输出处理
        TransformerFactory transformerFactory = TransformerFactory.newInstance();
        Transformer transformer = transformerFactory.newTransformer();
        transformer.setOutputProperty(OutputKeys.ENCODING, "UTF-8");
        transformer.transform(new DOMSource(document), new StreamResult(file));
    }
}

3package com.yootk.test.xml;

import org.w3c.dom.Document;
import org.w3c.dom.Element;
import org.w3c.dom.NodeList;

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 javax.xml.transform.dom.DOMSource;
import javax.xml.transform.stream.StreamResult;
import java.io.File;

public class YootkXMLDemo {
    public static void main(String[] args) throws Exception {
        File file = new File("H:" + File.separator + "自定义XML.xml");
        // 1、通过DocumentBuilderFactory类中的static方法获取本类的实例化对象
        DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();
        // 2、创建DocumentBuilder对象实例
        DocumentBuilder builder = factory.newDocumentBuilder(); // 是为了解析XML文件
        // 3、创建一个空白的Document文档对象
        Document document = builder.parse(file); // 解析XML文件
        // 4、获取要删除的元素
        NodeList urlList = document.getElementsByTagName("url"); // url元素是要删除的元素
        // 5、由于NodeList会随着元素的变化长度而改变,所以一定要首先获取当前长度的信息
        int len = urlList.getLength();
        // 5、删除一个元素的前提:获取删除父元素.remove()删除
        for (int x = 0; x < len; x ++) {    // 动态的获取节点的长度
            Element urlElement = (Element) urlList.item(0); // 获取删除元素
            urlElement.getParentNode().removeChild(urlElement);
        }
        // 6、利用Java给出的辅助工具类,进行内容的输出处理
        TransformerFactory transformerFactory = TransformerFactory.newInstance();
        Transformer transformer = transformerFactory.newTransformer();
        transformer.setOutputProperty(OutputKeys.ENCODING, "UTF-8");
        transformer.transform(new DOMSource(document), new StreamResult(file));
    }
}

SAX 解析

SAX 解析简介

SAX

SAX(Simple APIs for XML,简单 XML 处理 API)是一种基于顺序式读取操作的 XML 解析模式,在使用 SAX 解析处理过程中不会将一个 XML 文件中的全部数据读取到内存之中,而是会根据读取到的 XML 中的不同组成结构来进行事件响应,这样开发者就可以根据事件产生的内容实现相应数据信息的获取

DefaultHandler 事件处理方法

在使用 SAX 解析 XML 文件的处理过程之中,会存在有大量的事件监听方法,为了便于开发者实现这些事件的管理操作,所有的方法都在"org.xml.sax.helpers.DefaultHandler”类中有所定义,开发者只需要根据自身的需要在其子类中覆写相应的方法即可

使用 SAX 解析 XML 文件

SAX 解析流程

使用 SAX 解析模型时需要通过 DefaultHandler 设置 SAX 解析处理类在该类中实现元素以及文本内容的获取,而在进行实际的解析操作时需要通过 SAXParser 类的对象实例设置相应的 XML 文件或 InputStream 字节输入流对象,这样就可以实现 SAX 解析的处理操作

1<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<members>
    <member id="muyan">
        <name>沐言科技</name>
        <age>19</age>
    </member>
    <member id="Lee">
        <name>李兴华</name>
        <age>16</age>
    </member>
</members>


2package com.yootk.test.xml;

import org.xml.sax.Attributes;
import org.xml.sax.SAXException;
import org.xml.sax.helpers.DefaultHandler;

import javax.xml.parsers.SAXParser;
import javax.xml.parsers.SAXParserFactory;
import java.io.File;
class MemberSAXHelp extends DefaultHandler {
    @Override
    public void startDocument() throws SAXException {
        System.out.println("【startDocument()】开始读取XML文档:<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>");
    }

    @Override
    public void startElement(String uri, String localName, String qName, Attributes attributes) throws SAXException {
        System.out.println("【startElement()】元素开始读取,qName = " + qName + "、id = " + attributes.getValue("id"));
    }

    @Override
    public void characters(char[] ch, int start, int length) throws SAXException {
        System.out.println("【characters()】文本节点内容:" + new String(ch, start, length));
    }

    @Override
    public void endElement(String uri, String localName, String qName) throws SAXException {
        System.out.println("【endElement()】元素结束读取,qName = " + qName);
    }

    @Override
    public void endDocument() throws SAXException {
        System.out.println("【endDocument()】文档读取完毕。");
    }
}

public class YootkXMLDemo {
    public static void main(String[] args) throws Exception {
        File file = new File("H:" + File.separator + "自定义XML.xml");
        SAXParserFactory factory = SAXParserFactory.newInstance();
        SAXParser parser = factory.newSAXParser();
        parser.parse(file, new MemberSAXHelp());
    }
}

SAX 解析模型

XML 与对象转换

使用 SAX 解析模型虽然可以方便的实现大型文件的读取处理,但是在数据获取的处理机制上就没有 DOM 方便了,所以为了便于数据的存储,可以直接按照 XML 数据的结构定义一个简单 Java 类,并且在 SAX 解析中根据元素的名称实现该类对象的实例化以及对应属性的配置这样就可以以对象的形式获取 XML 中的数据内容了

1<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<members>
    <member id="muyan">
        <name>沐言科技</name>
        <age>19</age>
    </member>
    <member id="Lee">
        <name>李兴华</name>
        <age>16</age>
    </member>
</members>


2package com.yootk.test.xml;

import org.xml.sax.Attributes;
import org.xml.sax.SAXException;
import org.xml.sax.helpers.DefaultHandler;

import javax.xml.parsers.SAXParser;
import javax.xml.parsers.SAXParserFactory;
import java.io.File;
import java.util.ArrayList;
import java.util.List;

class Member {
    private String id;
    private String name;
    private Integer age;
    public String getId() {
        return id;
    }
    public void setId(String id) {
        this.id = id;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public Integer getAge() {
        return age;
    }
    public void setAge(Integer age) {
        this.age = age;
    }
    @Override
    public String toString() {
        return "【Member】用户ID = " + this.id + "、用户姓名 = " + this.name + "、用户年龄 = " + this.age + "\n";
    }
}

class MemberSAXHelp extends DefaultHandler {
    private List<Member> allMembers; // 保存全部的Member集合
    private String qName; // 保存元素的名称
    private Member member = null; // 获取Member对象实例
    @Override
    public void startDocument() throws SAXException {
        this.allMembers = new ArrayList<>(); // 对象实例化
    }

    @Override
    public void startElement(String uri, String localName, String qName, Attributes attributes) throws SAXException {
        this.qName = qName; // 在元素开始的时候获取元素名称
        if ("member".equals(qName)) {   // member元素开始
            this.member = new Member(); // 实例化Member对象
            this.member.setId(attributes.getValue("id")); // 保存id属性
        }
    }
    @Override
    public void characters(char[] ch, int start, int length) throws SAXException {
        String val = new String(ch, start, length).trim(); // 文本内容
        if (!("".equals(val) || val == null)) { // 内容不为空
            if ("name".equals(this.qName)) {    // name元素文本
                this.member.setName(val);
            } else if ("age".equals(this.qName)) {  // age元素文本
                this.member.setAge(Integer.parseInt(val));
            }
        }
    }

    @Override
    public void endElement(String uri, String localName, String qName) throws SAXException {
        if ("member".equals(qName)) {
            this.allMembers.add(this.member); // 向集合中保存对象
            this.member = null; // 断开已有的引用
        }
    }

    public List<Member> getAllMembers() {
        return allMembers;
    }
}

public class YootkXMLDemo {
    public static void main(String[] args) throws Exception {
        File file = new File("H:" + File.separator + "自定义XML.xml");
        SAXParserFactory factory = SAXParserFactory.newInstance();
        SAXParser parser = factory.newSAXParser();
        MemberSAXHelp memberSAXHelp = new MemberSAXHelp();
        parser.parse(file, memberSAXHelp);
        System.out.println(memberSAXHelp.getAllMembers());
    }
}

DOM4J 工具

DOM4J 工具简介

DOM4J 组件

虽然开发者可以直接通过 DOM 或 SAX 实现 XML 文件的处理但是这两种处理方式也都有各自的优势与劣势,同时在项目中引入两套不同的标准进行开发,对于程序的维护就会非常的难,所以在实际项目开发中为了进一步简化开发者对 XML 文件的操作难度,往往都会借助于 DOM4J 开发组件。

org.dom4j.DocumentHelper

XML 文档创建工具类,使用该类实现元素和内容的创建

org.dom4j.Node

节点操作标准,使用该类可以实现元素的关联以及内容的获取

org.dom4j.Branch

分支节点管理,该接口为 Node 直接子接口,而在该接口之后才进一步实现了 Document、Element 的标准定义

org.dom4j.Document

描述 XML 文档接口对象,可以实现编码与根节点设置

org.dom4j.Element

描述 XML 元素,可以实现子元素配置或者元素查询

org.dom4j.io.XMLWriter

实现 XML 数据输出支持

org.dom4j.io.SAXReader

使用 SAX 解析方式实现 XML 数据读取

使用 DOM4J 生成 XML

DOM4J 生成 XML 文件

在使用 DOM4J 组件生成 XML 文档时,依然需要像传统的 DOM 操作那样在内存中实现 DOM 树的生成,并设置好每一个节点的名称以及数据,随后就可以直接通过 XMWriter 直接实现 DOM 树的输出转换

1package com.yootk.test.xml;

import org.dom4j.Document;
import org.dom4j.DocumentHelper;
import org.dom4j.Element;
import org.dom4j.io.XMLWriter;

import java.io.File;
import java.io.FileOutputStream;

public class YootkXMLDemo {
    public static void main(String[] args) throws Exception {
        // 1、定义当前的程序所需要使用到的XML数据内容
        String ids[] = new String[]{"muyan", "lee"};
        String names[] = new String[]{"沐言科技", "李兴华"};
        int ages[] = new int[]{19, 16};
        // 2、DOM4J是针对于DOM封装,所以一般都需要借助于一个工具类进行处理
        Document document = DocumentHelper.createDocument(); // 创建一个空白文档
        // 3、与文档最接近的概念那么就是根元素,所以直接进行根元素的创建
        Element membersElements = document.addElement("members"); // 创建并添加子元素
        // 4、循环生成所有的子元素
        for (int x = 0; x < names.length; x ++) {
            Element memberElement = membersElements.addElement("member"); // 创建子元素
            memberElement.addAttribute("id", ids[x]); // 设置元素属性内容
            Element nameElement = memberElement.addElement("name");
            nameElement.setText(names[x]); // 设置元素文本
            Element ageElement = memberElement.addElement("age");
            ageElement.setText(String.valueOf(ages[x]));
        }
        // 5、将当前的内存中保存的DOM树的结构直接进行输出
        XMLWriter xmlWriter = new XMLWriter(new FileOutputStream(new File("h:" + File.separator + "yootk.xml")));
        xmlWriter.write(document);// XML文件的输出
        xmlWriter.close();
    }
}


2package com.yootk.test.xml;

import org.dom4j.Document;
import org.dom4j.DocumentHelper;
import org.dom4j.Element;
import org.dom4j.io.OutputFormat;
import org.dom4j.io.XMLWriter;

import java.io.File;
import java.io.FileOutputStream;

public class YootkXMLDemo {
    public static void main(String[] args) throws Exception {
        // 1、定义当前的程序所需要使用到的XML数据内容
        String ids[] = new String[]{"muyan", "lee"};
        String names[] = new String[]{"沐言科技", "李兴华"};
        int ages[] = new int[]{19, 16};
        // 2、DOM4J是针对于DOM封装,所以一般都需要借助于一个工具类进行处理
        Document document = DocumentHelper.createDocument(); // 创建一个空白文档
        // 3、与文档最接近的概念那么就是根元素,所以直接进行根元素的创建
        Element membersElements = document.addElement("members"); // 创建并添加子元素
        // 4、循环生成所有的子元素
        for (int x = 0; x < names.length; x ++) {
            Element memberElement = membersElements.addElement("member"); // 创建子元素
            memberElement.addAttribute("id", ids[x]); // 设置元素属性内容
            Element nameElement = memberElement.addElement("name");
            nameElement.setText(names[x]); // 设置元素文本
            Element ageElement = memberElement.addElement("age");
            ageElement.setText(String.valueOf(ages[x]));
        }
        // 5、将当前的内存中保存的DOM树的结构直接进行输出
        OutputFormat format = OutputFormat.createPrettyPrint();
        format.setEncoding("UTF-8"); // 直接进行编码的配置
        XMLWriter xmlWriter = new XMLWriter(new FileOutputStream(new File("h:" + File.separator + "yootk.xml")), format);
        xmlWriter.write(document);// XML文件的输出
        xmlWriter.close();
    }
}

使用 DOM4J 解析 XML 文件

DOM4J 读取 XML 文件

在进行 XML 数据读取操作时,一般都建议通过 SAX 顺序式数据读取,在 DOM4J 组件中默认已经提供了一个 SAXReader 的解析器,开发者直接使用此类既可实现指定 XML 元素集合

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

<members>
    <member id="muyan">
        <name>沐言科技</name>
        <age>19</age>
    </member>
    <member id="lee">
        <name>李兴华</name>
        <age>16</age>
    </member>
</members>


2package com.yootk.test.xml;

import org.dom4j.Document;
import org.dom4j.Element;
import org.dom4j.io.SAXReader;

import java.io.File;
import java.io.FileInputStream;
import java.util.Iterator;
import java.util.List;

public class YootkXMLDemo {
    public static void main(String[] args) throws Exception {
        // 1、配置要读取的XML文件的路径
        File file = new File("h:" + File.separator + "yootk.xml");
        // 2、创建一个SAX解析器,由DOM4J组件所提供的
        SAXReader saxReader = new SAXReader();
        // 3、通过给定的SAX解析器读取XML文档内容
        Document document = saxReader.read(new FileInputStream(file));
        // 4、所有的文档数据全部都在document之中,那么进行查询
        Element rootElement = document.getRootElement(); // 获取根元素
        // 5、根据根元素获取其全部的子元素
        List<Element> memberList = rootElement.elements("member"); // 获取全部的member元素
        // 6、获取Iterator接口实例
        Iterator<Element> iterator = memberList.iterator();
        while (iterator.hasNext()) {
            Element element = iterator.next(); // 获取指定的元素
            String id = element.attributeValue("id"); // 获取属性
            String name = element.elementText("name"); // 获取元素内容
            String age = element.elementText("age"); // 获取元素内容
            System.out.printf("用户ID:%s、姓名:%s、年龄:%s。\n", id, name, age);
        }
    }
}

HTML

HTML 中的 DOM 树

1、
<html>
  <head>
    <title>沐言科技</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div><span id="msg">www.yootk.com</span></div>
  </body>
</html>

2、
<html>
  <head>
    <title>沐言科技</title>
    <meta charset="UTF-8" />
    <script type="text/javascript">
      window.onload = function () {
        // 加载事件进行处理
        // 1、获取指定id的元素对象
        spanObject = document.getElementById("msg"); // 获取一个Element对象
        console.log(spanObject.firstChild.nodeValue); // 获取元素中的文本内容
      };
    </script>
  </head>
  <body>
    <div><span id="msg">www.yootk.com</span></div>
  </body>
</html>

3、
<html>
  <head>
    <title>沐言科技</title>
    <meta charset="UTF-8" />
    <script type="text/javascript">
      window.onload = function () {
        // 加载事件进行处理
        // 1、获取指定id的元素对象
        spanObject = document.getElementById("msg"); // 获取一个Element对象
        console.log("【第一种获取模式】" + spanObject.firstChild.nodeValue); // 获取元素中的文本内容
        console.log("【第二种获取模式】" + spanObject.innerHTML); // 获取元素中的文本内容
      };
    </script>
  </head>
  <body>
    <div><span id="msg">www.yootk.com</span></div>
  </body>
</html>

4、
<html>
  <head>
    <title>沐言科技</title>
    <meta charset="UTF-8" />
    <script type="text/javascript">
      window.onload = function () {
        // 加载事件进行处理
        spanObject = document.getElementById("msg"); // 获取一个Element对象
        console.log("【第一种获取模式】" + spanObject.firstChild.nodeValue); // 获取元素中的文本内容
        console.log("【第二种获取模式】" + spanObject.innerHTML); // 获取元素中的文本内容
        document
          .getElementById("myBut")
          .addEventListener("click", changeButtonInfo, false);
      };
      function changeButtonInfo() {
        document.getElementById("myBut").innerHTML = "沐言科技:www.yootk.com";
      }
    </script>
  </head>
  <body>
    <div><span id="msg">www.yootk.com</span></div>
    <div><button type="button" id="myBut">按我修改按钮内容</button></div>
  </body>
</html>

生成下拉列表

动态配置下拉列表项

在 HTML 中由于每一个页面都是一颗独立的 DOM 树,这样就可以通过 JavaScript 形式基于 DOM 实现页面元素的动态生成,在实际的开发中,经常会存在有动态生成下拉列表框的处理操作

1、

<html>
  <head>
    <title>沐言科技</title>
    <meta charset="UTF-8" />
    <script type="text/javascript">
      ids = new Array(1, 2, 3, 4, 5, 6);
      labs = new Array("北京", "成都", "南京", "广州", "深圳", "洛阳");
      window.onload = function () {
        // 加载事件进行处理
        document.getElementById("fillbut").addEventListener(
          "click",
          function () {
            // 如果要想进行元素的填充,一定要首先获取父元素
            cityObject = document.getElementById("city"); // 下拉列表框对象
            cityObject.length = 1; // 只保留一个元素
            for (x = 0; x < ids.length; x++) {
              optionElement = document.createElement("option"); // 创建新元素
              optionElement.setAttribute("value", ids[x]); // 设置元素属性
              optionElement.appendChild(document.createTextNode(labs[x])); // 添加文本元素
              cityObject.appendChild(optionElement); // 添加子元素
            }
          },
          false
        );
      };
    </script>
  </head>
  <body>
    <div>
      你喜欢的城市:
      <select id="city">
        <!-- 一定要定义下拉列表框 -->
        <option value="">
          ================= 请选择你喜欢的城市 =================
        </option>
      </select>
      <button id="fillbut">填充下拉列表框内容</button>
    </div>
  </body>
</html>

2、
<html>
  <head>
    <title>沐言科技</title>
    <meta charset="UTF-8" />
    <script type="text/javascript">
      ids = new Array(1, 2, 3, 4, 5, 6);
      labs = new Array("北京", "成都", "南京", "广州", "深圳", "洛阳");
      window.onload = function () {
        // 加载事件进行处理
        document.getElementById("fillbut").addEventListener(
          "click",
          function () {
            // 如果要想进行元素的填充,一定要首先获取父元素
            cityObject = document.getElementById("city"); // 下拉列表框对象
            removeOptionElement();
            for (x = 0; x < ids.length; x++) {
              optionElement = document.createElement("option"); // 创建新元素
              optionElement.setAttribute("value", ids[x]); // 设置元素属性
              optionElement.appendChild(document.createTextNode(labs[x])); // 添加文本元素
              cityObject.appendChild(optionElement); // 添加子元素
            }
          },
          false
        );
      };
      function removeOptionElement() {
        // 定义一个删除元素的函数
        cityObject = document.getElementById("city"); // 下拉列表框对象
        optionList = cityObject.getElementsByTagName("option"); // 获取全部的option
        count = optionList.length; // 首先获取长度
        for (x = 0; x < count - 1; x++) {
          cityObject.removeChild(optionList[1]); // 保留第0个元素
        }
      }
    </script>
  </head>
  <body>
    <div>
      你喜欢的城市:
      <select id="city">
        <!-- 一定要定义下拉列表框 -->
        <option value="">
          ================= 请选择你喜欢的城市 =================
        </option>
      </select>
      <button id="fillbut">填充下拉列表框内容</button>
    </div>
  </body>
</html>

动态修改下拉列表项

动态修改下拉列表项

在 HTML 页面中下拉框具备有数据列表的操作效果,在使用时只需要将下拉框的显示长度数值加大即可,这样在实际的项目中就可以利用这样的组件实现信息的列表,在用户使用时,可以动态的将用户选定的列表项添加到另一个下拉框中,以实现列表项的动态管理

1、

<html>
<head>
    <title>沐言科技</title>
    <meta charset="UTF-8">
    <script type="text/javascript">
        window.onload = function() {    // 加载事件进行处理
        }
    </script>
</head>
<body>
    <div>请选择你擅长的IT技能:</div>
    <select id="spe" multiple size="8">
        <option value="" disabled="">========== 请选择你擅长的技术 ==========</option>
        <option value="1">后端服务编程</option>
        <option value="2">前端UI</option>
        <option value="3">前端开发</option>
        <option value="4">移动开发</option>
        <option value="5">产品设计</option>
    </select>
    <button id="add">&gt;&gt;</button>
    <button id="delete">&lt;&lt;</button>
    <select id="own" multiple size="8">
        <option value="" disabled="">========== 个人擅长技术 ==========</option>
    </select>
</div>
</body>
</html>

2、
<html>
<head>
    <title>沐言科技</title>
    <meta charset="UTF-8">
    <script type="text/javascript">
        window.onload = function() {    // 加载事件进行处理
            document.getElementById("add").addEventListener("click", function() {
                changeOption("spe", "own");
            }, false);
            document.getElementById("delete").addEventListener("click", function() {
                changeOption("own", "spe");
            }, false);
            document.getElementById("spe").addEventListener("dblclick", function() {
                changeOption("spe", "own");
            }, false);
            document.getElementById("own").addEventListener("dblclick", function() {
                changeOption("own", "spe");
            }, false);
        }
        /**
         * 进行元素移动处理,根据指定的元素名称实现元素的移动和保存
         * @param sourceName 要移动的元素名称
         * @param destName 要保存的元素名称
         */
        function changeOption(sourceName, destName) {
            sourceObject = document.getElementById(sourceName);
            destObject = document.getElementById(destName);
            sourceOptionList = sourceObject.getElementsByTagName("option"); // 获取元素
            optionArray = new Array(); // 保存要移动的元素
            foot = 0; // 由于需要动态的元素处理,所以定义一个处理角标
            for (x = 0; x < sourceOptionList.length ; x ++) {
                if (sourceOptionList[x].selected) { // 元素被选中
                    optionArray[foot ++] = sourceOptionList[x]; // 保存元素
                }
            }
            // 将所有保存在数组中的添加元素设置到第二个下拉列表框之中
            for (x = 0; x < optionArray.length ; x ++) {
                optionElement = document.createElement("option"); // 创建option元素
                optionElement.setAttribute("value", optionArray[x].getAttribute("value")); // 获取原始属性
                optionElement.appendChild(document.createTextNode(
                    optionArray[x].firstChild.nodeValue));
                sourceObject.removeChild(optionArray[x]); // 删除元素
                destObject.appendChild(optionElement); // 追加元素
            }
        }
    </script>
</head>
<body>
    <div>请选择你擅长的IT技能:</div>
    <select id="spe" multiple size="8">
        <option value="" disabled="">========== 请选择你擅长的技术 ==========</option>
        <option value="1">后端服务编程</option>
        <option value="2">前端UI</option>
        <option value="3">前端开发</option>
        <option value="4">移动开发</option>
        <option value="5">产品设计</option>
    </select>
    <button id="add">&gt;&gt;</button>
    <button id="delete">&lt;&lt;</button>
    <select id="own" multiple size="8">
        <option value="" disabled="">========== 个人擅长技术 ==========</option>
    </select>
</div>
</body>
</html>

表格动态操作

表格元素动态操作

在数据展示操作中,表格是最主要的处理形式,如果开发者有需要,也可以直接基于 DOM 的处理方式实现表格元素的动态配置操作(动态添加表格行、动态删除表格行等)

1、

<html>
  <head>
    <title>沐言科技</title>
    <meta charset="UTF-8" />
    <script type="text/javascript">
      window.onload = function () {
        // 加载事件进行处理
      };
    </script>
  </head>
  <body>
    <div>
      部门编号:<input type="text" id="deptno" /><br />
      部门名称:<input type="text" id="dname" /><br />
      部门位置:<input type="text" id="loc" /><br />
      <button type="button" id="add">添加</button>
      <button type="button" id="reset">重置</button>
    </div>
    <div>部门信息列表</div>
    <div>
      <table border="1" style="width: 700px;">
        <thead id="deptHead">
          <tr>
            <td>部门编号</td>
            <td>部门名称</td>
            <td>部门位置</td>
            <td>删除</td>
          </tr>
        </thead>
        <tbody id="deptBody"></tbody>
      </table>
    </div>
  </body>
</html>

2、
<html>
  <head>
    <title>沐言科技</title>
    <meta charset="UTF-8" />
    <script type="text/javascript">
      window.onload = function () {
        // 加载事件进行处理
        document
          .getElementById("reset")
          .addEventListener("click", clean, false);
        document.getElementById("add").addEventListener(
          "click",
          function () {
            dno = document.getElementById("deptno").value;
            dna = document.getElementById("dname").value;
            loc = document.getElementById("loc").value;
            addRow(dno, dna, loc);
            clean();
          },
          false
        );
      };
      function clean() {
        // 清除表单中的数据项
        document.getElementById("deptno").value = "";
        document.getElementById("dname").value = "";
        document.getElementById("loc").value = "";
      }
      function addRow(deptno, dname, loc) {
        // 添加表格行
        trElement = document.createElement("tr"); // 创建<tr>元素
        trElement.setAttribute("id", "dept-" + deptno); // 为表格行定义id属性
        deptnoTdElement = document.createElement("td"); // 创建<td>元素
        dnameTdElement = document.createElement("td"); // 创建<td>元素
        locTdElement = document.createElement("td"); // 创建<td>元素
        deptnoTdElement.appendChild(document.createTextNode(deptno)); // 添加文本元素
        dnameTdElement.appendChild(document.createTextNode(dname)); // 添加文本元素
        locTdElement.appendChild(document.createTextNode(loc)); // 添加文本元素
        deleteButTdElement = document.createElement("td"); // 创建<td>元素
        deleteButElement = document.createElement("button"); // 创建<button>元素
        deleteButElement.addEventListener(
          "click",
          function () {
            if (window.confirm("确定要删除此信息吗?")) {
              document
                .getElementById("deptBody")
                .removeChild(document.getElementById("dept-" + deptno));
            }
          },
          false
        );
        deleteButElement.appendChild(document.createTextNode("删除"));
        deleteButTdElement.appendChild(deleteButElement); // 将按钮添加到表格列
        trElement.appendChild(deptnoTdElement);
        trElement.appendChild(dnameTdElement);
        trElement.appendChild(locTdElement);
        trElement.appendChild(deleteButTdElement);
        document.getElementById("deptBody").appendChild(trElement);
      }
    </script>
  </head>
  <body>
    <div>
      部门编号:<input type="text" id="deptno" /><br />
      部门名称:<input type="text" id="dname" /><br />
      部门位置:<input type="text" id="loc" /><br />
      <button type="button" id="add">添加</button>
      <button type="button" id="reset">重置</button>
    </div>
    <div>部门信息列表</div>
    <div>
      <table border="1" style="width: 700px;">
        <thead id="deptHead">
          <tr>
            <td>部门编号</td>
            <td>部门名称</td>
            <td>部门位置</td>
            <td>删除</td>
          </tr>
        </thead>
        <tbody id="deptBody"></tbody>
      </table>
    </div>
  </body>
</html>

HTML5 对 DOM 操作的支持

元素选择器

在传统开发中,所有的 HTML 页面中的元素都只能够根据 ID 属性或者是元素名称进行查询,而这样的处理方式在进行某些元素定位时是非常繁琐的,所以在 HTML5 版本中针对于 DOM 处理操作提供了两个元素选择器

    根据ID选择:document.querySelector("#id");
    根据元素选择:document.querySelectorAll("元素,元素,元素”);

数据转移项目

数据转换处理

在项目开发中,可以通过 XML 数据结构实现不同系统之间的数据传输操作功能,现在假设说有一个数据采集系统,该采集系统可以收集大量设备中的应用信息,但是考虑到设备的安全性问题,不允许用户直接访问里面所保存的数据信息,但是却提供有一个指定日期时间范围的数据下载操作,但是在数据使用中,不同的系统平台又有可能根据自身的需要进行一些数据分析处理操作,那么这就需要进行数据的合并处理

生成 XML 并下载

现在假设当前存在有一个“message”数据采集系统,但是考虑到安全性以及服务的稳定性,所以在该系统中是不允许用户直接进行日志数据库访问的,由于所有的日志都是有记录期限的,所以使用者可以直接获取指定日期区间的日志数据信息,并且将这些信息内容通过 XML 文件进行保存

demo


上次编辑于: