前端复习与xml

简介: 前端复习与xml获取document元素对象获取element元素对象

获取document元素对象

1.getElementById

通过 document.getElementById('id') 方法可以获取具有 id 属性的元素,如:


<div id="elem">
    <p id="text">text</p>
</div>
<script>
    let elem = document.getElementById('text');
    elem.style.color = 'orange';
</script>


2.querySelectorAll

最常用的方法是:elem.querySelectorALL(css),css 是一个 css 选择器:

<body>
    <div>
        <ol>
            <li>a</li>
            <li>b</li>
        </ol>
        <p>b</p>
    </div>
</body>
<script>
    let element = document.querySelectorAll('ol > li:last-child');
    element[0].style.color = 'red';
</script>


3.getElementsBy*

有以下三种方法:

getElementsByTagName(tag):查找具有给定标签的元素;

getElementsByClassName(className):返回具有给定 CSS类 的元素;

getElementsByName(name):返回具有 name 属性的元素,不常用。

注意:

不能漏了s

返回值为一个 集合


获取element元素对象

1.getElementByID(id)

通过对元素的document.getElementByID("divid"),这是DOM一个基础的访问页面元素的方法.如:

<div id="divid">测试</div>
<script language="javascript">
var div=document.getElementByID("divid");
alert (div.nodeName); //显示元素名
</script>


如果id在元素中不是唯一的,那么获得的将是第一个ID.

2.getElementsByName(name)

仅用于input radio checkbox等元素,返回名字为name的元素数组

example:

<div name="george"></div>
<input name="george"></div>
<script language=javascript>
var ge=document.getElementsByName("george");
alert (georges.length);  //获取georges个数,对div唔效果
</script>


3.getElementsByTagName(tagname)

返回具有tagname的元素列表数组.处理大的DOM结构会用到它

xml的基本使用


html语言本身是有一些缺陷的 
(1)不能自定义标签 
(2)html本身缺少含义 
(3)html没有真正的国际化
有一个中间过渡语言,xhtml: 
html->xhtml->xml


1.XML的出现解决了程序间数据传输的问题:

比如QQ之间的数据传送,用XML格式来传送数据,具有良好的可读性,可维护性


2.XML可以做配置文件

XML文件做配置文件可以说非常普遍,比如我们的Tomcat服务器的server.xml,web.xml。再比如我们的structs中的structs-config.xml文件,和hibernate的hibernate.cfg.xml等等。


3.XML可以充当小型的数据库

XML文件可以做小型数据库,也是不错的选择,我们程序中可能用到一些经常要人工配置的数据,如果放在数据库中读取不合适(因为这会增加维护数据库的工作),则可以考虑直接用XML来做小型数据库。这种方式直接读取文件显然要比读数据库快。比如msn中保存用户聊天记录就是用XML文件。


入门案例:用XML来记录一个班级信息。


<?xml version="1.0" encoding="gb2312"?>
<class>
    <stu id="001">
        <name>谢鹏超</name> 
        <sex>男</sex>
        <age>20</age>
    </stu>  
    <stu id="002">
        <name>xpc</name>    
        <sex>女</sex>
        <age>21</age>
    </stu>
</class>


4.xml文件的解析

这里只是简单的提一下关于xml文件的解析,如:

package com.xinsi.qi.utils;
import org.dom4j.Document;
import org.dom4j.Element;
import org.dom4j.Node;
import org.dom4j.io.SAXReader;
import java.io.File;
import java.util.List;
public class Dom4jXml {
    public void test(){
        try {
            File inputFile = new File("tomcat/main/web.xml");
            SAXReader reader = new SAXReader();
            Document document = reader.read(inputFile);
            System.out.println("Root element :"+document.getRootElement().getName());
            Element classElement = document.getRootElement();
            List<Node> nodes = document.selectNodes("/class/part[@id='02']");
            System.out.println("--------------------");
            for (Node node:nodes){
                System.out.println("标签名=:"+node.getName());
                System.out.println("姓名:"+node.selectSingleNode("name").getText());
                System.out.println("年龄:"+node.selectSingleNode("age").getText());
                System.out.println("性别:"+node.selectSingleNode("sex").getText());
            }
        } catch (Exception e1) {
            e1.printStackTrace();
        }
    }
}



相关文章
|
28天前
|
XML 存储 前端开发
【前端】XML和HTML的区别详解
【前端】XML和HTML的区别详解
29 5
|
2月前
|
XML JSON 前端开发
【Web 前端】XML和JSON的区别?
【4月更文挑战第22天】【Web 前端】XML和JSON的区别?
【Web 前端】XML和JSON的区别?
|
2月前
|
XML 存储 前端开发
【Web 前端】HTML、XHTML、XML 有什么区别?
【4月更文挑战第22天】【Web 前端】HTML、XHTML、XML 有什么区别?
|
9月前
|
XML 搜索推荐 前端开发
前端 Website 的 sitemap.xml 文件和搜索引擎优化
前端 Website 的 sitemap.xml 文件和搜索引擎优化
|
XML 存储 JSON
【jquery】前端数据格式:json、xml对比
【jquery】前端数据格式:json、xml对比
105 0
|
XML JavaScript 前端开发
【前端】白天/黑夜主题切换:JS读取XML预设主题实现黑白主题切换
【前端】白天/黑夜主题切换:JS读取XML预设主题实现黑白主题切换
178 0
【前端】白天/黑夜主题切换:JS读取XML预设主题实现黑白主题切换
|
XML 前端开发 数据格式
前端必知词汇:XML
XML(Extensible Markup Language,可扩展标记语言)是一种用于标记电子文件使其具有结构性的标记语言。标记指计算机所能理解的信息符号,通过此种标记,计算机之间可以处理包含各种信息的文章等。语言的可扩展性指定义标记既可以使用国际通用的标记语言,也可以使用如XML的由相关人士自由决定的标记语言。XML有两个前身,SGML和HTML。XML主要用到的有可扩展标记语言、XSL、XBRL和XPath等。
510 0
|
20天前
|
XML Java 数据格式
java创建xml文件内容
java创建xml文件内容
18 0
|
20天前
|
XML Java 数据格式
java解析xml文件内容
java解析xml文件内容
20 0
|
13天前
|
XML Java 数据库
配置applicationContext.xml文件
配置applicationContext.xml文件