DOM操作HTML（JS加强）

来源：互联网发布：句读知不知是什么意思编辑：程序博客网时间：2024/05/01 05:43

DOM简介和解析HTML

DOM 文档对象类型 Document Object Model

文档：标记型文档（HTML/XML）

对象：封装属性和行为（方法）

模型：共同特征的体现。

DOM解析HTML

通过DOM的方法，把HTML全部(元素（标签）、文本、属性）都封装成了对象。

DOM想要操作的标记型文档先解析。（解析器）

DOM解析HTML（浏览器就可以解析HTML）

DOM的三个级别和DHTML的介绍

DOM的模型有三种：

DOM级别一：将HTML文档封装成对象。

DOM级别二：在级别一的基础上增添新的功能，例如：对于事件和CSS样式的支持。

DOM级别三：支持XML1.0的一些新特性。

DHTML

动态的HTML，它不是一门语言，是多项技术综合体的简称。

包括HTML，CSS，DOM，JavaScript。

这四种语言的职责：

HTML：负责提供标签，封装数据，这样便于操作数据。

CSS：负责提供样式，对标签中的数据进行样式定义。

DOM：负责将标签及其内容解析，封装成对象，对象中具有属性和行为。

JavaScript：负责提供程序设计语言，对页面中的对象进行逻辑操作。

BOM和HTML DOM关系图

Node接口的特性和方法

特性和方法返回类型说明nodeNameString节点的名称：根据节点的类型而定义nodeValueString节点的值：根据节点的类型而定义 nodeTypeNumber节点的类型常量之一ownerDocumentDocument指向这个节点所属的文档firstChildNode指向在childNodes列表中的第一个节点lastChildNode指向在childNodes列表中的最后一个节点childNodesNodeList所有子节点的列表parentNodeNode返回一个给定节点的父节点previousSiblingNode指向前一个兄弟节点；如果这个节点就是第一个节点，那么该值为nullnextSiblingNode指向后一个兄弟节点；如果这个节点就是最后一个节点，那么该值为nullhasChildNodesBoolean当childNodes包含一个或多个节点时，返回真attributesNamedNodeMap包含了代表一个元素的特性的Attr对象；仅用于Element节点appendChild(node)Node将node添加到childNodes的末尾removeChild（node）Node从childNodes中删除nodereplaceChild（newnode,oldnode）Node将childNodes中的oldNode替换成newNodeinsertBefore（newNode, refnode）Node在childNodes中的refnode之前插入newnode

Document对象

每个载入浏览器的HTML文档都会成为Document对象。

常用属性：

all[] 提供对文档中所有HTML元素的访问 FF不支持
forms[] 返回对文档中所有Form对象引用。
body 提供提供对<body>元素的直接访问

常用方法：

getElementById() 返回对拥有指定id的第一个对象的引用。
getELementsByName() 返回带有指定名称的对象集合。
getELementsByTagName() 返回带有指定标签名的的对象集合。
write()向文档写HTML表达式或JavaScript代码。

Document对象练习

在无序列表<ul>中添加<li>条目

思路：

有HTML的文档，在内存中首先存在DOM树型结构。
创建标签对象（元素对象）。
创建文本对象。
把文本对象添加标签对象的内部。
最后把标签对象添加到ul对象中。

方法（网页制作文档）

createElement("li") 创建元素对象。
createTextNode("文本内容") 创建文本对象。
appendChild(node) 添加子节点。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body><input type="text" id="nameId" value="zhangsan"/><br/><input type="text" name="username" value="zhaosi"/><br/><input type="text" name="username" value="wangwu"/><br/><input type="text" name="username" value="ermazi"/><br/></body><script type="text/javascript">/* getElementById("id的值");（经常使用的）通过元素的id的属性获取元素（标签）对象。getElementsByName("name属性值");通过名称获取元素对象的集合（返回数组）getElementsByTagName("标签名称");通过标签名称获取元素对象的集合（返回数组）*/var input = document.getElementById("nameId");// alert(input.value);var inputs = document.getElementsByName("username");// alert(inputs.length);for(var i=0;i<inputs.length;i++){var input1 = inputs[i];// alert(input1.value);}var inputs2 = document.getElementsByTagName("input");// alert(inputs2.length);</script></html>

添加元素实例：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body><ul><li>北京</li><li>上海</li><li>广州</li></ul></body><script type="text/javascript">/* 需求：在ul无序列表下，添加一个子节点。<li>深圳</li>*/// 创建元素对象var li = document.createElement("li");// 创建文本的对象var text = document.createTextNode("深圳");// 把文本对象添加到元素对象下面，作为子节点li.appendChild(text);// 获取ulvar ul = document.getElementsByTagName("ul")[0];// 把元素对象添加ul的下面，作为子节点ul.appendChild(li);</script></html>

Element对象

操纵Element对象的属性：

获取属性：getAttribute（name）方法
设置属性：setAttribute（name，value）方法
删除属性：removeAttribute（name）方法

在ELement对象中查找Element对象

在ELement对象的范围内，可以用来查找其他节点的唯一有效方法就是getElementsByTagName（name）而该方法返回的是一个集合。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body><input type="text" id="nameId" value="zhangsan" /><ul id="ulId"><li>北京</li><li>上海</li><li>广州</li></ul></body><script type="text/javascript">/* * 获取元素对象* getAttribute("属性名称");获取属性的值* setAttribute("属性名称","属性的值");设置或者修改属性的值* removeAttribute("属性名称");删除属性* 获取元素下的所有子节点（*****）* ul.getElementsByTagName();*/var input = document.getElementById("nameId");// alert(input.value);// alert(input.getAttribute("value"));// 修改//input.setAttribute("value", "zhaosi");//alert(input.getAttribute("value"));input.removeAttribute("value");//alert(input.getAttribute("value"));// ============================================================================var ul = document.getElementById("ulId");var lis = ul.childNodes;// alert(lis.length);var lis2 = ul.getElementsByTagName("li");alert(lis2.length);</script></html>

注意：在获取Element对象的子ELement对象时不要使用childNodes 因为childNodes包含空格，要使用getElementsByTagName方法。

* 查找标签下的标签
* 例如查找ul标签下的li标签，如果是一组ul列表，那直接可以查找li标签即可，但是如果有多组ul列表，那就不能使用该方法了。
* Node对象提供了属性 childNodes 可以获取指定标签下的所有子节点
* 但是该方法获取到子节点会包含换行符，所以浏览器的兼容性不好，不推荐使用。
***** 推荐使用 getElementsByTagName();
<ul>
<li></li>
<li></li>
</ul>

node的常用属性（节点名称、值和类型）

nodeName：其内容是给定节点的名字

如果是元素节点，nodeName返回这个元素的名称（标签名大写）
如果是属性节点，nodeName返回这个属性的名称（属性名）
如果是文本节点，nodeName返回一个内容为#text的字符串

nodeType：返回一个整数，这个数值代表着给定节点的类型。

Node.ELEMENT_NODE 1 ——元素节点
Node.ATTRIBUTE_NODE 2 —— 属性节点
Node.TEXT_NODE 3 ——文本节点

nodeValue：返回给定节点的当前值（字符串）

如果给定节点是一个属性节点，返回值是这个属性的值。
如果给定节点是一个文本节点，返回值是这个文本节点内容。
如果给定节点是一个元素节点，返回值是null。

注意：想要获取标签中的属性节点可以用
getAttributeNode(“”);方法。
获取获取文本节点，可以采用
当前标签对象的childNodes属性，再取下标位置。
或者直接使用firstNode和lastNode属性。

父节点、子节点和同辈节点

父节点：parentNode

parentNode属性返回的节点永远是一个元素节点，因为只有元素节点才可能包含子节点。
Document节点没有父节点。

子节点

childNodes：获取指定节点的所有子节点集合。
firstChild：获取指定节点的第一个子节点。
lastChild：获取指定节点的最后一个子节点。

同辈节点

nextSibling：返回一个给定节点的下一个兄弟节点。
previousSibling：返回一个给定节点的上一个兄弟节点。

注意：

IE6-8 IE9-10 Chrome FireFox
firstChild 第一个节点 firstElementChild 第一个节点
lastChild最后一个节点、 lastElementChild 最后一个节点
nextSibling 下一同级节点 nextElementSibling 下一同级节点
previousSibling 上一同级节点 previousElementSibling 上一同级节点
Ul + span

节点属性

节点属性attributes是Node接口定义的属性。
节点属性attributes就是节点（特别是元素节点）的属性。
事实上，attributes中包含的是一个节点的所有属性的集合。
attributes.getNameItem()和ELement对象的getAttribute()方法类似。

检测子节点和属性

查看是否存在子节点：hasChildNodes（）。
查看是否存在属性：hasAttributes（）。
即使节点中没有定义属性，其attributes属性仍然有效的，而且长度值为0。同样节点中的childNodes属性也是如此。
当你想知道某个节点是否包含子节点和属性时，可以使用hasChildNodes（）和hasAttributes（）方法。但是如果还想知道该节点中包含多少子节点和属性的话，仍要使用attributes和childNodes属性。
在IE浏览器中，不存在hasAttributes（）方法。

操作DOM节点树

插入节点

appendChild（）方法
insertBefore（new，old）方法
没有insertAfter方法

删除节点：removeChild（）方法

替换节点：replaceChild（new，old）方法

复制节点：cloneNode（boolean）方法其中，参数boolean是判断是否复制子节点。

移动节点：由以下三种方法组合完成

查找节点

getElementById（）：通过节点的id属性，查找对应节点。
getElementsByName（）：通过节点的name属性，查找对应节点。
getElementsByTagName（）：通过节点名称，查找对应节点。

插入节点

appendChild（）方法
insertBefore（）方法

替换节点：replaceChild（）方法

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body><input type="text" id="nameId" value="zhangsan" /><span id="spanId">我是span的区域</span><ul><li>北京</li><li id="sh">上海</li><li>广州</li></ul><ul><li>小时代1</li><li id="xsd2">小时代2</li><li>小时代3</li></ul><hr/><button id="btnId">我是按钮</button><span id="spanId2"></span></body><script type="text/javascript">/* 元素属性文本nodeName大写的标签名称属性名称#textnodeType123nodeValuenull属性的值文本的内容* parentNode获取父节点* childNodes所有子节点* firstChild第一个子节点* lastChild最后一个子节点* nextSibling下一个兄弟节点* previousSibling上一个兄弟节点* appendChild(node)父节点调用，在末尾添加子节点* insertBefore(new,old)父节点调用，在指定节点之前添加子节点* replaceChild(new,old)父节点调用，替换节点* removeChild(node)父节点调用,删除节点* cloneNode(boolean)不是父节点调用,复制节点* boolean：如果是true，复制子节点：如果是false，不复制子节点，默认是falsevar input = document.getElementById("nameId");//alert(input.nodeName);// INPUT//alert(input.nodeType);// 1//alert(input.nodeValue);// nullvar attr = input.getAttributeNode("type");//alert(attr.nodeName);// type//alert(attr.nodeType);// 2//alert(attr.nodeValue);// textvar span = document.getElementById("spanId");var text = span.firstChild;//alert(text.nodeName);// #text//alert(text.nodeType);// 3//alert(text.nodeValue);// 我是span的区域var ul = document.getElementById("ulId");var li = ul.firstElementChild;// alert(li.nodeType);//1// 是否包含子节点// alert(ul.hasChildNodes());// 是否包含属性// alert(ul.hasAttributes());// 点击上海，用小时代2替换上海document.getElementById("sh").onclick = function(){// var sh = document.getElementById("sh");// var xsd2 = document.getElementById("xsd2");// var ul = sh.parentNode;// ul.replaceChild(xsd2, sh);var ul = this.parentNode;var xsd2 = document.getElementById("xsd2");ul.replaceChild(xsd2,this);};// 删除节点document.getElementById("sh").onclick = function(){// this.parentNode.removeChild(this);var sh = document.getElementById("sh");var ul = sh.parentNode;ul.removeChild(sh);};*/// 复制button的按钮，添加到span标签的中间var btn = document.getElementById("btnId");var newbtn = btn.cloneNode(true);var span = document.getElementById("spanId2");span.appendChild(newbtn);</script></html>

innerHTML属性

浏览器几乎都支持该属性，但不是DOM标准的组成部分。
innerHTML属性可以用来读写某给定元素里的HTML内容。
innerHTML属性多与div或span标签配合使用。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body><span id="spanId">这是span的区域</span><span id="spanId2"></span><h3>获取焦点的事件</h3>输入姓名：<input type="text" name="username" onfocus="run()" onblur="run2()"/><span id="uspan"></span><br/>输入密码：<input type="password" name="password" /><span id="pspan"></span></body><script type="text/javascript">/* * innerHTML属性：* 获取文本内容* 设置文本内容* 事件：onclick点击事件onload加载事件onfocus获取焦点事件onblur失去焦点事件var span = document.getElementById("spanId");// alert(span.innerHTML);var span2 = document.getElementById("spanId2");span2.innerHTML = "<font color='red'>这是span的区域2</font>";*/// 提示输入的信息function run(){var uspan = document.getElementById("uspan");uspan.innerHTML = "您只能输入特殊字符";}// 失去焦点的时候// function run2(){// 获取用户输入的姓名// ajax，把用户输入的姓名，传到后台，在后台做匹配的操作，后台处理完成，返回结果。var uspan = document.getElementById("uspan");uspan.innerHTML = "用户名已存在";}</script></html>

实例一：全选练习

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body><input type="checkbox" id="boxId" onclick="selOrNo()"/>全选/全不选<br/><input type="checkbox" name="love" />篮球<br/><input type="checkbox" name="love" />足球<br/><input type="checkbox" name="love" />排球<br/><input type="checkbox" name="love" />冰球<br/><input type="button" value="全选" onclick="selAll()"/><input type="button" value="全不选" onclick="selNo()"/><input type="button" value="反选" onclick="selOth()"/></body><script type="text/javascript">/* * 思路：全选：获取名称是love的所有的input标签循环遍历，为了拿到每一个input标签，同时，设置checked*/// 全选function selAll(){// 获取名称是love的所有的input的标签，返回是数组var inputs = document.getElementsByName("love");// 为了拿到每一个input标签，同时，设置checkedfor(var i=0;i<inputs.length;i++){// 获取每一个input对象var input = inputs[i];// 设置checked属性input.checked = true;}}// 全不选function selNo(){// 获取名称是love的所有的input标识var inputs = document.getElementsByName("love");for(var i=0;i<inputs.length;i++){var input = inputs[i];input.checked = false;}}// 反选function selOth(){// 获取名称是love的所有的input的标签，返回是数组var inputs = document.getElementsByName("love");// 为了拿到每一个input标签，同时，设置checkedfor(var i=0;i<inputs.length;i++){// 获取每一个input对象var input = inputs[i];// 判断，当前的input标签的checked属性，是否是为true，如果是true，设置成false，反之。/* if(input.checked == true){input.checked = false;}else{input.checked = true;} */input.checked = !input.checked;}}// 全选/全不选function selOrNo(){// 获取第一个input对象var box = document.getElementById("boxId");// 判断，判断是否被选中if(box.checked == true){// 调用全选的方法selAll();}else{selNo();}}</script></html>

实例二：下拉列表左右选择

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><style type="text/css">* { margin:0; padding:0; }div.centent {   float:left;   text-align: center;   margin: 10px;}span { display:block; margin:2px 2px;padding:4px 10px; background:#898989;cursor:pointer;font-size:12px;color:white;}</style></head><body><div class="centent"><select multiple="multiple" id="select1" style="width:100px;height:160px;"><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option><option value="4">选项4</option><option value="5">选项5</option><option value="6">选项6</option><option value="7">选项7</option></select><div><span id="add">选中添加到右边>></span><span id="add_all" >全部添加到右边>></span></div></div><div class="centent"><select multiple="multiple" id="select2" style="width: 100px;height:160px;"><option value="8">选项8</option></select><div><span id="remove"><<选中删除到左边</span><span id="remove_all"><<全部删除到左边</span></div></div></body><script type="text/javascript">/* * 思路：把select1的option（被选中），加入到select中。* select标签上有默认值* selected== true，说明被中* 获取select1下面所有的option对象* 先获取select1* 再获取select1下所有的子节点* 循环遍历，拿到每一个，判断selected属性,如果是true，加入select2中。* 双击事件* ondblclick*/// 把左边选中的条目添加到右边document.getElementById("add").onclick = trunRight;// 全不添加到右边document.getElementById("add_all").onclick = function(){// 获取select2var select2 = document.getElementById("select2");// 获取select1var select1 = document.getElementById("select1");// 获取select1下所有的子节点var options = select1.getElementsByTagName("option");// 循环遍历for(var i=0;i<options.length;i++){var option = options[i];// 添加到select2中去select2.appendChild(option);i--;}};// 从右边添加到左边document.getElementById("remove").onclick = trunLeft;// 全不从右边添加到左边document.getElementById("remove_all").onclick = function(){// 获取select2var select2 = document.getElementById("select2");// 获取select1var select1 = document.getElementById("select1");// 获取select2下所有的子节点var options = select2.getElementsByTagName("option");// 循环遍历for(var i=0;i<options.length;i++){var option = options[i];// 添加到select1中去select1.appendChild(option);i--;}};document.getElementById("select1").ondblclick = trunRight;function trunRight(){// 先获取select2节点var select2 = document.getElementById("select2");// 先获取select1对象var select1 = document.getElementById("select1");// 获取select1下所有的子节点var options = select1.getElementsByTagName("option");// 循环遍历，获取每一个for(var i=options.length-1;i>=0;i--){// 获取每一个option对象var option = options[i];// 判断当前的option对象是否被选中（看selected是否为true）if(option.selected == true){// 添加到select2中select2.appendChild(option);// i--;}}}document.getElementById("select2").ondblclick = trunLeft;function trunLeft(){// 先获取select2节点var select2 = document.getElementById("select2");// 先获取select1对象var select1 = document.getElementById("select1");// 获取select2下所有的子节点var options = select2.getElementsByTagName("option");// 循环遍历，获取每一个for(var i=options.length-1;i>=0;i--){// 获取每一个option对象var option = options[i];// 判断当前的option对象是否被选中（看selected是否为true）if(option.selected == true){// 添加到select1中select1.appendChild(option);// i--;}}}</script></html>

实例三：省市联动

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body><select id="select1" onchange="run(this.value)"><option>--请选择--</option><option value="北京">北京</option><option value="河北">河北</option><option value="山东">山东</option><option value="河南">河南</option></select><select id="select2"></select></body><script type="text/javascript">/* * 思路：通过传过来的值，和数组对比，如果匹配成功，获取数组中后面的值（1开始），添加select2中。* 事件：改变事件* onchange* 通过改变事件把值传过来* 区数组中获取值（获取里面的数组0位置的元素），和传过来的值做对比，如果匹配，获取该数组中后面的值。* 添加到select2中。*/var arr = [];arr[0] = new Array("北京","海淀区","昌平区","朝阳区","东城区","西城区","丰台区","大兴区","怀柔区");arr[1] = new Array("河北","石家庄","保定","邯郸","秦皇岛","张家口","唐山","承德","廊坊");arr[2] = new Array("山东","济南","青岛","烟台","威海","潍坊","菏泽","临沂","淄博","济宁","聊城");arr[3] = new Array("河南","郑州","洛阳","信阳","安阳","南阳","开封","商丘","驻马店","平顶山");function run(val){// 获取select2var select2 = document.getElementById("select2");// 先清除掉select2下所有的子节点// 先获取select2下所有的子节点var ops = select2.getElementsByTagName("option");// 循环遍历for(var x=0;x<ops.length;x++){// 获取每一个var op = ops[x];// 删除节点select2.removeChild(op);x--;}// alert(val);// 获取数组的值for(var i=0;i<arr.length;i++){var inarr = arr[i];// 里面的数组0位置的元素var str = inarr[0];// alert(str);// 判断传过来的值和数组的值是否相等if(val == str){// 获取数组后的内容for(var j=1;j<inarr.length;j++){// 除了0位置后的所有元素var instr = inarr[j];// alert(instr);// 添加到select2中// 创建元素对象var option = document.createElement("option");// 创建文本对象var text = document.createTextNode(instr);// 把文本添加到元素的下面option.appendChild(text);// 把元素添加到select2中select2.appendChild(option);}}}}</script></html>

JavaScript常用事件

鼠标移动事件（mousemove/mouseout/mouseover 鼠标移动/鼠标离开/鼠标悬停事件）
鼠标点击事件（click/dbclick/mousedown/mouseup 鼠标单击/双击/按下/按下并弹起）
加载与卸载事件（load/onload）
聚焦与离焦事件（focus/blur）
键盘事件（keydown/keyup/keypress 按下键/按下弹起后/）
提交与重置事件（submit/reset）
选择与改变事件（select/change）

（1）鼠标移动事件

<html>     <script language="JavaScript">        function mouseovertest(){           document.getElementById("info").value = "鼠标在输入框上";}        function mouseouttest(){    document.getElementById("info").value= "鼠标在输入框外";}     </script>     <body>     <input type="text" id="info" onmouseover="mouseovertest();" onmouseout="mouseouttest();"/>     </body></html>

（2）鼠标点击事件

<html>    <script language="JavaScript">        function addFile(){                var file = document.createElement('input');                file.setAttribute('id', 'temp_file');                file.setAttribute('type', 'file');                document.body.appendChild(file); }    </script>    <body>        <form action="uploadFile" method="post">    <input type="button" value="添加附件" onclick="addFile();">        </form>    </body></html>

（3）加载与卸载案例

<html><head><script Language="JavaScript">function loadform(){   alert("这是一个自动装载例子!");}function unloadform(){   alert("这是一个卸载例子!");}     </script></head><body onload=“loadform()” onbeforeunload=“unloadform()”>    <a href=“http://www.itcast.cn”>传智播客</a></body> </html>

（4）聚焦和离焦

<html><script language="JavaScript">function checkDate(){var date1 = document. getElementById("testdate").value;if(date1.match("^\\d{8}$")==null){alert("wrong");}    else{alert("right");}}</script><body>请输入一个八位数字<input type="text" id="testdate" onblur="checkDate();"></body></html>

（4）键盘事件注意：

KeyDown触发后，不一定触发KeyUp，当KeyDown 按下后，拖动鼠标，那么将不会触发KeyUp事件。
KeyPress主要用来捕获数字(注意：包括Shift+数字的符号)、字母（注意：包括大小写）、小键盘等除了F1-12、SHIFT、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock、{菜单键}、{开始键}和方向键外的ANSI字符
KeyDown 和KeyUp 通常可以捕获键盘除了PrScrn所有按键(这里不讨论特殊键盘的特殊键）
KeyPress 只能捕获单个字符
KeyDown 和KeyUp 可以捕获组合键。
KeyPress 可以捕获单个字符的大小写
KeyDown和KeyUp 对于单个字符捕获的KeyValue 都是一个值，也就是不能判断单个字符的大小写。
KeyPress 不区分小键盘和主键盘的数字字符。
KeyDown 和KeyUp 区分小键盘和主键盘的数字字符。
其中PrScrn 按键KeyPress、KeyDown和KeyUp 都不能捕获。

<html><script language="JavaScript">function submitform(e){if(e.keyCode){if (e.keyCode == 13) {document.forms(0).submit();}  }else{    if (e.which == 13) {document.forms(0).submit();}  }           }</script><body>没有按钮的表单，用回车键提交<form action="login">    <input type="text" name="username" onkeypress="submitform(event);"/></form></body></html>

0 0