DOM模型获得元素的值
第一个简单的例子（getElementById()）:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>"> <title>根据ID来访问HTML元素</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><script type="text/javascript">function accessById(){var a = document.getElementById("a").innerHTML;var b = document.getElementById("b").value; //这里要注意Value和value的区别alert(a + "\n" + b);}</script> </head> <body> <div id="a">我是一个学生</div> <textarea rows="3" cols="12" id="b">我要好好学习JAVA</textarea><br> <input type="button" value="访问这两个元素" onclick="accessById();"> </body></html>?第二个根据根节点访问HTML属性<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>"> <title>根据节点关系访问HTML元素</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><style type="text/css">/* 定义改变背景色的CSS，表示被选中的项 */.selected{background-color: #6666ff}</style> </head> <body><ol id="book"><li id="java">JAVA</li><li id="ssh">SSH</li><li id="ajax" value="父节点" onclick="change(currentTarget.parentNode);" /><input type="button" value="第一个" onclick="change(currentTarget.parentNode.firstChild.nextSibling);" /><input type="button" value="上一个" onclick="change(currentTarget.previousSibling.previousSibling);" /><input type="button" value="下一个" onclick="change(currentTarget.nextSibling.nextSibling);" /><input type="button" value="最后一个" onclick="change(currentTarget.parentNode.lastChild.previousSibling);" /><script type="text/javascript">var currentTarget = document.getElementById("ajax");function change(target){alert(target.innerHTML);}</script> </body></html>?访问列表项：<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>"> <title>访问列表项</title> <meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"> </head> <body> <select id="select1" name="select1" size="6"> <option value="java">JAVA</option> <option value="ssh">SSH</option> <option value="ajax">Ajax</option> <option value="xml">XML</option> <option value="ejb">EJB</option> <option value="jsp">JSP</option> </select><br> <input type="button" value="第一个" onclick="change(curTarget.options[0]);" /> <input type="button" value="上一个" onclick="change(curTarget.options[curTarget.selectedIndex - 1]);" /> <input type="button" value="下一个" onclick="change(curTarget.options[curTarget.selectedIndex + 1]);" /> <input type="button" value="最后一个" onclick="change(curTarget.options[curTarget.length - 1]);" /> <script type="text/javascript"> var curTarget = document.getElementById("select1"); function change(target){ alert(target.text); } </script> </body></html>?访问表单域控件：<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>"> <title>访问表单域控件</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"> </head> <body><form action="" id="d" name="form1" method="post"><input name="username" type="text" /><br><input name="password" type="text" /><br><select name="color"><option value="red">红色</option><option value="blue">蓝色</option></select><input type="button" value="第一个" onclick="alert(document.getElementById('d').elements[0].value);" /><input type="button" value="第二个" onclick="alert(document.getElementById('d').elements['password'].value);" /><input type="button" value="第三个" onclick="alert(document.getElementById('d').color.value);" /><input type="button" value="第一个" onclick="alert(document.form1.elements[0].value);" /><input type="button" value="第二个" onclick="alert(document.form1.elements['password'].value);" /><input type="button" value="第三个" onclick="alert(document.form1.color.value);" /></form> </body></html>?