版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
《Web应用技术》物联网Web应用技术项目四
JavaScript编程任务四
门禁远程控制程序设计JavaScript对象JavaScript基本内置对象回顾JavaScript计时事件JavaScript基本存储机制1.如何获当前门的开关状态？2.如何在表格中插入和删除新行?任务引入任务描述:门禁远程控制页面设计与程序编写任务教学目标：了解HTMLDOM的含义掌握DOMHTML的使用掌握DOMCSS的使用掌握DOM事件的使用掌握DOM节点的使用任务概要教学内容HTMLDOM简介HTMLDOM操作DOM事件DOM节点操作一二三四门禁远程控制页面设计五HTMLDOM简介知识点一当网页被加载时，浏览器会创建页面的文档对象模型（DocumentObjectModel），作为HTML和XML文档的编程接口。HTMLDOM定义了访问和操作HTML文档的标准方法。HTMLDOMHTMLDOMHTMLDOM定义了所有HTML元素的对象和属性，以及访问它们的方法。换言之，HTMLDOM是关于如何获取、修改、添加或删除
HTML元素的标准。HTMLDOMDOM以树结构表达HTML文档（一）HTMLDOM节点在HTMLDOM中，所有事物都是节点。DOM是被视为节点树的HTML。整个文档是一个文档节点每个HTML元素是元素节点HTML元素内的文本是文本节点每个HTML属性是属性节点注释是注释节点定义JavaScript对象可以跨越多行，空格跟换行不是必须的。1.DOM节点（一）HTMLDOM节点HTMLDOM将HTML文档视作树结构，这种结构被称为节点树。2.HTMLDOM节点树根节点节点树中的节点彼此拥有层级关系。常用父（parent）、子（child）和同胞（sibling）等术语来描述。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。（一）HTMLDOM节点HTMLDOM将HTML文档视作树结构，这种结构被称为节点树。2.HTMLDOM节点树在节点树中，顶端节点被称为根（root）。每个节点都有父节点、除了根（没有父节点）。一个节点可拥有任意数量的子节点。同胞是拥有相同父节点的节点根节点（一）HTMLDOM节点2.HTMLDOM节点树<html><head><metacharset="utf-8"><title>物联网专业</title></head><body><h1>物联网识别技术课程</h1><p>条码识别</p>
</body></html>根节点子节点父节点（二）HTMLDOM方法和属性JavaScript（以及其他编程语言）对HTMLDOM进行访问。所有HTML元素被定义为对象，而编程接口则是对象方法和对象属性。HTMLDOM方法是可以在节点（HTML元素）上执行的动作（如添加或修改元素）。HTMLDOM属性是可以在节点（HTML元素）设置和修改的值（如节点的名称或内容）。（二）HTMLDOM方法和属性一些常用的HTMLDOM方法：getElementById(id)获取带有指定id的节点（元素）appendChild(node)插入新的子节点（元素）getElementsByTagName()返回包含带有指定标签名的所有元素的节点列表（集合/节点数组）。getElementsByClassName()返回包含带有指定类名的所有元素的节点列表。removeChild() 删除子节点。replaceChild() 替换子节点。insertBefore() 在指定的子节点前面插入新的子节点。createAttribute() 创建属性节点。createElement() 创建元素节点。createTextNode() 创建文本节点。getAttribute() 返回指定的属性值。setAttribute() 把指定属性设置或修改为指定的值。1.HTML方法（二）HTMLDOM方法和属性属性是节点（HTML元素）的值，可以获取或设置。一些常用的HTMLDOM属性：innerHTML-节点（元素）的文本值nodeName-节点（元素）的名称nodeValue-节点（元素）的值nodeType-节点（元素）的类型parentNode-节点（元素）的父节点childNodes-节点（元素）的子节点attributes-节点（元素）的属性节点2.HTML属性（二）HTMLDOM方法和属性属性是节点（HTML元素）的值，可以获取或设置。一些常用的HTMLDOM属性：innerHTML-节点（元素）的文本值nodeName-节点（元素）的名称nodeValue-节点（元素）的值nodeType-节点（元素）的类型parentNode-节点（元素）的父节点childNodes-节点（元素）的子节点attributes-节点（元素）的属性节点2.HTML属性用于获取或替换HTML元素的内容：vartxt=document.getElementById
("intro").innerHTML;方法属性（二）HTMLDOM方法和属性属性是节点（HTML元素）的值，可以获取或设置。一些常用的HTMLDOM属性：innerHTML-节点（元素）的文本值nodeName-节点（元素）的名称nodeValue-节点（元素）的值nodeType-节点（元素）的类型parentNode-节点（元素）的父节点childNodes-节点（元素）的子节点attributes-节点（元素）的属性节点2.HTML属性nodeName属性规定节点的名称：nodeName是只读的；元素节点的nodeName与标签名相同；属性节点的nodeName与属性名相同；文本节点的nodeName始终是#text；文档节点的nodeName始终是#document；（二）HTMLDOM方法和属性属性是节点（HTML元素）的值，可以获取或设置。一些常用的HTMLDOM属性：innerHTML-节点（元素）的文本值nodeName-节点（元素）的名称nodeValue-节点（元素）的值nodeType-节点（元素）的类型parentNode-节点（元素）的父节点childNodes-节点（元素）的子节点attributes-节点（元素）的属性节点2.HTML属性nodeValue属性规定节点的值：元素节点的nodeValue是undefined或null文本节点的nodeValue是文本本身属性节点的nodeValue是属性值。（二）HTMLDOM方法和属性属性是节点（HTML元素）的值，可以获取或设置。一些常用的HTMLDOM属性：innerHTML-节点（元素）的文本值nodeName-节点（元素）的名称nodeValue-节点（元素）的值nodeType-节点（元素）的类型parentNode-节点（元素）的父节点childNodes-节点（元素）的子节点attributes-节点（元素）的属性节点2.HTML属性nodeType属性返回节点的类型：nodeType是只读的比较重要的节点类型如下：元素类型NodeType元素1属性2文本3注释8文档9（二）HTMLDOM方法和属性访问HTML元素等同于访问节点。可以不同的方式来访问HTML元素：
getElementById()方法通过id找到HTML元素getElementsByTagName()方法通过标签名找到HTML元素getElementsByClassName()方法通过类名找到HTML元素3.HTMLDOM访问通过id查找HTML元素：查找id="intro"元素：
varx=document.getElementById("intro")；（二）HTMLDOM方法和属性访问HTML元素等同于访问节点。可以不同的方式来访问HTML元素：getElementById()方法通过id找到HTML元素
getElementsByTagName()方法通过标签名找到HTML元素getElementsByClassName()方法通过类名找到HTML元素3.HTMLDOM访问通过标签名查找HTML元素：查找id="main"元素中的所有<p>元素：
varx=document.getElementById("main");
vary=x.getElementsByTagName("p");（二）HTMLDOM方法和属性访问HTML元素等同于访问节点。可以不同的方式来访问HTML元素：getElementById()方法通过id找到HTML元素getElementsByTagName()方法通过标签名找到HTML元素
getElementsByClassName()方法通过类名找到HTML元素3.HTMLDOM访问通过类名查找HTML元素：查找class="intro"的元素：varx=document.getElementsByClassName("intro");HDMLDOM操作知识点二HDMLDOM操作HTMLDOM允许JavaScript改变HTML元素的内容。改变HTML输出流；改变HTML内容；改变HTML属性。（一）改变HTML输出流JavaScript能够创建动态的HTML内容。document.write()可用于直接向HTML输出流写内容。在文档（DOM）加载完成之后使用document.write()，会覆盖该文档。输出当前的日期：SunJul26202017:26:31GMT+0800（中国标准时间）。document.write(Date());（二）改变HTML内容修改HTML内容的最简单的方法是使用innerHTML属性。改变HTML元素的内容，使用如下语法：document.getElementById(id).innerHTML=新的HTML内容（三）改变HTML属性改变HTML元素的属性，使用如下语法：：document.getElementById(id).attribute=新属性值<body>
<imgid="image"src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script></body>（四）改变HTML样式（DOMCSS）HTMLDOM允许JavaScript改变HTML元素的样式。改变HTML元素的样式，使用如下语法：document.getElementById(id).perty=新样式<body>
<pid="p1">HelloWorld!</p>
<pid="p2">HelloWorld!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script></body>DOM事件知识点三DOM事件HTMLDOM中JavaScript能够对HTML事件做出反应。可以在事件发生时执行JavaScript代码。DOM事件（一）事件响应HTMLDOM常用事件：当用户点击鼠标时当网页已加载时当图像已加载时当鼠标移动到元素上时当输入字段被改变时当提交HTML表单时当用户触发按键时实例：当用户在<h1>元素上点击时，会改变其内容：<!DOCTYPEhtml><html>
<body>
<h1onclick="this.innerHTML='Ooops!'">点击文本!</h1>
</body></html>（二）HTMLDOM分配事件<buttononclick="displayDate()">点这里</button>HTMLDOM允许使用JavaScript向HTML元素分配事件；HTMLDOM可以使用事件属性分配事件。<script>
document.getElementById("myBtn").onclick=function(){displayDate()};</script>名为
displayDate的函数被分配给id="myBtn"的HTML元素。按钮点击时Javascript函数将会被执行。（三）onload和onunload事件onload和onunload事件会在用户进入或离开页面时被触发。onload事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。//onload和onunload事件可用于处理cookie：<bodyonload="checkCookies()">（四）onchange事件onchange当输入字段被改变时；onchange事件常结合对输入字段的验证来使用。//当用户改变输入字段的内容时，会调用upperCase()函数：<inputtype="text"id="fname"onchange="upperCase()">（五）onmouseover和onmouseout事件onmouseover事件可用于在用户的鼠标移至HTML元素上方；onmouseout事件可用于在用户的鼠标移出元素时触发函数。<divonmouseover="mOver(this)"onmouseout="mOut(this)"style="background-color:#D94A38;width:120px;height:20px;padding:40px;">
MouseOverMe</div><script>
functionmOver(obj){
obj.innerHTML="ThankYou"
}
functionmOut(obj){
obj.innerHTML="MouseOverMe"
}</script>（六）onmousedown、onmouseup以及onclick事件onmousedown,onmouseup以及onclick构成了鼠标点击事件的所有部分。当点击鼠标按钮时，会触发onmousedown事件；当释放鼠标按钮时，会触发onmouseup事件；当完成鼠标点击时，会触发onclick事件。DOM节点操作知识点四（一）创建子节点
创建子节点使用appendChild()；创建子节点步骤：先创建一个元素；在已存在的父节点元素中添加子节点。创建的子节是被添加到了父节点的尾部。创建子节点<script>varpara=document.createElement("p");varnode=document.createTextNode("这是一个新的段落。");para.appendChild(node);varelement=document.getElementById("div1");element.appendChild(para);</script>（二）插入新的HTML元素（节点）开始位置或指定位置添加新元素，可以使用insertBefore()方法；插入子节点步骤：先创建一个元素；在已存在的父节点元素中插入子节点。插入子节点<script>varpara=document.createElement("p");
varnode=document.createTextNode("这是一个新的段落。");para.appendChild(node);
varelement=document.getElementById("div1");varchild=document.getElementById("p1");element.insertBefore(para,child);</script>//把para节点插入到child之前（三）移除已存在的元素（节点）移除节点使用removeChild()方法；移除节点步骤：要移除一个元素，需要知道该元素的父元素；从父元素中移除子元素。移除节点<script>
varparent=document.getElementById("div1");
varchild=document.getElementById("p1");
parent.removeChild(child);</script>（四）替换HTML元素-replaceChild()替换HTML元素使用replaceChild()；替换节点步骤：需要知道该元素的父元素；知道被替换的元素从父元素中移除子元素。移除节点<script>
varpara=document.createElement("p");
varnode=document.createTextNode("这是一个新的段落。");
para.appendChild(node);
varparent=document.getElementById("div1");
varchild=
document.getElementById("p1");
parent.replaceChild(para,child);</script>门禁远程控制页面设计知识点五（一）设计门禁远程控制程序js源代码1.创建JS源码文件在项目资源管理器中选择刚才新建的项目，依次点击“文件”、“新建”，并选择“js文件”（按下Ctrl+N）。（一）设计门禁远程控制程序js源代码//onload:网页DOM事件--表示网页加载完毕window.onload=function(){ 。。。。。。。}2.添加window.onload事件绑定事件处理函数添加window.onload()在当HTML页面完全载入后（包括图片、css文件等）执行脚本代码。（一）设计安防报警日志js源代码doorControl.onclick=function(){varcState=doorControl.innerHTML;if(cState=="开启"){ doorControl.innerHTML="关闭"; //修改图片的src属性 imgDom.src="../img/door_open.png";}else{ doorControl.innerHTML="开启"; imgDom.src="../img/door_close.png";}}3.添加doorControll.onclick点击事件实现开关门操作添加doorControl.onclick=function()函数，判断门状态，并切换图片和开关门按钮。（一）设计安防报警日志js源代码functiontableAdd(){ //获取到table的最后一行html,通过querySelector（按选择器获取）获取静态节点 vartable=document.querySelector("table"); vartr=table.rows[table.rows.length-1]; varnewTr=tr.cloneNode(true); table.appendChild(newTr); varlength=table.rows.length; if(length==6){ vartableAdd=document.querySelector("#tableAdd"); tableAdd.style.display="none"; } console.log("tableadd",length);}4.添加table表格新行添加doorControl.onclick=function()函数，判断门状态，并切换图片和开关门按钮。（一）设计安防报警日志js源代码 if(index>1){ //vartable=document.querySelector("table"); document.getElementById("table").deleteRow(index)； vartable=document.querySelector("table"); varlength=table.rows.length; if(length<6){
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 河道截污及生态修复施工组织设计
- 烧结砖路面施工方案及技术措施
- 研磨作业粉尘净化系统安装调试施工方案及技术措施
- 2026年建筑绿化施工合同
- 布袋式焊烟净化器安装调试施工方案及技术措施
- 产房发生永久起搏器故障时的应急演练脚本
- 楼宇亮化工程施工方案
- 医院孕产妇和新生儿危急重症救治中心工作汇报
- 中级制冷工考试题及答案
- 2026年福建厦门市思明区市场监督管理局补充非在编辅助岗人员2人模拟试卷及答案详解【各地真题】
- 风电场道路分包合同
- 2026湖北交投襄阳高速公路运营管理有限公司一线工作人员招聘考试参考题库及答案详解
- DB11-T 1610-2026 民用建筑信息模型深化设计建模细度标准
- 《中华人民共和国生态环境法典》深度培训
- 2026年中考语文作文热点：科技、AI主题作文范文
- 设备应急供货保障方案
- 湖北小学生诗词大赛备考试题库400题（三四年级适用）
- 普通诊所污水、污物、粪便处理方案 及周边环境情况说明
- 自动词和他动词课件高考日语一轮复习
- 动物检验检疫学课件
- 反比例函数 单元作业设计
评论
0/150
提交评论