马克社区,马克吐温社区,马克java社区Web阶段：第三章：JavaScript语言

Web阶段：第三章：JavaScript语言

《JavaScript语言精粹》点击下载，密码：synu

JavaScript介绍:
1.Javascript语言诞生主要是完成页面的数据验证。
2.它运行在客户端，需要运行浏览器来解析执行JavaScript代码。
3.JS是Netscape网景公司的产品，最早取名为LiveScript;为了吸引更多java程序员。更名为javascript。
4.JS是弱类型，Java是强类型。

JavaScript特点：
1.交互性（它可以做的就是信息的动态交互）
2.安全性（不允许直接访问本地硬盘）
3.跨平台性（只要是可以解释Js的浏览器都可以执行，和平台无关）

JavaScript和html代码的结合方式
第一种方式
只需要在head 标签中，或者在body标签中，使用script 标签来书写JavaScript代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        
        <script type="text/javascript">
            // alert 是 js的警告框函数
            // 它可以接收任意类型的参数，你给它传什么，它就弹出来什么
            alert("js hello");
        </script>
   </head>
   <body>
   </body>
</html>

第二种方式
使用Script 标签引入单独的JavaScript代码文件

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        
        <script type="text/javascript" src="1.js"></script>
        <script type="text/javascript">
            alert(2222);
        </script>
   </head>
   <body>
   </body>
</html>

变量
什么是变量？
变量是可以存放某些值的内存的命名。

javaScript的变量类型：
数值类型： number int short long float double byte
字符串类型： string
对象类型： object
布尔类型： boolean
函数类型： function

javascript里特殊的值：
undefined 未定义所有未赋初始化的变量，默认值都是undefiend
null 空值
NAN not a number 非数值，非数字（做非法算术运算时，就会返回NAN）

JS中的定义变量格式：
var 变量名;
var 变量名 = 值;

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
            var i ;
//             alert(i);// undefiend
            i = 12 ;
            // typeof是一个函数。可以取变量的数据类型
//             alert( typeof(i) );// number
            i = "this is good boy!";
            alert( typeof(i) );//string
        </script>
   </head>
   <body>
   </body>
</html>

关系（比较）运算

等于： ==
全等于： ===

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
            var a = 12;
            var b = "12";
            // js中的等于，只是简单的做字面值的比较
            // alert( a == b );// true
            // 全等于，除了做字面值的比较之外，还会检查两个变量的数据类型
            alert( a === b );//false
        </script>
   </head>
   <body>
   </body>
</html>

逻辑运算
且运算： &&
或运算： ||
取反运算： !
0 、null、 undefined、””(空串) 都认为是 false；

&& 与运算。
有两种情况：
第一种：当表达式全为真的时候。返回最后一个表达式的值。
第二种：当表达式中，有一个为假的时候。返回第一个为假的表达式的值

|| 或运算
第一种情况：当表达式全为假时，返回最后一个表达式的值
第二种情况：只要有一个表达式为真。就会把回第一个为真的表达式的值
并且 && 与运算和 ||或运算有短路。
短路就是说，当这个&&或||运算有结果了之后。后面的表达式不再执行

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
//         0 、null、 undefined、””(空串) 都认为是 false；
//             var a = 0;
//             if ( a ) {
//                 alert("零为真");
//             } else {
//                 alert("零为假");
//             }
//             var b = null;
//             if ( b ) {
//                 alert("null为真");
//             } else {
//                 alert("null为假");
//             }
//             var c = undefined;
//             if ( c ) {
//                 alert("undefined为真");
//             } else {
//                 alert("undefined为假");
//             }
//             var d = "";
//             if ( d ) {
//                 alert("空串为真");
//             } else {
//                 alert("空串为假");
//             }
        var a = "abc";
        var b = true;
        var d = false;
        var c = null;
//         && 与运算。
//         有两种情况：
//         第一种：当表达式全为真的时候。返回最后一个表达式的值。
   //         alert( b && a );//abc
   //         alert( a && b );//true
//         第二种：当表达式中，有一个为假的时候。返回第一个为假的表达式的值
   //         alert( d && c ); // false
   //         alert( a && c ); // null

//             || 或运算
//         第一种情况：当表达式全为假时，返回最后一个表达式的值
   //         alert( d || c ); // null
   //         alert( c || d ); // false
//         第二种情况：只要有一个表达式为真。就会把回第一个为真的表达式的值
//             alert( b || c ); // true
//             alert( d || a ); // abc
        </script>
</head>

数组
数组定义方式
Js 中数组的定义：
格式：
var 数组名 = []; // 定义一个空数组
var 数组名 = [ 值1，值2，值3 ]; // 定义数组同时赋初始值

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
//         Js 中数组的定义：
//         格式：
//         var 数组名 = []; // 定义一个空数组
        var arr = [];
//         alert( arr.length ); //0
        arr[0] = 12; // 通过数组下标给元素赋值
//         alert( arr[0] );//12
//         alert( arr.length );//1
        // js的数组在通过下载赋值的时候，会自动的根据最大下标做扩容操作。
        arr[2] = "abc";
//         alert( arr.length ); //3
//         alert( arr[1] ); //undefined
        // 数组的遍历
//         for (var i = 0; i < arr.length; i++) {
//             alert( arr[i] );
//         }
//         var 数组名 = [ 值1，值2，值3 ]; // 定义数组同时赋初始值
        var arr2 = [12,"abc",true];
//         alert(arr2.length); // 3
        arr2[9] = 12;
        alert(arr2.length);
        </script>
   </head>

函数：
函数的二种定义方式
函数的第一种定义方式，使用function关键字进行定义函数。
格式如下：

function 函数名（形参列表）{
函数体
}

如何访问函数：
函数名( 实参列表 );

如何定义带有返回值的函数?
答：只需要在函数体内直接使用return语句返回值即可。

<script type="text/javascript">
//         格式如下：
//         function    函数名（形参列表）{
//             函数体
//         }
//        无参函数定义
//         function fun(){
//             alert("无参函数被调用了");
//         }
//         有参函数
//         function fun2( a , b ){
//             alert("有参函数被调用 a=>" + a + ",b=>" + b);
//         }
        // 带有返回值的函数定义
        function sum( num1, num2 ){
            return num1 + num2;
        }
//         如何访问函数：    函数名( 实参列表 );
//         alert( sum("abc",100) );
        </script>

函数的第二种定义方式是：
var 函数名 = function(参数列表){函数体}

<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>Insert title here</title>
   <script type="text/javascript">
        var fun = function(num){
            alert("函数第二种定义方式 : " + num);
        }
        fun(123);
   </script>
</head>

注：在Java中函数允许重载。但是在Js中函数的重载会直接覆盖掉上一次的定义

<script type="text/javascript">
            function fun(a,b){
                alert(a);
                alert(b);
                alert("有参函数被调用");
            }
            function fun(){
                alert("无参函数被调用");
            }
            fun(12,"abc",true);
</script>

函数的 arguments 隐形参数（只在function函数内）
可变长参数：public void fun( int a , Object … args )……
args就是可变长参数
它本身是一个数组。
js中函数自带有一个隐形参数arguments ，基本上使用跟java的可变长参数一样。
都是用来接收任意多个参数。它的使用跟数组一样。

<script type="text/javascript">
            function fun(a,b){
                alert(a);
                alert(b);
                alert("有参函数被调用");
            }
            function fun(pa,pb){
                alert( arguments.length );//3
                alert( arguments[0] );//12
                alert( arguments[1] );//abc
                alert( arguments[2] );//true
                alert("=====================");
                alert( pa );//12
                alert( pb );//abc
                alert("无参函数被调用");
            }
//             fun(12,"abc",true);
            //需求：现在需要有一个方法，可以计算传递进来的所有参数（只相加数字）相加的和并返回
            function sum(){
                var result = 0;
                for (var i = 0; i < arguments.length; i++) {
                    if ( typeof(arguments[i]) == "number" ) {
                        result += arguments[i];
                    }
                }
                return result;
            }
            alert( sum(100,"abc",100,1000) );
</script>

JS中的自定义对象（扩展内容）
Object形式的自定义对象
var 变量名 = new Object(); 创建一个对象实例（空）
变量名.属性名 = 值; 给对象实例，定义了一个属性
变量名.函数名 = function(){} 给对象实例，添加一个方法
如何访问对象：变量名.属性名/方法名()

<script type="text/javascript">
            var obj = new Object();
            obj.name = "国哥好帅！";
            obj.age = 18;
            obj.fun = function(){
                alert("姓名：" + this.name + ",年龄：" + this.age);
            }
            // 访问对象
//             alert( obj.name );
            obj.fun();
</script>

{}花括号形式的自定义对象
var 变量名 = { //定义一个空对象
属性名 : 值, //定义了一个属性
函数名 : function(){} // 定义一个函数
};
如何访问对象：变量名.属性名/方法名()

<script type="text/javascript">
            var obj = {
                    name:"华仔",
                    age:18,
                    fun:function(){
                        alert("姓名：" + this.name + ",年龄：" + this.age);
                    }
            };
            alert(obj.name);
            obj.fun();
</script>

js中的事件（重要）
什么是事件？
事件是电脑输入设备与页面进行交互的响应。我们称之为事件。

常用的事件：
onload加载完成事件常用于页面被浏览器加载完成之后自动做一些初始化工作。
onclick单击事件常用于按钮被单击之后的响应工作
onblur失去焦点事件常用于输入框失去焦点后，验证其中的内容是否合法
onchange内容发生改变事件常用于输入框或下拉列表内容发生改变后响应
onsubmit表单提交事件常用于表单提交，在提交之前验证所有表单项是否合法。只要有一个不合法，就阻止表单提交。

事件的注册又分为静态注册和动态注册两种：
注册事件和绑定事件是一个东西
注册事件，就是告诉浏览器，当事件触发后，需要执行哪些代码。

静态注册事件：静态注册是指通过事件属性直接赋于事件响应后的代码，这种方式我们称之为静态注册。

动态注册事件：动态注册是指，通过先获取标签对象。然后再通过标签对象.事件名 = function(){}的方式赋值，这种操作叫动态注册。

window.onload = function(){
1 查找标签对象
2 通过标签对象.事件名 = function(){}
}
onload事件示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
            window.onload = function(){
                alert("页面加载完成==动态");
            }
        </script>
   </head>
   
   <body>
   </body>
</html>

onclick事件示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
            function onclickFun(){
                alert("这是单击事件静态注册");
            }
            //动态注册单击事件
            window.onload = function(){
//                 1 查找标签对象
                // getElementById    通过id属性值获取标签对象
                //    get 是获取
                //    Element是元素（元素就是标签）
                // by    由..通过
                // id    id属性
                var btnObj = document.getElementById("btn01");
//                 alert( btnObj );
//                 2 通过标签对象.事件名 = function(){}
                btnObj.onclick = function(){
                    alert("这是动态注册的onclick事件");
                }
            }
        </script>
   </head>
   <body>
        
        <input type="button" value="按钮1" onclick="onclickFun();"/>
        <button id="btn01">按钮2</button>
   </body>
</html>

onblur失去焦点事件

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
            function onblurFun(){
                // console这是js中提供的一个专门用于调试的对象。表示控制台
                // log方法就是输出内容。可以传递任意参数
                console.log("这是静态注册onblur事件");
            }
            window.onload = function(){
                //1 获取标签对象
                var passObj = document.getElementById("password");
                //2 通过标签对象.事件名 = function(){}
                passObj.onblur = function(){
                    console.log("这是动态注册的onblur事件");
                }
            }
        </script>
   </head>
   <body>
        用户名：<input type="text" onblur="onblurFun();"/><br/>
        密码：<input id="password" type="password" /><br/>
   </body>
</html>

onchange内容发生改变事件

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
            function onchangeFun(){
                alert("静态注册onchange事件");
            }
            window.onload = function(){
                //1 获取标签对象
                var selObj = document.getElementById("sel01");
//                 alert( selObj );
                //2 通过标签对象.事件名 = function(){}
                selObj.onchange = function(){
                    alert("动态注册onchange事件");
                }
            }
        </script>
   </head>
   <body>
        请选择你心中的女神：
        <select onchange="onchangeFun();">
            <option>--请选择--</option>
            <option>刘奕菲</option>
            <option>迪丽热巴</option>
            <option>杀那啦</option>
        </select>
        <br/>
        请选择你心中的男神：
        <select id="sel01">
            <option>--请选择--</option>
            <option>国哥</option>
            <option>龙哥</option>
            <option>华仔</option>
            <option>强哥</option>
        </select>
   </body>
</html>

onsubmit表单提交事件

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
            function onsubmitFun(){
                alert("开始验证表单项，发现不合法");
                return false;
            }
            //
            window.onload = function(){
                // 获取标签
                var formObj = document.getElementById("form01");
//                 alert(formObj);
                // 通过标签对象.事件名=function(){}
                formObj.onsubmit = function(){
                    alert("动态注册==开始验证表单项，发现不合法");
                    return false;
                }
            }
        </script>
   </head>
   <body>
        
        <form action="http://www.baidu.com" onsubmit="return onsubmitFun();">
            <input type="submit" value="静态注册"/>
        </form>
        <form action="http://www.baidu.com" id="form01">
            <input type="submit" value="动态注册"/>
        </form>
   </body>
</html>

DOM 模型
DOM 全称是Document Object Model 文档对象模型，把文档中的标签，属性，文本，转换成为对象来管理。
Document 对象的理解：
第一点：Document它管理了所有的Html文档内容。
第二点：document它是一种树结构的文档。有层级关系。
第三点：它让我们把所有的标签都对象化
第四点：我们可以通过document访问所有的标签对象。

什么是对象化？？
我们基础班已经学过面向对象。请问什么是对象化？
举例：
有一个人有年龄：18岁，性别：女，名字：张某某
我们要把这个人的信息对象化怎么办！

Class Person {
private int age;
private String sex;
private String name;
}

那么 html 标签要对象化怎么办？

<body>
   <div id="div01">div01</div>
</body>

模拟对象化，相当于：
class Dom{
private String id; // id属性
private String tagName; //表示标签名
private Dom parentNode; //父亲
private List children; // 孩子结点
private String innerHTML; // 起始标签和结束标签中间的内容
}
Document对象中的方法介绍（*****重点）
1.document.getElementById(elementId)通过标签的id属性查找标签dom对象，elementId是标签的id属性值

2.document.getElementsByName(elementName)通过标签的name属性查找标签dom对象，elementName标签的name属性值

3.document.getElementsByTagName(tagname)通过标签名查找标签dom对象。tagname是标签名

4.document.createElement( tagName )方法，通过给定的标签名，创建一个标签对象。tagName是要创建的标签名

如果标签对象有id属性，优先使用getElementById查找标签对象
如果标签没有id属性，只有name属性，则使用getElementsByName方法进行查找
如果标签即没有id属性，也没有name属性，最后才使用getElementsByTagName
getElementById和getElementsByName和getElementsByTagName都需要在页面加载完成之后执行。才能得到标签对象。

getElementById方法示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
        // 需求，当用户点击【验证】按钮的时候，帮我验证一下，输入框中的内容是否合法
        // 验证的规则是：必须由字母，数字，下划线组成，并且长度是5到12位
        // 1、绑定单击事件
        function onclickFun(){
            // 2 获取输入框中的内容
            // 当我们要操作一个标签对象的时候。一定要先获取到这个标签对象。
            var usernameObj = document.getElementById("username");
            var usernameText = usernameObj.value;

            // 获取用来输出验证结果的span标签对象
            var spanObj = document.getElementById("usernameSpan");
            // innerHTML表示起始标签和结束标签中的内容
            // 这个属性，可读可写
//             spanObj.innerHTML = "帅哥讲的真细";
            // 3 使用正则表达式去验证
            var patt = /^\w{5,12}$/;//验证的规则是：必须由字母，数字，下划线组成，并且长度是5到12位
//             正则对象有一个test方法。可以用来验证一个字符串是否匹配正则表达式
//            匹配就返回ture，不匹配就返回false
            if (patt.test(usernameText)) {
//                 spanObj.innerHTML = "用户名合法";
                spanObj.innerHTML = "<img alt=\"\" src='right.png' width='15' height='15' />";
            } else {
//                 spanObj.innerHTML = "用户名不合法";
                spanObj.innerHTML = "<img alt=\"\" src='wrong.png' width='15' height='15' />";
            }
        }
        </script>
   </head>
   <body>
        用户名：<input type="text" id="username" value="wzg168"/>
        <span style="color: red;" id="usernameSpan"></span>
        <button onclick="onclickFun()">验证</button>
   </body>
</html>

getElementsByName方法示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
            // 全选事件
            function checkAll(){
                // 当我们要操作一个标签对象的时候。一定要先获取到这个标签对象。
                //getElementsByName是根据name属性查找返回对象的集合。
                //这个集合的操作跟数组一样
                //这个集合中的元素顺序刚好是它们在html页面中，从上到下的顺序
                var hobbies = document.getElementsByName("hobby");
                // checked属性表示单选，复选框的选中状态。
                // 这个属性可读，可写
                for (var i = 0; i < hobbies.length; i++) {
                    hobbies[i].checked = true;
                }
            }
            // 全不选
            function checkNo(){
                var hobbies = document.getElementsByName("hobby");
                // checked属性表示单选，复选框的选中状态。
                // 这个属性可读，可写
                for (var i = 0; i < hobbies.length; i++) {
                    hobbies[i].checked = false;
                }
            }
            // 反选
            function checkReverse(){
                var hobbies = document.getElementsByName("hobby");
                // checked属性表示单选，复选框的选中状态。
                // 这个属性可读，可写
                for (var i = 0; i < hobbies.length; i++) {
//                     if (hobbies[i].checked) {
//                         hobbies[i].checked = false;
//                     } else {
//                         hobbies[i].checked = true;
//                     }
                    hobbies[i].checked = !hobbies[i].checked;
                }
            }
        </script>
   </head>
   <body>
        兴趣爱好：
        <input type="checkbox" name="hobby" checked="checked" value="hj"/>喝酒
        <input type="checkbox" name="hobby" value="cy"/>抽烟
        <input type="checkbox" name="hobby" value="tt"/>汤头
        <br/>
        <button onclick="checkAll();">全选</button>
        <button onclick="checkNo();">全不选</button>
        <button onclick="checkReverse();">反选</button>
   </body>
</html>

getElementsByTagName方法示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
            // 全选事件
            function checkAll(){
                //getElementsByTagName是通过指定的标签名查找返回全部的标签对象集合。
                //这个集合的操作跟数组一样
                //这个集合中的元素顺序跟他们在html页面中，从上到下的顺序一致！
                var inputObjs = document.getElementsByTagName("input");
                for (var i = 0; i < inputObjs.length; i++) {
                    inputObjs[i].checked = true;
                }
            }
        </script>
   </head>
   <body>
        兴趣爱好：
        <input type="checkbox" checked="checked" value="hj"/>喝酒
        <input type="checkbox" value="cy"/>抽烟
        <input type="checkbox" value="tt"/>汤头
        <br/>
        <button onclick="checkAll();">全选</button>
   </body>
</html>

createElement方法示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
        window.onload = function(){
        //         需求：通过代码创建标签：<div>帅哥棒棒哒！</div>,并添加到body标签中去显示
            var divObj = document.createElement("div"); //<div></div>
//             alert( divObj );
            //divObj.innerHTML = "帅哥萌萌哒！"; //<div>帅哥萌萌哒！</div>
            var textNode = document.createTextNode("帅哥萌萌哒！");
            divObj.appendChild( textNode );
            //appendChild给body标签添加子元素
            document.body.appendChild( divObj );
        }
        </script>
   </head>
   <body>
   </body>
</html>

节点的常用属性和方法
所谓节点，就是前面讲的标签对象。

方法：
通过具体的元素节点调用
getElementsByTagName()
方法，获取当前节点的指定标签名孩子节点
appendChild( oChildNode )
方法，可以添加一个子节点，oChildNode是要添加的孩子节点

属性：
childNodes属性，获取当前节点的所有子节点
firstChild属性，获取当前节点的第一个子节点
lastChild属性，获取当前节点的最后一个子节点
parentNode属性，获取当前节点的父节点
nextSibling属性，获取当前节点的下一个节点
previousSibling属性，获取当前节点的上一个节点
className属性，用于获取或设置标签的class属性值
innerHTML 属性，表示获取/设置起始标签和结束标签中的内容
innerText属性，表示获取/设置起始标签和结束标签中的文本

练习：05.DOM查询练习

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dom查询</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript">
   window.onload = function(){
        //1.查找#bj节点
        document.getElementById("btn01").onclick = function(){
            alert( document.getElementById("bj").innerHTML );
        }
        //2.查找所有li节点
        var btn02Ele = document.getElementById("btn02");
        btn02Ele.onclick = function(){
            alert( document.getElementsByTagName("li").length );
        };
        //3.查找name=gender的所有节点
        var btn03Ele = document.getElementById("btn03");
        btn03Ele.onclick = function(){
            alert( document.getElementsByName("gender").length );
        };
        //4.查找#city下所有li节点
        var btn04Ele = document.getElementById("btn04");
        btn04Ele.onclick = function(){
            //1 先查找id为city的标签
            //2 再查找city的li子元素
            alert( document.getElementById("city").getElementsByTagName("li").length );
        };
        //5.返回#city的所有子节点
        var btn05Ele = document.getElementById("btn05");
        btn05Ele.onclick = function(){
            //1 先查找id为city
            alert( document.getElementById("city").childNodes.length );
            //2 再通过city对象。获取所有子节点
        };
        //6.返回#phone的第一个子节点
        var btn06Ele = document.getElementById("btn06");
        btn06Ele.onclick = function(){
            //1 先查找id为phone的标签对象
            alert( document.getElementById("phone").firstChild.innerHTML );
            //2 再根据phone标签对象，查找第一个子节点
        };
        //7.返回#bj的父节点
        var btn07Ele = document.getElementById("btn07");
        btn07Ele.onclick = function(){
            //1先查找id为bj的节点
            alert( document.getElementById("bj").parentNode.innerHTML );
            //2再通过bj节点找到父节点
        };
        //8.返回#android的前一个兄弟节点
        var btn08Ele = document.getElementById("btn08");
        btn08Ele.onclick = function(){
            alert( document.getElementById("android").previousSibling.innerHTML );
        };
        //9.读取#username的value属性值
        var btn09Ele = document.getElementById("btn09");
        btn09Ele.onclick = function(){
            alert( document.getElementById("username").value );
        };
        //10.设置#username的value属性值
        var btn10Ele = document.getElementById("btn10");
        btn10Ele.onclick = function(){
            document.getElementById("username").value = "帅哥帅不要不要的";
        };
        //11.返回#bj的文本值
        var btn11Ele = document.getElementById("btn11");
        btn11Ele.onclick = function(){
//             alert( document.getElementById("bj").innerText );
            alert( document.getElementById("city").innerText );
        };
   };
</script>
</head>
<body>
<div id="total">
   <div class="inner">
        <p>
            你喜欢哪个城市?
        </p>
        <ul id="city">
            <li id="bj">北京</li>
            <li>上海</li>
            <li>东京</li>
            <li>首尔</li>
        </ul>
        <br>
        <br>
        <p>
            你喜欢哪款单机游戏?
        </p>
        <ul id="game">
            <li id="rl">红警</li>
            <li>实况</li>
            <li>极品飞车</li>
            <li>魔兽</li>
        </ul>
        <br />
        <br />
        <p>
            你手机的操作系统是?
        </p>
        <ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
   </div>
   <div class="inner">
        gender:
        <input type="radio" name="gender" value="male"/>
        Male
        <input type="radio" name="gender" value="female"/>
        Female
        <br>
        <br>
        name:
        <input type="text" name="name" id="username" value="abcde"/>
   </div>
</div>
<div id="btnList">
   <div><button id="btn01">查找#bj节点</button></div>
   <div><button id="btn02">查找所有li节点</button></div>
   <div><button id="btn03">查找name=gender的所有节点</button></div>
   <div><button id="btn04">查找#city下所有li节点</button></div>
   <div><button id="btn05">返回#city的所有子节点</button></div>
   <div><button id="btn06">返回#phone的第一个子节点</button></div>
   <div><button id="btn07">返回#bj的父节点</button></div>
   <div><button id="btn08">返回#android的前一个兄弟节点</button></div>
   <div><button id="btn09">返回#username的value属性值</button></div>
   <div><button id="btn10">设置#username的value属性值</button></div>
   <div><button id="btn11">返回#bj的文本值</button></div>
</div>
</body>
</html>

JSP