DOM操作HTML（JS加强）

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接口的特性和方法

特性和方法	返回类型	说明
nodeName	String	节点的名称：根据节点的类型而定义
nodeValue	String	节点的值：根据节点的类型而定义
nodeType	Number	节点的类型常量之一
ownerDocument	Document	指向这个节点所属的文档
firstChild	Node	指向在childNodes列表中的第一个节点
lastChild	Node	指向在childNodes列表中的最后一个节点
childNodes	NodeList	所有子节点的列表
parentNode	Node	返回一个给定节点的父节点
previousSibling	Node	指向前一个兄弟节点；如果这个节点就是第一个节点，那么该值为null
nextSibling	Node	指向后一个兄弟节点；如果这个节点就是最后一个节点，那么该值为null
hasChildNodes	Boolean	当childNodes包含一个或多个节点时，返回真
attributes	NamedNodeMap	包含了代表一个元素的特性的Attr对象；仅用于Element节点
appendChild(node)	Node	将node添加到childNodes的末尾
removeChild（node）	Node	从childNodes中删除node
replaceChild（newnode,oldnode）	Node	将childNodes中的oldNode替换成newNode
insertBefore（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      大写的标签名称     属性名称            #textnodeType       1               2               3nodeValue      null            属性的值            文本的内容* 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" οnfοcus="run()" οnblur="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" οnclick="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="全选" οnclick="selAll()"/><input type="button" value="全不选" οnclick="selNo()"/><input type="button" value="反选" οnclick="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" οnchange="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" οnmοuseοver="mouseovertest();"                     οnmοuseοut="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="添加附件" οnclick="addFile();"></form></body></html>

（3）加载与卸载案例

<html><head><script Language="JavaScript">function loadform(){   alert("这是一个自动装载例子!");}function unloadform(){   alert("这是一个卸载例子!");}</script></head><body οnlοad=“loadform()” οnbefοreunlοad=“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" οnblur="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" οnkeypress="submitform(event);"/>
</form>
</body>
</html>