| Web（3）JavaScript和HTML的交互 | 您所在的位置：网站首页 › js与客户端的交互是基于事件驱动的 › Web（3）JavaScript和HTML的交互 |
Web（3）JavaScript和HTML的交互
|
1.JS的执行环境：浏览器显示HTML的窗口和JS的Window对象对应。
2.文档对象模型：DOM（DocumentObjectModel）是一种应用程序编程接口（API）,定义了HTML文档和应用程序之间的接口。而且为了实现多种编程语言使用，DOM是一种抽象模型。相应的每种实现DOM的语言都定义了一个针对接口的绑定。DOM规范有一组接口，每个接口对应一个文档树节点类型，定义了对应节点类型关联的对象，方法，属性。JS对DOM的绑定中，元素是对象，数据是属性，操作是方法。
3.访问元素: 方法1：使用通过Window对象的document属性引用的Document对象的forms，elements数组。不建议使用这个方法，因为此时DOM地址是通过文档中的元素地址定义的，如果文档中的元素位置改变，DOM地址就错了。 方法2：使用元素名称，需要元素及包含这个元素的元素都有name特性。 方法3：getElementById方法，因为(id)标识符是唯一的。建议使用。 注意：DOM定位使用id,表单处理使用name特性，所以表单元素常常将这两个特性设置统一的值。
4.事件处理：JS检测浏览器和用户的活动，并提供计算。这些计算是利用事件驱动编程指定的。 事件是一个由浏览器和JS为了响应发生的情况而隐式创建的对象。事件处理程序也是隐式执行的脚本。 事件处理程序连接到事件的过程叫做注册。注册方式有：为标签的属性赋值，将处理地址指配给对象属性。 一些常用的 HTML DOM 方法： getElementById(id) - 获取带有指定 id 的节点（元素） appendChild(node) - 插入新的子节点（元素） removeChild(node) - 删除子节点（元素） 一些常用的 HTML DOM 属性： innerHTML - 节点（元素）的文本值 parentNode - 节点（元素）的父节点 childNodes - 节点（元素）的子节点 attributes - 节点（元素）的属性节点 查找节点： getElementById() 返回带有指定 ID 的元素。 getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。 getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。 增加节点： createAttribute() 创建属性节点。 createElement() 创建元素节点。 createTextNode() 创建文本节点。 insertBefore() 在指定的子节点前面插入新的子节点。 appendChild() 把新的子节点添加到指定节点。 删除节点： removeChild() 删除子节点。 replaceChild() 替换子节点。 修改节点： setAttribute() 修改属性 setAttributeNode() 修改属性节点
之前说过DOM0注册方式有：为标签的属性赋值（无法使用参数），将处理地址指配给对象属性。 //将事件处理脚本指派给事件标签特性 //也可以调用函数作为特性值的字面量字符串 //通过给按钮对象的相关事件属性赋值 document.getElementbyId("myButton").onclick=myButtonHandler; //注意：这个语句必须在处理程序函数和表单元素后，这样JS才能先检测到函数和表单。 这也不是调用函数，只是函数的名称被赋予给属性。
5.处理元素的事件;以简单地注册页面表单校验为例 /* 1. 确定事件 : onfocus 2. 事件要驱动函数 3. 函数要干的事情: 修改span的内容 */ function showTips(spanID,msg){ //首先要获得要操作元素 span var span = document.getElementById(spanID); span.innerHTML = msg; } /* 校验用户名: 1.事件: onblur 失去焦点 2.函数: checkUsername() 3.函数去显示校验结果 */ function checkUsername(){ //获取用户输入的内容 var uValue = document.getElementById("username").value; //对输入的内容进行校验 //获得要显示结果的span var span = document.getElementById("span_username"); if(uValue.length < 6){ //显示校验结果 span.innerHTML = "格式不正确"; return false; }else{ span.innerHTML = "格式正确"; return true; } } /* 密码校验 */ function checkPassword(){ //获取密码输入 var uPass = document.getElementById("password").value; var span = document.getElementById("span_password"); //对密码输入进行校验 if(uPass.length < 6){ span.innerHTML = "格式不正确"; return false; }else{ span.innerHTML = "格式正确"; return true; } } /* 确认密码校验 * */ function checkRePassword(){ //获取密码输入 var uPass = document.getElementById("password").value; //获取确认密码输入 var uRePass = document.getElementById("repassword").value; var span = document.getElementById("span_repassword"); //对密码输入进行校验 if(uPass != uRePass){ span.innerHTML = "两次输入不一致"; return false; }else{ span.innerHTML = ""; return true; } } /* 校验邮箱 * */ function checkMail(){ var umail = document.getElementById("email").value; var flag = checkEmail(umail); var span = document.getElementById("span_email"); //对邮箱输入进行校验 if(flag){ span.innerHTML = "邮箱格式正确"; return true; }else{ span.innerHTML = "邮箱格式不正确"; return false; } } function checkForm(){ var flag = checkUsername() && checkPassword() && checkRePassword() && checkMail(); return flag; } 用户名: 密码: 确认密码: 邮箱: 手机号:
6.DOM2中事件和事件处理程序之间的联系，分为3个阶段。 《1》捕获阶段：事件从根节点沿文档树向下传递，直到目标节点。在传播过程在中，其他节点为该事件注册了事件处理程序，那么事件处理程序将进行检验以确定是否被启用，如果启动就执行。 《2》到达目标节点，进入目标节点阶段，执行事件处理程序（无论是否启动）。 《3》程序结束进入冒泡阶段。事件沿文档树向上传递回到文档节点。在传播过程在中，其他节点为该事件注册了事件处理程序，那么数据处理程序执行（无论是否启动）。 注意：不是所有事件都有冒泡阶段，load，unload就没有，但所有鼠标事件都有。调用stopPropagation方法可以阻止事件传播。
7. DOM2中事件处理程序注册：通过addEventListener方法，该方法定义在EventTarget接口，Document对象所有的继承对象都实现了这个接口。参数：1.事件名称字符串字面量 2.事件处理函数 3.Boolean的值，可以指定是否启动调用的处理程序。 DOM2中事件处理程序删除：通过removeEventListener方法，参数同上。 使用Event对象的currentTarget属性，可以总是引用正在执行的处理程序的对象。如果通过目标节点的对象调用处理程序，currentTarget就是目标节点；如果在捕获，冒泡阶段调用，currentTarget就是调用处理程序的对象，另一个属性target保存对目标节点的引用。
8.canvas元素：用于创建矩形，有三个特性：height，width，id。如果浏览器不支持canvas元素，就会显示它的内容。 在canvas元素上进行绘制需要获取绘制上下文，通过获取该元素DOM地址，然后调用getContext（‘2d’）方法实现，2d表示二维绘制。 canvas元素创建的矩形表面原点在左上角。使用strockRect可以只绘制矩形边框，fillRect可以绘制实心矩形，clearRect可以清除填充。这三个方法有4个参数，前2个表示水平和垂直像素位置，后2个指定矩形宽高。 function drown(){ var dom=document.getElementById("Canvas"); if(dom.getContext){ var context=dom.getContext('2d'); context.fillRect(100,100,200,200); context.clearRect(150,150,100,100); context.strokeRect(180,180,40,40); context.fillRect(195,195,10,10); } }绘制直线，曲线：首先创建路径，然后指定走向。 beginPath创建路径（无参数）。 moveTo方法指定初始点，以水平像素，垂直像素位置作为参数。 lineTo从当前位置绘制直线到两个参数指定的位置。 stroke实际绘制线条。 fill填充绘制的图形。 function draw(){ var dom=document.getElementById("Canvas"); if(dom.getContext){ var context=dom.getContest('2d'); context.beginPath(); context.moveTo(50,150); context.lineTo(100,100); context.lineTo(200,100); context.lineTo(150,150); context.lineTo(50,150); context.stroke(); } }绘制曲线：arc方法，有6个参数，前2个提供弧线的圆心，第三个指定半径，第四个指定角度，第五个是结束角度，第六个是布尔值，true表示逆时针，false表示顺时针进行。 function draw(){ var dom=document.getElementById("myCanvas"); if(dom.getContext){ var context=dom.getContest('2d'); //第一个图形 context.beginPath(); context.arc(200,200,100,0,2*Math.PI,false); context.stroke(); context.beginPath(); context.arc(200,200,50,0,2*Math.PI,false); context.stroke(); //第二个图形 context.beginPath(); context.arc(500,200,50,Math.PI/7,-Math.PI/7,false); context.lineTo(500,200); context.fill(); } }
9.navigator对象：表示正在查看HTML文档的浏览器。浏览器名称储存在appName属性中，版本储存在appVersion属性中。 function navProperties(){ alert(navigator.appName+"\n"+navigator.appVersion); }10.DOM树的遍历和修改： 遍历： parentNode属性保存引用此属性的节点的父节点的DOM地址。 childNodes属性保存引用此属性的节点的子节点的数组。 var nod=document.getElementById("mylist"); var listitems=nod.childNodes.length; document.write(listitems+"");previousSibling属性保存引用此属性的节点的前一个同辈节点的DOM地址。 nextSibling属性保存引用此属性的节点的后一个同辈节点的DOM地址。 firstChild属性保存引用此属性的节点的第一个子节点的DOM地址。 lastChild属性保存引用此属性的节点的最后一个子节点的DOM地址。 nodeType属性保存引用此属性的节点的类型。 修改： insertBefore(newChild,refChild)方法将newChild放到refChild前。 replaceChild(newChild,oldChild)方法将newChild取代oldChild。 removeChild(oldChild)方法将oldChild删除。 appendChild(newChild)方法将在调用此方法的节点的同辈节点列表末尾添加newChild。 |
【本文地址】