Java复习打卡day40
2024-05-07 04:20:53
Java复习打卡day40
- XML DOM
- 介绍
- 实现节点的遍历
- 实现节点的删除
- 属性的操作
- 创建节点
- 节点的复制
- 节点的替换
- select对象
- table对象
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>
Java复习打卡day40相关推荐
- Java复习打卡day30
Java复习打卡day30 前置 前置导学 HTML语言 HTML介绍 HTML语言的基础语法 常见标签 文本标签 格式化标签 图像标签 超链接标签 表格标签 表单标签 前置 前面我们主要讲述了Jav ...
- Java复习打卡day47
Java复习打卡day47 Mac系统中安装mysql数据库 MySql基础操作 Mysql中的数据类型 Mysql中的字段约束和运算符 Mysql数据库中的表引擎和字符集utf8 Mysql中的DM ...
- 中国海洋大学-信息系统开发(Java)复习
Java复习 OUC_Shizue 1 Java编译器和执行器 Java编译器和执行器是Java语言的两个核心组件,分别用于将Java源代码编译成Java字节码文件和运行Java字节码文件. Java ...
- 合肥师范学院计算机与技术,合肥师范学院计算机科学与技术系JAVA复习提纲
合肥师范学院计算机科学与技术系JAVA复习提纲 (4页) 本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦! 9.9 积分 一. 选择题(10题,20分)二. 填空 ...
- 调整心态，java复习要点总结。
各位好,博主认为调整好心态是一切事情开始的良好基础.无论做任何事情,没有一个沉淀的情绪积累,都不能做到很成功.当完全融入一件事情的时候,学习效率是最高的.所以朋友,请您一定放松心态,不要有紧张的情绪. ...
- Java复习之抽象类和接口
Java复习之抽象类和接口 Java复习之抽象类和接口 什么是抽象类和接口 抽象类与接口的区别 什么情况下使用抽象类或接口 一个demo引起来的对于java方法区堆栈的研究 首先我们需要明白抽象类与接 ...
- java复习第3天---3.1---final关键字、权限修饰符
java复习第3天---3.1---final关键字.权限修饰符 目录 文章目录 1.final 关键字 1.1.修饰类 1.2.修饰成员方法 1.3.修饰成员变量 1.4.修饰局部变量 2.权限修饰 ...
- Java复习面试知识点
Java复习面试知识点 前言: 简要的记录一下学习到的东西,仅供自己查阅和复习方便.希望该文章能对你有帮助,文章学习自博客和b站UP主的教程 集合: 集合简介: Java标准库自带的java.util ...
- 【牛客网java练习错题笔记】 --Java基础打卡day002
[牛客网java练习错题笔记] --Java基础打卡day002 1 根据以下代码段,正确的是 2 在Java中,在同一包内,类Cat里面有个公共方法sleep(),该方法有static修饰,所以可以 ...
最新文章
- MySQL外键设置中的的 Cascade、Restrict、SET NULL 、NO ACTION
- 终端安全工具 gartner 排名
- python使用字典格式化字符串-Python字符串格式方式 %s format()
- 华为与各国政府签订无间谍无后门协议
- Akka之在IoT系统中使用Actor（一）
- 计算机多媒体教室维修登记册,多媒体教学管理制度
- 三维重建5：场景中语义分析/语义SLAM/DCNN-大尺度SLAM
- 拼音缩写是啥意思_NMSL？AWSL？这些拼音缩写到底是啥意思？
- 首批吃螃蟹！35 所高校获批开设「人工智能」本科专业
- 我的linux redhat6.0之路-1.2
- ubuntu挂载移动硬盘出现错误：mount:unknown filesystem type ‘exfat‘
- JAVA 图片压缩及png转jpg
- win7计算机文件夹显示布局,使用Windows7巧妙管理文件夹的图文介绍
- 计算机省二打字,巧用音频转文字，省去打字烦恼
- 复变函数笔记——解析函数、柯西-黎曼方程
- Codeforces 1037E. Trips
- 例子简单了解线程与进程
- DjangoChannels_vue前端搭建简易版的网页聊天功能
- Solidworks模型导入Vrep（CoppeliaSim Edu）
- 计算机成绩0123,12123驾照考试成绩查询入口-12123驾照考试成绩查询分数的教程