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" class="selected">Ajax</li>
		<li id="xml">XML</li>
		<li id="ejb">EJB</li>
		<li id="jsp">JSP</li>
	</ol>
	<input type="button" 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>
 

你可能感兴趣的:(JavaScript,Ajax,cache,ssh,ejb)