第一个简单的例子（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>
扫一扫
588
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
