前端复习与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();
        }
    }
}



相关文章
|
4月前
|
XML JSON 前端开发
【Web前端揭秘】XML与JSON:数据界的双雄对决,你的选择将如何改写Web世界的未来?
【8月更文挑战第26天】本文深入探讨了XML和JSON这两种广泛使用的数据交换格式在Web前端开发中的应用。XML采用自定义标签描述数据结构,适用于复杂层次数据的表示,而JSON则以键值对形式呈现数据,更为轻量且易解析。通过对两种格式的示例代码、结构特点及应用场景的分析,本文旨在帮助读者更好地理解它们的差异,并根据实际需求选择最合适的数据交换格式。
63 1
|
4月前
|
Java Spring 容器
彻底改变你的编程人生!揭秘 Spring 框架依赖注入的神奇魔力,让你的代码瞬间焕然一新!
【8月更文挑战第31天】本文介绍 Spring 框架中的依赖注入(DI),一种降低代码耦合度的设计模式。通过 Spring 的 DI 容器,开发者可专注业务逻辑而非依赖管理。文中详细解释了 DI 的基本概念及其实现方式,如构造器注入、字段注入与 setter 方法注入,并提供示例说明如何在实际项目中应用这些技术。通过 Spring 的 @Configuration 和 @Bean 注解,可轻松定义与管理应用中的组件及其依赖关系,实现更简洁、易维护的代码结构。
56 0
|
6月前
|
XML 存储 前端开发
【前端】XML和HTML的区别详解
【前端】XML和HTML的区别详解
148 5
|
7月前
|
XML JSON 前端开发
【Web 前端】XML和JSON的区别?
【4月更文挑战第22天】【Web 前端】XML和JSON的区别?
【Web 前端】XML和JSON的区别?
|
7月前
|
XML 存储 前端开发
【Web 前端】HTML、XHTML、XML 有什么区别?
【4月更文挑战第22天】【Web 前端】HTML、XHTML、XML 有什么区别?
|
XML 存储 JSON
【jquery】前端数据格式:json、xml对比
【jquery】前端数据格式:json、xml对比
132 0
|
XML JavaScript 前端开发
【前端】白天/黑夜主题切换:JS读取XML预设主题实现黑白主题切换
【前端】白天/黑夜主题切换:JS读取XML预设主题实现黑白主题切换
203 0
【前端】白天/黑夜主题切换:JS读取XML预设主题实现黑白主题切换
|
XML 前端开发 数据格式
前端必知词汇:XML
XML(Extensible Markup Language,可扩展标记语言)是一种用于标记电子文件使其具有结构性的标记语言。标记指计算机所能理解的信息符号,通过此种标记,计算机之间可以处理包含各种信息的文章等。语言的可扩展性指定义标记既可以使用国际通用的标记语言,也可以使用如XML的由相关人士自由决定的标记语言。XML有两个前身,SGML和HTML。XML主要用到的有可扩展标记语言、XSL、XBRL和XPath等。
543 0
|
2月前
|
XML 前端开发 Java
讲解SSM的xml文件
本文详细介绍了SSM框架中的xml配置文件,包括springMVC.xml和applicationContext.xml,涉及组件扫描、数据源配置、事务管理、MyBatis集成以及Spring MVC的视图解析器配置。
67 1
|
4月前
|
XML Java 数据格式
Spring5入门到实战------7、IOC容器-Bean管理XML方式(外部属性文件)
这篇文章是Spring5框架的实战教程,主要介绍了如何在Spring的IOC容器中通过XML配置方式使用外部属性文件来管理Bean,特别是数据库连接池的配置。文章详细讲解了创建属性文件、引入属性文件到Spring配置、以及如何使用属性占位符来引用属性文件中的值。
Spring5入门到实战------7、IOC容器-Bean管理XML方式(外部属性文件)