春风博客

春天里，百花香...

导航

<2008年4月>
日一二三四五六
303112345
6789101112
13141516171819
20212223242526
27282930123
45678910

统计

公告

MAIL: junglesong@gmail.com
MSN: junglesong_5@hotmail.com

Locations of visitors to this page

常用链接

留言簿(11)

随笔分类(224)

随笔档案(126)

个人软件下载

我的其它博客

我的邻居们

最新随笔

搜索

积分与排名

最新评论

阅读排行榜

评论排行榜

JavaScript常见效果及对DOM的一些操作。

表单鼠标掠过特效
            <table id="TbSort" class="Listing" width=100% align=center>
                <tbody id="todoList">
                    <TR>
                        <TH>Col1</TH>
                        <TH>Col2</TH>
                        <TH>Col3</TH>
                        <TH>Col4</TH>
                        <TH>Col5</TH>
                        <TH>Col6</TH>
                    </TR>
                    <%
                        for(int i=0;i<10;i++){
                            out.print("<tr  onmouseover=\"this.style.backgroundColor='#dddddd'\" onmouseout=\"this.style.backgroundColor='#f5f5f5'\">");
                            out.print("<td>"+i+"</td>");
                            out.print("<td>"+i*2+"</td>");
                            out.print("<td>"+i*3+"</td>");
                            out.print("<td>"+i*4+"</td>");
                            out.print("<td>"+i*5+"</td>");
                            out.print("<td>"+i*6+"</td>");
                            out.print("</tr>");
                        }
                    %>
                </tbody>
            </table>

数字大小变换特效
            <table border=0 width=100% align="center">            
                <tr><td align="center">
                <%
                    for(int i=0;i<10;i++){
                        out.print("<span class='mouseout' onmouseover=\"this.className='mouseover'\" onmouseout=\"this.className='mouseout'\">");
                        out.print("&nbsp;&nbsp;"+i+"&nbsp;&nbsp;");
                        out.print("</span>");
                    }
                %>
                </td></tr>
            </table>

表单字段随焦点变色特效
<!-- 外层表格，比内表格宽，以在左右留出一定空当 -->
            <table style="border-right: 1px solid; border-top: 1px solid; border-left: 1px solid; border-bottom: 1px solid; boder_top: 0px" bordercolor="#236d78" cellspacing="0" cellpadding="0" width="630" align="center" border="0">
                <tr bgcolor="#eaecf5" height="25">
                <td colspan=3>&nbsp;<font face=webdings color=#ff8c00>8</font><b>&nbsp;请填入你的个人信息</b></td>
                </tr>
                <tr bgcolor=#236d78 height=1><td></td></tr>
                <tr bgcolor=#eaecf5 >
                <td bgcolor=#ffffff>
                  <!-- 内置表格，居中,比外表格窄， -->
                  <table width=560 align=center border=0>
                    <tbody>
                      <tr>
                        <td width=70>卡号:</td>
                        <td><input type="text" name="code" onfocus="this.style.backgroundColor='#e6e6e6'" onblur="this.style.backgroundColor='#ffffff'"/><font color=red>&nbsp;(必填)</font></td>
                      </tr>
                      <tr>
                        <td width=70>姓名:</td>
                        <td><input type="text" name="name" onfocus="this.style.backgroundColor='#e6e6e6'" onblur="this.style.backgroundColor='#ffffff'"/><font color=red>&nbsp;(必填)</font></td>
                      </tr>
                      <tr>
                        <td width=70>密码:</td>
                        <td><input type="password" name="password" onfocus="this.style.backgroundColor='#e6e6e6'" onblur="this.style.backgroundColor='#ffffff'"/><font color=red>&nbsp;(必填)</font></td>
                      </tr>
                      <tr>
                        <td width=70>邮件:</td>
                        <td><input type="text" name="email" onfocus="this.style.backgroundColor='#e6e6e6'" onblur="this.style.backgroundColor='#ffffff'"/></td>
                      </tr>
                      <tr>
                        <td width=70>地址:</td>
                        <td><input type="text" name="address" onfocus="this.style.backgroundColor='#e6e6e6'" onblur="this.style.backgroundColor='#ffffff'"/></td>
                      </tr>
                      <tr valign="top">
                        <td>介绍:</td>
                        <td valign="top"><textarea name="intro" rows="10" cols="30" onfocus="this.style.backgroundColor='#e6e6e6'" onblur="this.style.backgroundColor='#ffffff'"/></textarea></td>
                      </tr>           
                      <tr>
                        <td></td>
                        <td><input type="submit" value="提交"/></td>
                      </tr>
                    </tbody>          
                  </table>
                  <!-- 内置表格结束-->
                </td> 
              </tr>
            </table>
            <!-- 外层表格结束 -->

表单点击特效
<!-- 外层表格，比内表格宽，以在左右留出一定空当 -->
            <table style="border-right: 1px solid; border-top: 1px solid; border-left: 1px solid; border-bottom: 1px solid; boder_top: 0px" bordercolor="#236d78" cellspacing="0" cellpadding="0" width="630" align="center" border="0">
                <tr bgcolor="#eaecf5" height="25">
                <td colspan=3>&nbsp;<font face=webdings color=#ff8c00>8</font><b>&nbsp;表单点击特效</b></td>
                </tr>
                <tr bgcolor=#236d78 height=1><td></td></tr>
                <tr bgcolor=#eaecf5 >
                <td bgcolor=#ffffff>
                  <!-- 内置表格，居中,比外表格窄， -->
                  <table width=560 align=center border=0>
                    <tbody>
                      <tr>
                        <td width=70>自动全选:</td>
                        <td><input type="text" name="code" value="2606" onfocus="this.select()"/><font color=red>&nbsp;(必填)</font></td>
                      </tr>
                      <tr>
                        <td width=70>禁止粘贴:</td>
                        <td><input type="text" name="name" onpaste="return false"/><font color=red>&nbsp;(必填)</font></td>
                      </tr>
                      <tr>
                        <td width=70>关闭输入法:</td>
                        <td><input type="text" name="email" style="ime-mode:disabled"/></td>
                      </tr>
                      <tr valign="top">
                        <td>去掉默认的介绍性文字:</td>
                        <td valign="top"><textarea name="intro" rows="10" cols="30" onfocus="if(value=='请输入个人简介'){value=''}" onblur="if(value==''){value='请输入个人简介'}"/>请输入个人简介</textarea></td>
                      </tr>           
                      <tr>
                        <td></td>
                        <td><input type="submit" value="提交"/></td>
                      </tr>
                    </tbody>          
                  </table>
                  <!-- 内置表格结束-->
                </td> 
              </tr>
            </table>
            <!-- 外层表格结束 -->

按回车键切换表单字段焦点
<!-- 外层表格，比内表格宽，以在左右留出一定空当 -->
            <table style="border-right: 1px solid; border-top: 1px solid; border-left: 1px solid; border-bottom: 1px solid; boder_top: 0px" bordercolor="#236d78" cellspacing="0" cellpadding="0" width="630" align="center" border="0">
                <tr bgcolor="#eaecf5" height="25">
                <td colspan=3>&nbsp;<font face=webdings color=#ff8c00>8</font><b>&nbsp;按回车切换焦点</b></td>
                </tr>
                <tr bgcolor=#236d78 height=1><td></td></tr>
                <tr bgcolor=#eaecf5 >
                <td bgcolor=#ffffff>
                  <!-- 内置表格，居中,比外表格窄， -->
                  <table width=560 align=center border=0>
                    <tbody>
                      <tr>
                        <td width=70>卡号:</td>
                        <td><input type="text" name="code" onkeydown="if(event.keyCode==13)event.keyCode=9" onfocus="this.style.backgroundColor='#e6e6e6'" onblur="this.style.backgroundColor='#ffffff'"/><font color=red>&nbsp;(必填)</font></td>
                      </tr>
                      <tr>
                        <td width=70>姓名:</td>
                        <td><input type="text" name="name" onkeydown="if(event.keyCode==13)event.keyCode=9" onfocus="this.style.backgroundColor='#e6e6e6'" onblur="this.style.backgroundColor='#ffffff'"/><font color=red>&nbsp;(必填)</font></td>
                      </tr>
                      <tr>
                        <td width=70>密码:</td>
                        <td><input type="password" name="password" onkeydown="if(event.keyCode==13)event.keyCode=9" onfocus="this.style.backgroundColor='#e6e6e6'" onblur="this.style.backgroundColor='#ffffff'"/><font color=red>&nbsp;(必填)</font></td>
                      </tr>
                      <tr>
                        <td width=70>邮件:</td>
                        <td><input type="text" name="email" onkeydown="if(event.keyCode==13)event.keyCode=9" onfocus="this.style.backgroundColor='#e6e6e6'" onblur="this.style.backgroundColor='#ffffff'"/></td>
                      </tr>
                      <tr>
                        <td width=70>地址:</td>
                        <td><input type="text" name="address" onkeydown="if(event.keyCode==13)event.keyCode=9" onfocus="this.style.backgroundColor='#e6e6e6'" onblur="this.style.backgroundColor='#ffffff'"/></td>
                      </tr>
                      <tr valign="top">
                        <td>介绍:</td>
                        <td valign="top"><textarea name="intro" rows="10" cols="30" onkeydown="if(event.keyCode==13)event.keyCode=9"  onfocus="this.style.backgroundColor='#e6e6e6'" onblur="this.style.backgroundColor='#ffffff'"/></textarea></td>
                      </tr>           
                      <tr>
                        <td></td>
                        <td><input type="submit" value="提交"/></td>
                      </tr>
                    </tbody>          
                  </table>
                  <!-- 内置表格结束-->
                </td> 
              </tr>
            </table>
            <!-- 外层表格结束 -->

按上下键切换表单字段焦点

页面代码：
<!-- 外层表格，比内表格宽，以在左右留出一定空当 -->
            <table style="border-right: 1px solid; border-top: 1px solid; border-left: 1px solid; border-bottom: 1px solid; boder_top: 0px" bordercolor="#236d78" cellspacing="0" cellpadding="0" width="630" align="center" border="0">
                <tr bgcolor="#eaecf5" height="25">
                <td colspan=3>&nbsp;<font face=webdings color=#ff8c00>8</font><b>&nbsp;按上下键切换表单字段焦点</b></td>
                </tr>
                <tr bgcolor=#236d78 height=1><td></td></tr>
                <tr bgcolor=#eaecf5 >
                <td bgcolor=#ffffff>
                  <!-- 内置表格，居中,比外表格窄， -->
                  <table width=560 align=center border=0>
                    <tbody>
                      <tr>
                        <td width=70>卡号:</td>
                        <td><input type="text" name="code" onkeydown="changeFocusOnKey(this,event)" onfocus="this.style.backgroundColor='#e6e6e6'" onblur="this.style.backgroundColor='#ffffff'"/><font color=red>&nbsp;(必填)</font></td>
                      </tr>
                      <tr>
                        <td width=70>姓名:</td>
                        <td><input type="text" name="name" onkeydown="changeFocusOnKey(this,event)" onfocus="this.style.backgroundColor='#e6e6e6'" onblur="this.style.backgroundColor='#ffffff'"/><font color=red>&nbsp;(必填)</font></td>
                      </tr>
                      <tr>
                        <td width=70>密码:</td>
                        <td><input type="text" name="password" onkeydown="changeFocusOnKey(this,event)" onfocus="this.style.backgroundColor='#e6e6e6'" onblur="this.style.backgroundColor='#ffffff'"/><font color=red>&nbsp;(必填)</font></td>
                      </tr>
                      <tr>
                        <td width=70>邮件:</td>
                        <td><input type="text" name="email" onkeydown="changeFocusOnKey(this,event)" onfocus="this.style.backgroundColor='#e6e6e6'" onblur="this.style.backgroundColor='#ffffff'"/></td>
                      </tr>
                      <tr>
                        <td width=70>地址:</td>
                        <td><input type="text" name="address" onkeydown="changeFocusOnKey(this,event)" onfocus="this.style.backgroundColor='#e6e6e6'" onblur="this.style.backgroundColor='#ffffff'"/></td>
                      </tr>
                      <tr valign="top">
                        <td>介绍:</td>
                        <td valign="top"><textarea name="intro" rows="10" cols="30" onkeydown="changeFocusOnKey(this,event)"  onfocus="this.style.backgroundColor='#e6e6e6'" onblur="this.style.backgroundColor='#ffffff'"/></textarea></td>
                      </tr>           
                      <tr>
                        <td></td>
                        <td><input type="submit" value="提交"/></td>
                      </tr>
                    </tbody>          
                  </table>
                  <!-- 内置表格结束-->
                </td> 
              </tr>
            </table>
            <!-- 外层表格结束 -->

JS代码：
<SCRIPT LANGUAGE="JavaScript">
<!--
function changeFocusOnKey(obj,event){
    // 取得表单域所在表单
    var vform=obj.form;

    // 取得当前表单域的下标
    var index;
    for(var i=0;i<vform.length;i++){
        if(vform[i].name==obj.name){
            index=i;
        }
    }    
     
    if(event.keyCode==38){
        // 按向上键减少Index
        index=index-1;
    }
    else if(event.keyCode==40){
        // 按向下键增加Index
        index=index+1;;
    }
    
    // 如果index在表单控件数组区间内    则转换焦点，vform.length-1是为了跳过按钮
    if(index>-1 && index<vform.length-1){
        vform[index].focus();
    }
}    
//-->
</SCRIPT>

下拉列表框二级联动示例

页面：
<table width=560 align=center border=0>
                    <tbody>
                      <tr>
                        <td width=70>国家:</td>
                        <td>
                            <select name="nations" onchange="changeCities(this)">
                                <option value="0">中国</option>
                                <option value="1">美国</option>
                                <option value="2">俄罗斯</option>
                                <option value="3">日本</option>
                            </select>                            
                        </td>
                      </tr>
                      <tr>
                        <td width=70>城市:</td>
                        <td>
                            <select name="cities" onchange="getCity(this)">
                            </select>    
                        </td>
                      </tr>  
                      <tr>
                        <td></td>
                        <td><input type="submit" value="提交"/></td>
                      </tr>
                    </tbody>          
                  </table>

JS代码：
<SCRIPT LANGUAGE="JavaScript">
<!--
// 城市数组
var cityArr=[
    ["北京","上海","广州","大连"],
    ["纽约","洛杉矶","旧金山","夏威夷"],
    ["彼得堡","莫斯科"],
    ["东京","大阪","札幌"]
];

function changeCities(obj){
    // 取得表单域所在表单
    var vform=obj.form;

    // 取得国家下拉框的选取的国家
    var selectNationIndex=vform["nations"].value;
    
    // 取得城市下拉框并清除原有选项
    var cities=vform["cities"];
    cities.length=0;
    
    // 取得城市数组的子项
    var arr=cityArr[selectNationIndex];
    
    // 重新填充到城市下拉框
    for(var i=0;i<arr.length;i++){
        cities[i+1]=new Option(arr[i],i);
    }    
}    

function getCity(obj){
    // 取得表单域所在表单
    var vform=obj.form;
    
    alert(vform["cities"].value);
}    
//-->
</SCRIPT>

复选框全选示例
<table width=560 align=center border=0>
                    <tbody>
                      <tr>
                        <td width=70></td>
                        <td><input type="checkbox" name="selALL" value="全选" onclick="selAll()">全选:</input>                            
                        </td>
                      </tr>
                      <tr>
                        <td width=70>先秦思想家:</td>
                        <td>
                            <input type="checkbox" name="ideologist" value="1">孔子</input>
                            <input type="checkbox" name="ideologist" value="2">老子</input>
                            <input type="checkbox" name="ideologist" value="3">庄子</input>    
                            <input type="checkbox" name="ideologist" value="4">孟子</input>    
                        </td>
                      </tr>  
                      <tr>
                        <td></td>
                        <td><input type="submit" value="提交"/></td>
                      </tr>
                    </tbody>          
                  </table>

<SCRIPT LANGUAGE="JavaScript">
<!--
/**
* 全选
*/
function selAll(){
    var chkAll=document.forms[0].elements["selALL"];
    
    for(var i=0;i<document.forms[0].elements.length;i++){
        if(document.forms[0].elements[i].type=="checkbox"){
            if(document.forms[0].elements[i].name.indexOf("ideologist")==0){
                document.forms[0].elements[i].checked=chkAll.checked;        
            }    
        }
    }
}

/**
* 提交前检查
*/
function check(){
    var checkedCount=0;
    
    for(var i=0;i<document.forms[0].elements.length;i++){
        if(document.forms[0].elements[i].checked){
            if(document.forms[0].elements[i].name.indexOf("ideologist")==0){
                checkedCount++;        
            }    
        }
    }

    if(checkedCount==0){
        alert("你必须选中至少一个选项");
        return false;
    }

    return true;
}
//-->
</SCRIPT>

开新窗和关闭窗口示例
<%@ page contentType="text/html; charset=UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>JavaScript特效-开新窗和关闭窗口示例</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" rev="stylesheet" href="web/css/style.css"
    type="text/css" />
</head>

<body>
    <div id="bodyDiv">
        <div id="header">
            <jsp:include page="/web/page/branch/header.jsp"/>
        </div>
        <div id="sidebar">
            <jsp:include page="/web/page/branch/sidebar.jsp"/>
        </div>
        <div id="content">
            <form method=post action="#">
            <!-- 外层表格，比内表格宽，以在左右留出一定空当 -->
            <table style="border-right: 1px solid; border-top: 1px solid; border-left: 1px solid; border-bottom: 1px solid; boder_top: 0px" bordercolor="#236d78" cellspacing="0" cellpadding="0" width="630" align="center" border="0">
                <tr bgcolor="#eaecf5" height="25">
                <td colspan=3>&nbsp;<font face=webdings color=#ff8c00>8</font><b>&nbsp;开新窗和关闭窗口示例</b></td>
                </tr>
                <tr bgcolor=#236d78 height=1><td></td></tr>
                <tr bgcolor=#eaecf5>
                <td bgcolor=#ffffff>
                  <!-- 内置表格，居中,比外表格窄， -->
                  <table width=560 align=center border=0>
                    <tbody>
                      <tr>
                        <td width=70>开新窗:</td>
                        <td><a href='javascript:popup("form2")'>form2</a></td>
                        <td><a href='javascript:popup("checkbox")'>checkbox</a></td>
                      </tr>                      
                      <tr>
                        <td width=70>切换CSS:</td>
                        <td><a href='javascript:closeMe()'>关闭窗口</a></td>
                        <td></td>
                      </tr>
                    </tbody>          
                  </table>
                  <!-- 内置表格结束-->
                </td> 
              </tr>
            </table>
            <!-- 外层表格结束 -->
            </form>
        </div>
        <div id="footer">
            <jsp:include page="/web/page/branch/footer.jsp"/>
        </div>
    </div>
</body>
</html>

<SCRIPT LANGUAGE="JavaScript">
<!--
function popup(pageName){
    var prjName="/JavaScriptEffect/";
    window.open(prjName+"ShowPage?page="+pageName,"","width=640,height=480");
}

function closeMe(){
    if(confirm("你确定要关闭窗口吗?")==true){
        window.close();
    }
}
//-->
</SCRIPT>

DOM操作
节点查看
<%@ page contentType="text/html; charset=UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Dom操作-逐层访问DOM节点</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" rev="stylesheet" href="web/css/style.css"
    type="text/css" />
</head>

<body>
    <div id="bodyDiv">
        <div id="header">
            <jsp:include page="/web/page/branch/header.jsp"/>
        </div>
        <div id="sidebar">
            <jsp:include page="/web/page/branch/sidebar.jsp"/>
        </div>
        <div id="content">
            <p><input type="button" value="测试" onclick="visitNode()"/></p>
        </div>
        <div id="footer">
            <jsp:include page="/web/page/branch/footer.jsp"/>
        </div>
    </div>
</body>
</html>

<script LANGUAGE="JavaScript">
<!--
function visitNode(){
    // 取文档的根节点(即最外层的html节点)
    var htmlNode=document.documentElement;
    alert("最外层的html节点名为"+htmlNode.nodeName);

    // 取htmlNode下的子节点个数
    var nodeCountUnderHtml=htmlNode.childNodes.length;
    alert("htmlNode下的子节点个数为"+nodeCountUnderHtml);

    // 取htmlNode下的body子节点
    var bodyNode=htmlNode.childNodes.item(1);
    alert("htmlNode下的body子节点名为"+bodyNode.nodeName);

    // 遍历body子节点下的子节点名
    for(var i=0;i<bodyNode.childNodes.length;i++){
        var node=bodyNode.childNodes.item(i);
        alert("body子节点下的子节点名为"+node.nodeName);
    }    
}

//-->
</script>


快速访问DOM节点
<%@ page contentType="text/html; charset=UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Dom操作-快速访问DOM节点</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" rev="stylesheet" href="web/css/style.css"
    type="text/css" />
</head>

<body>
    <div id="bodyDiv">
        <div id="header">
            <jsp:include page="/web/page/branch/header.jsp"/>
        </div>
        <div id="sidebar">
            <jsp:include page="/web/page/branch/sidebar.jsp"/>
        </div>
        <div id="content">
            <div>文字一</div>
            <div>文字二</div>
            <div id="text3">文字三</div>
            <p><input type="radio" 
                    name="radioes" value="red">红</input></p>
            <p><input type="radio" 
                    name="radioes" value="green">绿</input></p>
            <p><input type="radio" 
                    name="radioes" value="blue">蓝</input></p>
            <p><input type="button" 
                    value="测试" onclick="visitNode2()"/></p>
        </div>
        <div id="footer">
            <jsp:include page="/web/page/branch/footer.jsp"/>
        </div>
    </div>
</body>
</html>

<script LANGUAGE="JavaScript">
<!--
function visitNode2(){
    // 使用document.getElementsByTagName取所有tag为div的节点
    var divNodes=document.getElementsByTagName("div");
    for(var i=0;i<divNodes.length;i++){
        alert("DIV中内容为"+divNodes[i].innerHTML);
    }

    // 使用document.getElementsByName取所有name为radioes的节点
    var radioes=document.getElementsByName("radioes");
    for(var i=0;i<radioes.length;i++){
        alert("单选框的值为"+radioes[i].getAttribute("value"));
    }

    // 使用document.getElementById取得id为text3的单个节点
    var div3=document.getElementById("text3");
    
    // 改变DIV3中的内容
    div3.innerHTML="div3";
}

//-->
</script>


创建DOM节点
<%@ page contentType="text/html; charset=UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Dom操作-创建DOM节点</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" rev="stylesheet" href="web/css/style.css"
    type="text/css" />
</head>

<body>
    <div id="bodyDiv">
        <div id="header">
            <jsp:include page="/web/page/branch/header.jsp"/>
        </div>
        <div id="sidebar">
            <jsp:include page="/web/page/branch/sidebar.jsp"/>
        </div>
        <div id="content">
            <p><input type="button" 
            value="创建节点" onclick="createNode()"/></p>
        </div>
        <div id="footer">
            <jsp:include page="/web/page/branch/footer.jsp"/>
        </div>
    </div>
</body>
</html>

<script LANGUAGE="JavaScript">
<!--
var count=0;

function createNode(){    
    // 创建P元素
    var pNode=document.createElement("p");

    // 累加Count以观察次数
    count=count+1;
    
    // 创建文本节点
    var textNode=document.createTextNode("这是创建出来的文字"+count);

    // 将文本节点追加到P元素中
    pNode.appendChild(textNode);
    
    // 使用document.getElementById取得id为content的单个节点
    var contentDiv=document.getElementById("content");
    
    // 将P元素添加到body中
    contentDiv.appendChild(pNode);
}

//-->
</script>



删除DOM节点
<%@ page contentType="text/html; charset=UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Dom操作-删除DOM节点</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" rev="stylesheet" href="web/css/style.css"
    type="text/css" />
</head>

<body>
    <div id="bodyDiv">
        <div id="header">
            <jsp:include page="/web/page/branch/header.jsp"/>
        </div>
        <div id="sidebar">
            <jsp:include page="/web/page/branch/sidebar.jsp"/>
        </div>
        <div id="content">
            <p><input type="button" 
                    value="删除节点" onclick="removePNode()"/></p>
                    
            <div id="removeDiv">
                <p>待删除节点1</p>
                <p>待删除节点2</p>
                <p>待删除节点3</p>
                <p>待删除节点4</p>
                <p>待删除节点5</p>
            </div>
        </div>
        <div id="footer">
            <jsp:include page="/web/page/branch/footer.jsp"/>
        </div>
    </div>
</body>
</html>

<script LANGUAGE="JavaScript">
<!--

function removePNode(){    

    // 使用document.getElementById取得id为removeDiv的单个节点
    var removeDiv=document.getElementById("removeDiv");
    
    // 得到removeDiv下的P元素
    var pNodeCount=removeDiv.getElementsByTagName("p").length;
    
    if(pNodeCount>0){
        var pNode=removeDiv.getElementsByTagName("p")[0];
        alert("文字为"+pNode.innerHTML+"的P元素将被删除");
        
        // 删除P元素
        pNode.parentNode.removeChild(pNode);
    }
    else{
        alert("P元素已经删除完毕");
    }
}

//-->
</script>



替换DOM节点
<%@ page contentType="text/html; charset=UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Dom操作-替换DOM节点</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" rev="stylesheet" href="web/css/style.css"
    type="text/css" />
</head>

<body>
    <div id="bodyDiv">
        <div id="header">
            <jsp:include page="/web/page/branch/header.jsp"/>
        </div>
        <div id="sidebar">
            <jsp:include page="/web/page/branch/sidebar.jsp"/>
        </div>
        <div id="content">
            <p><input type="button" 
                    value="替换节点" onclick="replacePNode()"/></p>
                    
            <div id="removeDiv">
                <p>待替换节点</p>
            </div>
        </div>
        <div id="footer">
            <jsp:include page="/web/page/branch/footer.jsp"/>
        </div>
    </div>
</body>
</html>

<script LANGUAGE="JavaScript">
<!--

function replacePNode(){    

    // 使用document.getElementById取得id为removeDiv的单个节点
    var removeDiv=document.getElementById("removeDiv");
    
    // 得到removeDiv下的P元素
    var pNode=removeDiv.getElementsByTagName("p")[0];

    // 创建新的P元素
    var pNodeNew=document.createElement("img");
    pNodeNew.setAttribute("src","web/img/logo.gif");
    
    // var textNode=document.createTextNode("创建出来的文字");
    // pNodeNew.appendChild(textNode);

    // 用新节点替换旧节点
    pNode.parentNode.replaceChild(pNodeNew,pNode);
}

//-->
</script>


修改DOM节点属性
<%@ page contentType="text/html; charset=UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Dom操作-改变DOM节点属性</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" rev="stylesheet" href="web/css/style.css"
    type="text/css" />
</head>

<body>
    <div id="bodyDiv">
        <div id="header">
            <jsp:include page="/web/page/branch/header.jsp"/>
        </div>
        <div id="sidebar">
            <jsp:include page="/web/page/branch/sidebar.jsp"/>
        </div>
        <div id="content">
            <p><input type="button" 
                    value="改变节点属性" onclick="changeImgNodeAttr()"/></p>
            <p><img src="web/img/logo.gif"/></p>
        </div>
        <div id="footer">
            <jsp:include page="/web/page/branch/footer.jsp"/>
        </div>
    </div>
</body>
</html>

<script LANGUAGE="JavaScript">
<!--

function changeImgNodeAttr(){    
    // 使用document.getElementById取得id为content的单个节点
    var contentDiv=document.getElementById("content");
    
    // 得到contentDiv下的img元素
    var imgNode=contentDiv.getElementsByTagName("img")[0];

    // 修改img元素的属性
    imgNode.setAttribute("src","web/img/ajax-loader.gif");
}

//-->
</script>




posted on 2008-04-05 15:44 sitinspring 阅读(640) 评论(0)  编辑  收藏 所属分类: Web开发


只有注册用户登录后才能发表评论。
网站导航:
 
sitinspring(http://www.blogjava.net)原创,转载请注明出处.