Java复习打卡day40

于 2021-05-06 14:33:57 发布
阅读量77 收藏
点赞数
文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51630304/article/details/116422345
版权
这篇博客主要探讨了XML DOM的相关操作，包括节点的遍历、删除、属性操作、节点创建、复制、替换，以及select和table对象的使用。
摘要由CSDN通过智能技术生成

Java复习打卡day40

XML DOM

介绍

1.基本介绍：
XML DOM 定义了访问和处理xml文档的标准方法。
XML DOM是 XML Document OObject Model 的缩写，即XML文档对象模型。
2.在学习之前，您应当具备的基础：
·HTML/XHTML
·JavaScript
·XML
如果大家在学之前没有掌握这些知识，可以查阅js 手册（网址：https://www.w3school.com.cn/xmldom/dom_intro.asp）
3.什么是DOM？
DOM是W3C（万维网联盟）的推荐标准；
    “DOM 是一个使程序和脚本有能力动态的访问和更新文档的内容、结构以及样式的平台和语言中立的接口。”
W3C DOM 被分为3个不同的姬别和部分：
    1.核心 DOM：用于结构化文档的标准模型
    2.XML DOM：用于 XML文档的标准模型
    3.·HTML DOM：用于 ·HTML文档的标准模型
DOM 定义了所有文档元素的对象和属性，以及访问他们的接口（方法）。

4.什么是 ·HTML DOM?
·HTML DOM定义了所有 HTML 元素的对象和属性，以及访问他们的接口和方法。

5.什么是 XML DOM？
XML DOM是：
·用于 XML的标准对象模型
·用于 XML的标准编程接口
·中立平台和语言
·W3C 的标准
XML DOM定义了xml元素的对象和属性，以及访问他们的方法和接口；
换句话说：
XML DOM是用于获取、更改、添加或删除XML元素的标准。

实现节点的遍历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>XML DOM实现节点的遍历</h1>
    <ul id="uid">
        <li>成龙</li>
        <li>甄子丹</li>
        <li>宋仲基</li>
        <li>赵丽颖</li>
    </ul>
</body>
<script>
    //HTML DOM获取文档中的所有li节点
    var list = document.getElementsByTagName('li');
    console.log('节点的数量为：' + list.length);

    //XML DOM获取文档中的所有节点（通过子节点获取）
    var list1 = document.getElementById('uid').childNodes;
    console.log('节点的数量为：'+list1.length);
    
    //子节点的遍历
    for(var i = 0; i<list1.length; i++){
        // console.log(list1[i].nodeType);//输出为1表示是与元素标签，输出为3表示为文本内容
        if(list1[i].nodeType == 1){//当输出为1时控制台输出
            // console.log(list1[i].innerHTML);//HTML DOM 实现文本的输出
            console.log(list1[i].firstChild.nodeValue);//XML DOM 实现文本的输出
        }
    }
</script>
</html>

实现节点的删除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul,li{margin: 0px;padding: 0px;width: 100%;}
        ul li{list-style: none;background-color: #ddd;}
        ul li:hover{background-color: aqua;}
        ul li.cc{background-color: orange;}
    </style>
</head>
<body>
    <h1>节点的删除</h1>
    <ul id="uid">
        <li>成龙</li>
        <li>甄子丹</li>
        <li>李连杰</li>
        <li>王思聪</li>
        <li>成龙</li>
        <li>甄子丹</li>
        <li>李连杰</li>
        <li>王思聪</li>
    </ul>
    <button onclick="doDel()">删除</button>
</body>
<script>
    //获取所有的li节点 并 绑定点击事件
    var list = document.getElementById('uid').getElementsByTagName('li');
    for(var i = 0; i<list.length; i++){
        list[i].onclick = function(){
            this.setAttribute('class','cc');
        }
    }
    //删除节点函数
    function doDel(){
        //获取当下的所有li节点
        var list1 = document.getElementById('uid').getElementsByTagName('li');

        for(var i = 0; i<list1.length; i++){
            //判断节点是否被点击
            if(list1[i].getAttribute('class') == 'cc'){
                list1[i].parentNode.removeChild(list1[i]);
                i--;//为防止删除list导致索引的变化，所以每次删除完之后将i减小1实现无遗漏。
            }
        }
    }
</script>
</html>

属性的操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>XML DOM 属性操作</h1>
    <a href="http://www.baidu.com" id="aid"></a>
</body>
<script>
    //获取上方的超链接
    var aid = document.getElementById('aid');
    //通过已知的HTML DOM操作实现对属性的基本操作
    console.log(aid.href);
    aid.title = '百度链接';
    //aid.aa = 'b';  为aid添加aa属性不可
    
    //使用XML DOM的方法为aid添加aa属性
    aid.setAttribute('aa','b');
    console.log(aid.getAttribute('aa'));//b
    //XML DOM提供了setAttribute 和 getAttribute方法实现对属性的操作
</script>
</html>

创建节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{list-style: none;}
        ul li{line-height: 30px;width: 100px;background-color: #ddd;margin-top: 2px;}
    </style>
</head>
<body>
    <h1>XML DOM 创建节点</h1>
    <ul id="uid">
        <li>成龙</li>
        <li>李连杰</li>
        <li>王思聪</li>
        <li>甄子丹</li>
    </ul>
    名称：<input type="text" id="iid" name="name" size="10">
    <button onclick="doAdd()">添加</button>
</body>
<script>
    function doAdd(){
        //获取输入框的内容
        var name = document.getElementById('iid').value;
        //获取ul节点
        var ul = document.getElementById('uid');
        //创建文本对象
        var tt = document.createTextNode(name);
        //创建一个li节点对象
        var li = document.createElement('li');
        //将文本对象添加到li节点中
        li.appendChild(tt);
        //将li节点添加到ul节点中
        //ul.appendChild(li);//后追加
        ul.insertBefore(li, ul.firstChild);//前追加
    }
</script>
</html>

节点的复制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #did{width: 400px; height: 300px; border: 1px solid blue;}
        img{width: 80px; border: 2px solid white;}
        img:hover{border: 2px solid red;}
    </style>
</head>
<body>
    <h1>XML DOM 节点的复制</h1>
    <div id="did"></div>
    <div id="mid">
        <img src="./11.jpg">
        <img src="./22.jpg">
        <img src="./33.jpg">
        <img src="./44.jpg">
    </div>
</body>
<script>
    //获取所有的图片
    var ilist = document.getElementById('mid').getElementsByTagName('img');
    //遍历 为每一个图片对象绑定双击事件
    for(var i = 0; i<ilist.length; i++){
        ilist[i].ondblclick = function(){
            //获取did节点
            var did = document.getElementById('did');
            //克隆一份图片节点，并添加到did节点中
            did.appendChild(this.cloneNode());
        }
    }
</script>
</html>

节点的替换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #did{width: 400px;height: 300px; border: 1px solid blue;}
        #did img{width: 400px;}
        #mid img{width: 80px; margin: 2px; border: 2px solid white;}
        #mid img:hover{border: 2px solid red;}
    </style>
</head>
<body>
    <h1>XML DOM 节点的替换</h1>
    <div id="did"><img src="./11.jpg"></div>
    <div id="mid">
        <img src="./11.jpg">
        <img src="./22.jpg">
        <img src="./33.jpg">
        <img src="./44.jpg">
    </div>
</body>
<script>
    //获取did节点下的img图片
    var did = document.getElementById('did');
    //获取mid节点下的所有img图片
    var mlist = document.getElementById('mid').getElementsByTagName('img');
    //遍历为每一个mlist中的img对象添上双击事件
    for(var i = 0; i<mlist.length; i++){
        mlist[i].ondblclick = function(){
            did.replaceChild(this.cloneNode(),did.firstChild);//子节点替换
        }
    }

</script>
</html>

select对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        select{width: 100px;height: 200px;border: 1px solid #ddd;float: left;}
        div{width: 100px;height: 200px;float: left;text-align: center;padding: 50px;}
    </style>
</head>
<body>
    <h1>javascript语言 XML DOM操作--select对象</h1>
    <select id="sid1" size="10" multiple>
        <option value="0">张三</option> 
        <option value="1">李四</option>
        <option value="2">王二</option>
        <option value="3">麻子</option>
        <option value="4">成龙</option>
        <option value="5">甄子丹</option>
        <option value="6">王思聪</option>
        <option value="7">李连杰</option>
    </select>
    <div>
        <button onclick="doMove('sid1','sid2')">>></button>
        <br><br><br><br>
        <button onclick="doMove('sid2','sid1')"><<</button>
    </div>
    <select id="sid2" size="10" multiple></select>
</body>
<script>
    function doMove(d1, d2){
        //获取两个现实框节点对象
        var select1 = document.getElementById(d1);
        var select2 = document.getElementById(d2);

        //获取select1下的所有option节点
        var list = document.getElementsByTagName('option');
        for(var i = 0; i<list.length; i++){
            if(list[i].selected){//判断是否被选中
                list[i].selected = false;
                select2.appendChild(list[i]);//这一步实现了将select1中的元素追加到了select2中。
                i--;//防止产生漏移
            }
        }
    }
</script>
</html>

table对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>JavaScript语言中XML DOM 操作-table对象</h1>
    <table id="tid" width="500px" border="1px">
        <thead>
            <tr>
                <th>姓名</th>
                <th>学号</th>
                <th>性别</th>
                <th>年龄</th>
                <th>删除</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>0</td>
                <td>男</td>
                <td>17</td>
                <td><button onclick="doDel(this)">删除</button</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>1</td>
                <td>男</td>
                <td>18</td>
                <td><button onclick="doDel(this)">删除</button</td>
            </tr>
            <tr>
                <td>小美</td>
                <td>2</td>
                <td>女</td>
                <td>17</td>
                <td><button onclick="doDel(this)">删除</button></td>
            </tr>
        </tbody>
    </table>
    <br><br><br>
    <h2>添加学生信息</h2>
    <form action="#" name="myform" onsubmit="return doAdd()">
        姓名：<input type="text" name="name"><br><br>
        学号：<input type="text" name="sno"><br><br>
        性别：<input type="text" name="sex"><br><br>
        年龄：<input type="text" name="age"><br><br>
        <input type="submit" value="添加"/>
    </form>
</body>
<script>
    function doDel(bt){
        bt.parentNode.parentNode.parentNode.removeChild(bt.parentNode.parentNode);
    }
    function doAdd(){
        //获取表单数据
        var data = new Array();
        data[0] = document.myform.name.value;
        data[1] = document.myform.sno.value;
        data[2] = document.myform.sex.value;
        data[3] = document.myform.age.value;
        //获取表格节点对象
        var tb = document.getElementsByTagName('tbody')[0];
        // 创建表格tr节点
        var tr = document.createElement('tr');
        //遍历data将表单的输入数据传入tr表单节点中
        for(var i = 0; i<data.length; i++){
            //创建td表格节点
            var td = document.createElement('td');
            //创建文本对像
            var text = document.createTextNode(data[i]);
            td.appendChild(text); 
            tr.appendChild(td);
        }
        //添加删除按钮
        var td = document.createElement('td');
        td.innerHTML = '<button οnclick="doDel(this)">删除</button>';
        tr.appendChild(td);
        //将tr添加到tb中
        tb.appendChild(tr);

        //清空表单
        document.myform.reset();

        return false;
    }
</script>
</html>
weixin_51630304
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Java复习打卡day13
weixin_51630304的博客
03-14 124
Java复习打卡day13九大常用类库ObjectsSystemDateCalendarStringDateFormatBigDecimalMathArrays 九大常用类库 Objects System Date Calendar String DateFormat BigDecimal Math Arrays
Java复习打卡day21
weixin_51630304的博客
03-23 123
Java复习打卡day21线程池定长线程池缓存线程池单线程线程池周期性定长线程池Lambda表达式网络编程概述 线程池 线程池概述 为什么会出现线程池的概念？ 其实现场呢个执行任务的阶段分为四个步骤： 1.创建线程 2.创建任务 3.执行任务 4.结束线程 而，在这四个步骤中，真正起作用的是中间的两个，但是他们所消耗的时间却只占了总时间的5%， 所以有大量的时间被创建线程和结束线程占用了，当线程的数量增多时，这样的无用时间浪费只会降低程序的性能 所以就有了线程池的概念。
Java复习打卡day6
weixin_51630304的博客
03-03 112
Java复习打卡day6几个知识点如何退出多重循环图形打印判断用户输入类型数组数组的定义常见定义格式不常见定义格式数组的常见问题求数组的最大值和最小值冒泡法排序 几个知识点 如何退出多重循环 //案例1 class Demo{ public static void main(String[] args){ for(int i = 0; i<10;i++){ for(int j = 0; j<10;j++){ System.out.println(666); if(j
Java复习打卡day11
weixin_51630304的博客
03-11 128
Java复习打卡day11异常处理try catchthrowsthrow快递柜管理编程思想views 异常处理 try catch throws throw 快递柜管理 编程思想 views
Java复习打卡day23
weixin_51630304的博客
03-26 132
Java复习打卡day23XML 语法XML解析方式XML解析XPATH解析JSON介绍JSON语法Gson解析Fastjson解析枚举、注解、反射、内省的前置导学 XML 语法 XML语法 XML的语法非常简单 下面我将用一段代码进行说明。 <?xml version = "1.0" encoding = "UTF-8"?> //文档声明 //下面就是标记了 <books>//根目录 <book id = "1001" gr
Java复习打卡day18
weixin_51630304的博客
03-19 130
Java复习打卡day18flush管道刷新转换流打印流和BufferedReader收集日常日志序列化和反序列化try-with-resource flush管道刷新 import java.io.FileWriter; import java.io.IOException; public class Demo { public static void main(String[] args) throws IOException { FileWriter file = new
Java复习打卡day2
weixin_51630304的博客
02-26 274
这里写目录标题安装JDK1.安装JDK2.配置环境安装eclipse第一个java program定时关机程序 安装JDK 1.安装JDK 先到官网找到安装包下载JDK11的安装包（网址：链接: https://www.oracle.com/java/technologies/javase-jdk11-downloads.html.） 下载完成之后，一直next即可安装完成JDK。 2.配置环境 鼠标右键我的电脑，点击属性进入 双击高级系统设置进入 再双击环境变量进入 再在系统变量工具栏中找到Path
Java复习打卡day24
weixin_51630304的博客
03-27 125
Java复习打卡day24枚举类型概述枚举定义枚举的常用方法枚举接口枚举注意事项注解概述内置注解自定义注解反射概述类加载器与资源目录 枚举类型概述 枚举简介 枚举类型是在JDK1.5之后引进的，在此之前定义一个常量都是：public static final...很难管理。 枚举可以将一些相关的常量放在一起管理，同时它还提供了比常量更多的方法。 枚举类型可以包含很多的常量，例如： 一年的四级： 春、夏、秋、冬； 问题的程度： 轻、重、缓、急 速度的等
Java学习打卡Day18
12-22
Java中的接口是面向对象编程的重要组成部分，它定义了一组方法签名，不包含任何具体实现。在Java学习中，了解接口的多态性及其应用是非常关键的。多态性允许我们用一个父类型的引用来指向子类型对象，这样就可以在不...
小白的20天Java学习打卡day1
12-22
【小白的20天Java学习打卡day1】 学习Java编程的第一步通常是理解基本概念，包括软件的本质、操作系统、编程语言的作用以及如何在Windows系统中进行基础操作。在本篇学习笔记中，我们将探讨这些关键点。 1. **什么...
员工打卡系统_java_java系统_打卡_
10-03
员工打卡系统是一个基于Java语言开发的应用程序，主要用于管理和记录企业员工的上下班打卡情况。在IT行业中，此类系统是企业日常运营的重要组成部分，因为它能够准确地跟踪员工的工作时间，提高人力资源管理效率。...
Java打卡系统源码.zip
05-17
Java打卡系统源码 Java打卡系统源码 Java打卡系统源码 Java打卡系统源码 Java打卡系统源码 Java打卡系统源码 Java打卡系统源码 ...
小白的20天Java学习打卡day2
12-22
太原理工大学机器人团队20天学习打卡day2 学习内容：Java 学习网站：b站 day02 今天的内容比昨天多很多，也更难理解，希望能坚持下去 1、打开DOS命令窗口，执行java HelloWorld,执行原理 java.exe命令会启动JVM JVM...
基于Cocos Creator 3.x开发的Excel转Json格式的插件，同时会根据表格中的字段生成数据结构TypeScr代码
最新发布
08-16
oops-plugin-excel-to-json 是基于 Cocos Creator 3.x 开发的Excel转Json格式的插件，同时会根据表格中的字段生成数据结构TypeScript代码
FIJKPlayer-简介
08-16
FIJKPlayer-简介
vue+cesium+heatmap实现全球热力图
08-16
vue+cesium+heatmap实现全球热力图
印象笔记旧版本Evernote-6.22.36.3870.exe
08-16
这个版本还是不错，没有广告，支持多个账号添加同时打开使用。也能专注于笔记内容，列表和菜单栏都可以调节较小，内容窗口编辑界面也可以调节很大。
java员工打卡签到代码
06-01
Java员工打卡签到代码的实现方式有很多种，以下是其中一种可能的实现方式： ```java import java.util.Date; public class Employee { private String name; private Date lastSignIn; public Employee(String...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值