版权声明：作者：java_wxid https://blog.csdn.net/java_wxid/article/details/83443190
作者：java_wxid
《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 里面就是js代码
-->
<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标签可以用来定义js代码，也可以用来引入单独的js文件
src属性 设置需要引入的js的文件路径（相对路径或绝对路径）
一个script标签只能做一件事情 。要么用来定义js代码，要么用来引入js文件
-->
<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 onload="alert('页面加载完成！');"> -->
<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>
<!--
onsubmit事件，return false。就会阻止表单提交
-->
<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>
补充：点击常用的正则表达式