DOM基本使用
基本的DOM方法
document对象,取得节点
getElementById(id)
getElementsByName(name)
getElementsByTagName(tagname)
getAttribute()
setAttribute()
如var elementNode = document.getElementById(“id");
var newImage = document.createElement("img");
newImage.setAttribute("src", "rabbit-hat.gif");
DOM属性
childNodes 任一元素的所有子元素,数组
nodeName 元素节点的名称 返回结果全为大写!
nodeType
nodeValue 文本节点的值,元素节点返回空
firstChild lastChild 孩子节点,node,childNodes[node.childNodes.length-1]
parentNode
nextSibling 下一个兄弟节点
改变网页结构的DOM方法
document.createElement(tagname) 创建新元素节点
node.appendChild(node)
document.createTextNode(text)
node.insertBefore(newNode,targetNode)
node.replaceChild(newChild,oldChild)
node.removeChild(node)
应用,替换一张图片:
1.使用replaceChild()函数
imgParent.replaceChild(newImage, hatImage);
2.直接修改图片的src属性
hatImage.setAttribute("src", "rabbit-hat.gif");
3.使用html DOM方法
hatImage.src = “rabbit-hat.gif”;
button.οnclick=hideRabbit;
DOM测试
<!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>
<script type="text/javascript">
function check(){
//var p=document.getElementById("a");
//var p2=document.getElementsByName("b")[0];
//var p3=document.getElementsByTagName("p")[1];
//alert(p1.getAttribute("id"));
//p.setAttribute("name","abc");
//alert(p.id);
//p.setAttribute("style","color:#FOO");
//节点操作 动态创建
//alert(p.nodeName);//p
//alert(p.nodeType);//1
//alert(p.nodeValue);//null
//alert(p.childNodes[0].nodeValue);//取标签内部值,通用
//alert(p.innerHTML);//get inner value,so easy
//var div=document.getElementById("div");
//var p=document.createElement("p");
//var txt=document.createTextNode("hello");
//p.appendChild(txt);
//div.appendChild(p);
var t=document.getElementById("table");
var txt1=document.createTextNode("AA");
var txt2=document.createTextNode("BB");
var td1=document.createElement("td");
var td2=document.createElement("td");
var tr=document.createElement("tr");
//var tbody=document.createElement("tbody");//ie6兼容
td1.appendChild(txt1);
td2.appendChild(txt2);
tr.appendChild(td1);
tr.appendChild(td2);
t.appendChild(tr);
//tbody.appendChild(tr)
//t.appendChild(tbody);
}
</script>
</head>
<body>
<input type="button" value="button" οnclick="check();" />
<p id="a">hello,world</p>
<p name="b">Hello,DOM</p>
<div id="div">
<table id="table" width="80%">
</table>
</div>
</body>
</html>
实验用,最原始
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>al.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=GB18030">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
function check(){
//定义变量
var req=false;
//firefox chrome safari
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
}
//ie
else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
//判断对象是否为空
if(req){
//打开连接,访问
req.open("GET", "http://localhost:8888/ajax/servlet/HelloServlet", true);
//注册回调函数,没括号,算指向函数的指针
req.onreadystatechange = callback;
//发送请求
req.send(null);
}
//回调函数
function callback(){
//响应内容解析完毕
if(req.readyState==4){
//正常返回值
if(req.status==200){
//alert(req.responseText);
//var div=document.getElementById("div");
//var txt=document.createTextNode(req.responseText);
//div.innerHTML=req.responseText();只能用在网页文件中
//div.appendChild(txt);
var t=document.getElementById("t");
var xml=req.responseXML;
var ids=xml.getElementsByTagName("id");
for(var i=0;i<ids.length;i++){
alert(ids[i]);
}
}
}
}
}
</script>
</head>
<body>
<input type="button" value="button" οnclick="check();">
<table>
<tbody id="t">
</tbody>
</table>
</body>
</html>
HelloServlet.java
package com.neusoft.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class HelloServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/xml");
PrintWriter out = response.getWriter();
StringBuffer buff=new StringBuffer();
//out.println("Hello,ajax!");
buff.append("<data>");
buff.append("<stu>");
buff.append("<id>100</id>");
buff.append("</stu>");
buff.append("<stu>");
buff.append("<id>101</id>");
buff.append("</stu>");
buff.append("<stu>");
buff.append("<id>102</id>");
buff.append("</stu>");
buff.append("</data>");
out.println(buff.toString());
out.flush();
out.close();
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
PrintWriter out = response.getWriter();
out
.println("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">");
out.println("<HTML>");
out.println(" <HEAD><TITLE>A Servlet</TITLE></HEAD>");
out.println(" <BODY>");
out.print(" This is ");
out.print(this.getClass());
out.println(", using the POST method");
out.println(" </BODY>");
out.println("</HTML>");
out.flush();
out.close();
}
}
【实现一个最简单的ajax动态用户名、密码验证模子】
login.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>login.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
function checkId(){
var req=false;
var username=document.getElementsByName("username")[0].value;
if(window.XMLHttpRequest){
req=new XMLHttpRequest;
}
else if(window.ActiveXObject){
req=new ActiveXObject("Microsoft.XMLHTTP");
}
if(req){
req.open("GET", "http://localhost:8888/myajax/servlet/loginIdServlet?username="+username, true);
req.onreadystatechange=callback;
req.send(null);
}
function callback(){
if(req.readyState==4){
if(req.status==200){
var xml=req.responseXML;
var idError=xml.getElementsByTagName("idError")[0].childNodes[0].nodeValue;
var idSpan=document.getElementById("idSpan");
if(idSpan.childNodes.length!=0){
idSpan.removeChild(idSpan.childNodes[0]);
}
var txt=document.createTextNode(idError);
idSpan.appendChild(txt);
//idSpan.value=txt;
}
}
}
}
function checkPwd(){
var req=false;
var password=document.getElementsByName("password")[0].value;
if(window.XMLHttpRequest){
req=new XMLHttpRequest;
}
else if(window.ActiveXObject){
req=new ActiveXObject("Microsoft.XMLHTTP");
}
if(req){
req.open("GET", "http://localhost:8888/myajax/servlet/loginPwdServlet?password="+password, true);
req.onreadystatechange=callback;
req.send(null);
}
function callback(){
if(req.readyState==4){
if(req.status==200){
var xml=req.responseXML;
var pwdError=xml.getElementsByTagName("pwdError")[0].childNodes[0].nodeValue;
var pwdSpan=document.getElementById("pwdSpan");
if(pwdSpan.childNodes.length!=0){
pwdSpan.removeChild(pwdSpan.childNodes[0]);
}
var txt=document.createTextNode(pwdError);
pwdSpan.appendChild(txt);
}
}
}
}
</script>
</head>
<body>
<h1>欢迎光临</h1>
<hr/>
<form>
请输入您的用户名:<input type="text" name="username" οnblur="checkId();"/><span id="idSpan"></span>
<br/><br/>
请输入您的密码 :<input type="password" name="password" οnblur="checkPwd();"/><span id="pwdSpan"></span>
<br/>
<p>
<input type="button" value="登陆" />
<input type="reset" value="重置"/>
</p>
</form>
</body>
</html>
loginIdServlet.java
package com.neusoft.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class loginIdServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/xml");
response.setCharacterEncoding("gb2312");
PrintWriter out = response.getWriter();
StringBuffer buff=new StringBuffer();
String idError=null;
String username=request.getParameter("username");
if(!login(username)){
idError="用户名长度为4到14个字符!";
}
else{
idError="该用户名可用!";
}
buff.append("<idError>");
buff.append(idError);
buff.append("</idError>");
out.println(buff.toString());
out.flush();
out.close();
}
public static boolean login(String username){
boolean log=true;
if(username.length()<4||username.length()>14){
log=false;
}
return log;
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
PrintWriter out = response.getWriter();
out
.println("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">");
out.println("<HTML>");
out.println(" <HEAD><TITLE>A Servlet</TITLE></HEAD>");
out.println(" <BODY>");
out.print(" This is ");
out.print(this.getClass());
out.println(", using the POST method");
out.println(" </BODY>");
out.println("</HTML>");
out.flush();
out.close();
}
}
loginPwdServlet.java
package com.neusoft.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class loginPwdServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/xml");
response.setCharacterEncoding("gb2312");
PrintWriter out = response.getWriter();
StringBuffer buff=new StringBuffer();
String pwdError=null;
String password=request.getParameter("password");
if(!pwd(password)){
pwdError="密码长度必须为6位!";
}
else{
pwdError="该密码可用!";
}
buff.append("<pwdError>");
buff.append(pwdError);
buff.append("</pwdError>");
out.println(buff.toString());
out.flush();
out.close();
}
public static boolean pwd(String password){
boolean pd=true;
if(password.length()!=6){
pd=false;
}
return pd;
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
PrintWriter out = response.getWriter();
out
.println("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">");
out.println("<HTML>");
out.println(" <HEAD><TITLE>A Servlet</TITLE></HEAD>");
out.println(" <BODY>");
out.print(" This is ");
out.print(this.getClass());
out.println(", using the POST method");
out.println(" </BODY>");
out.println("</HTML>");
out.flush();
out.close();
}
}
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<servlet>
<servlet-name>loginIdServlet</servlet-name>
<servlet-class>com.neusoft.servlet.loginIdServlet</servlet-class>
</servlet>
<servlet>
<servlet-name>loginPwdServlet</servlet-name>
<servlet-class>com.neusoft.servlet.loginPwdServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>loginIdServlet</servlet-name>
<url-pattern>/servlet/loginIdServlet</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>loginPwdServlet</servlet-name>
<url-pattern>/servlet/loginPwdServlet</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>