XML与web开发-01- 在页面显示和 XML DOM 解析

前言: 关于 xml 特点和基础知识,可以菜鸟教程进行学习:http://www.runoob.com/xml/xml-tutorial.html
本系列笔记,主要介绍 xml 在 web 开发时需要了解的知识

XML 在页面显示数据

 XML 指可扩展标记语言(eXtensible Markup Language)。
 XML 被设计用来传输和存储数据。

一、怎么在页面上只显示数据?

 大家在网页上可能都见过这样的 xml 文件:

1483449-20181103225816989-1322569347.jpg

 这是没有任何样式的 xml,打开 tomcat 什么的服务器,在网页上浏览 xml 文件的样式,它的源码是:

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

<addresslist>
    <linkman>
        <name>肖朋伟</name>
        <id>2236</id>
        <company>null</company>
        <email>xpwi@qq.com</email>
        <tel>66666</tel>
    </linkman>
</addresslist>

 怎样在页面上只显示文字,并加上特定的样式呢?那就要用到 css 了

(1)先自己写一个 css 样式:

name{
    display: block;
    color: brown;
    font-size: 20pt;
    font-weight: bold;
}

id, company, email, tel, site{
    display: block;
    color: black;
    font-size: 14pt;
    font-weight: normal;

}

(2)在 xml 文件中引入这个 css 文件:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- 加上样式,注意路径 -->
<?xml-stylesheet type="text/css" href="../css/first.css" ?>

<addresslist>
    <linkman>
        <name>肖朋伟</name>
        <id>2236</id>
        <company>null</company>
        <email>xpwi@qq.com</email>
        <tel>66666</tel>

    </linkman>
</addresslist>

(3)就会这样显示了:

1483449-20181103230750348-552094879.jpg

(4)然后,xml 也可以像 html 标签那样,加属性,例如:

<tel id = "userTel">66666</tel>

XML与web开发-01- xml 解析

在 xml 文件,更多的用来描述信息的内容,
所以在得到一个 XML 文档后,应该利用程序按照其中元素的定义名称取出对应内容,
这样的操作就称为 xml 解析。

W3C 定义了 SAX 和 DOM 两种解析方式

XML - DOM 解析操作

在应用程序中,基于 DOM 的 XML 分析器将一个 XML 文档转换成一个对象模型的集合,通常称为 DOM 树
应用程序正是通过对这个对象模型的操作,来实现对 XML 文档数据的操作。

准备一个 xml 文件(路径是 D:\xml\first.xml,下面要用目录,注意):

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

<addresslist>
    <linkman>
        <name>肖朋伟</name>
        <id>2236</id>
        <company>null</company>
        <email>xpwi@qq.com</email>
        <tel>66666</tel>

    </linkman>
</addresslist>

java 解析文件:

【注意】:

1.目录,我是新建一个包 xml ,再新建一个 dom.java
2.注意解析的 xml 路径,要根据自己的路径设置
3.如果自己写代码,注意一下导包,Document,是 org.w3c.dom.Document

// 目录,我是新建一个包 xml ,再新建一个 dom.java
package xml;

import org.w3c.dom.NodeList;
import org.xml.sax.SAXException;

//注意 Document,是 org.w3c.dom.Document
//默认导包会是 javax 那个,注意一下
import org.w3c.dom.Document;
import javax.xml.parsers.DocumentBuilder;
import javax.xml.parsers.DocumentBuilderFactory;
import javax.xml.parsers.ParserConfigurationException;
import java.io.File;
import java.io.IOException;

public class dom {
    public static void main(String[] args){
        //(1)建立 DocumentBuilderFactory,用来得到 DocumentBuilder
        DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();

        //(2)通过 DocumentBuilderFactory,来得到 DocumentBuilder
        DocumentBuilder builder = null;
        try{
            builder = factory.newDocumentBuilder();

        }catch (ParserConfigurationException e){
            e.printStackTrace();
        }

        //(3)定义
        Document doc = null;
        try {
            //读取指定路径的 xml 文件,要先有一个这样的文件
            doc = builder.parse("D://xml/" + File.separator + "first.xml");
        } catch (SAXException e){
            e.printStackTrace();
        } catch (IOException e){
            e.printStackTrace();
        }

        //(4)查找 name 的节点
        NodeList nl = doc.getElementsByTagName("name");

        //(5)输出 NodeList 中第一个子节点中文本节点的内容
        System.out.println("姓名:" + nl.item(0).getFirstChild().getNodeValue());

    }

}

运行就会在控制台打印:

1483449-20181104000235609-1814728293.jpg

DOM 解析4个核心操作接口:

  • Document:此接口代表了整个 XML 文档,代表整个 DOM 树的树根,提供了对文档中的数据进行访问和操作的入口,
    通过 Document 节点可以访问 XML 文件中所有的元素内容。Document 接口的常用方法如下表:

  Document 接口的常用方法

No.
方 法
类 型
描 述
1
public NodeList getElementsByTagName(String name)
普通
取得指定节点名称的 NodeList
2
public Element createElement(String tagName)throws DOMException
普通
创建一个指定名称的节点
3
public Text createTextNode(String data)
普通
创建一个文本内容节点
4
Element createElement(String tagName)throws DOMException
普通
创建一个节点元素
5
public Attr createAttribute(String name)throws DOMException
普通
创建一个节点元素
  • Node:此接口在整个 DOM 树中具有剧组轻重的地位,DOM 操作的核心接口中有很大一部分是
    从 Node 接口继承过来的。例如,Document、Element、Atrr 等接口

  Node 接口的常用方法

No.
方 法
类 型
描 述
1 Node appendChild(Node newChild)throws DOMException 普通 在当前节点下增加一个新节点
1 Node appendChild(Node newChild)throws DOMException 普通 在当前节点下增加一个新节点
1 Node appendChild(Node newChild)throws DOMException 普通 在当前节点下增加一个新节点
1 Node appendChild(Node newChild)throws DOMException 普通 在当前节点下增加一个新节点
1 Node appendChild(Node newChild)throws DOMException 普通 在当前节点下增加一个新节点
1 Node appendChild(Node newChild)throws DOMException 普通 在当前节点下增加一个新节点
1 Node appendChild(Node newChild)throws DOMException 普通 在当前节点下增加一个新节点

转载于:https://www.cnblogs.com/xpwi/p/9902741.html

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值