1、JavaScript介绍
2、JavaScript和html代码的结合方式
2.1、第一种方式
2.2、第二种方式
3、变量
3.1、关系（比较）运算
3.2、逻辑运算
4、数组
4.1、数组定义方式
5、函数
5.1、函数的二种定义方式
5.2、函数的 arguments 隐形参数（只在function函数内）
6、JS中的自定义对象
6.1、Object形式的自定义对象
6.2、{}花括号形式的自定义对象
7、js中的事件
8、DOM 模型
8.1、Document对象
8.2、Document对象中的方法介绍
8.3、节点的常用属性和方法
1、JavaScript介绍
Javascript语言诞生主要是完成页面的数据验证。因此它运行在客户端，需要运行浏览器来解析执行JavaScript代码。
JS是Netscape网景公司的产品，最早取名为LiveScript;为了吸引更多java程序员。更名为javascript。
JS是弱类型，Java是强类型。
其特点：
1. 交互性（它可以做的就是信息的动态交互）
2. 安全性（不允许直接访问本地硬盘）
3. 跨平台性（只要是可以解释Js的浏览器都可以执行，和平台无关）
2、JavaScript和html代码的结合方式
2.1、第一种方式
只需要在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("帅！");
</script>
</head>
<body>
</body>
</html>
2.2、第二种方式
使用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 标签 还可以用来引入单独的js文件 src 属性，设置需要引入的js文件的路径 --> <script type="text/javascript" src="1.js"></script> </head> <body> </body> </html>
3、变量
什么是变量？变量是可以存放某些值的内存的命名。
javaScript的变量类型：
数值类型： number
字符串类型： string
对象类型： object
布尔类型： boolean
函数类型： function
javascript里特殊的值：
undefined未定义所有js的变量，在赋未初始化的时候。默认值都是undefined。
null 表示空值。
NAN not a number 非数字，非数值。
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);// undefined; i = 12; // alert( i );// 12 // alert( typeof(i) );//number i = "abc"; alert( typeof(i) );//string var a = 12; var b = "asdf"; var c = a - b; alert(c);//NAN </script> </head> <body> </body> </html>
3.1、关系（比较）运算
等于： ==只是简单的做字面值的比较
全等于： ===除了做字面值的比较之外，还会检查两个数字的类型
<!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 = 12; var b = "12"; //在js中的等于比较。只是简单的做字面值的比较 // alert( i == b ); //true // 全等于 除了做字面值的比较之外，还会检查两个数字的类型 alert( i === b ); //false </script> </head> <body> </body> </html>
3.2、逻辑运算
且运算： &&
或运算： ||
取反运算： ！
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 i = 0;
// if (i) {
// alert("零为真");
// } else {
// alert("零为假");
// }
// var b = null;
// if (b) {
// alert("null为真");
// } else {
// alert("null为假");
// }
// var a = undefined;
// if (a) {
// alert("undefined为真");
// } else {
// alert("undefined为假");
// }
// var c = "";
// if (c) {
// alert("空串为真");
// } else {
// alert("空串为假");
// }
var a = "abc";
var b = true;
var d = false;
var c = null;
// && 与运算。
// 有两种情况：
// 第一种：当表达式全为真的时候。返回最后一个表达式的值。
// alert( b && a ); // abc
// alert( a && b ); // true
// 第二种：当表达式中，有一个为假的时候。返回第一个为假的表达式的值
// alert( c && b ); // null
// alert( b && d ); // false
// || 或运算
// 第一种情况：当表达式全为假时，返回最后一个表达式的值
// alert( d || c ); // null
// 第二种情况：只要有一个表达式为真。就会把回第一个为真的表达式的值
// alert( a || c ); // abc
</script>
</head>
4、数组
4.1、数组定义方式
Js 中 数组的定义：
格式：
var 数组名 = []; // 定义一个空的数组
var 数组名 = [12,”abc”,true]; // 定义数组的同时做初始化
<script type="text/javascript">
var arr = [];//定义一个空数组
// alert(arr.length); // 0
arr[0] = 12;
// alert( arr[0] ); // 12
// alert( arr.length );//1
// 在js的数组中，只要我们通过元素的下标给数组赋值，js就可以根据赋值的最大下标自动的做扩容操作。
arr[2] = "abc";
// alert( arr[2] ); // abc
// alert( arr[1] ); // undefined
// alert( arr.length );//3
// for (var i = 0; i < arr.length; i++) {
// alert(arr[i]);
// }
var arr2 = [12,"监考官！",true];
// alert(arr2.length);
arr2[9] = 12;
alert( arr2.length );
</script>
5.1、函数的二种定义方式
在js中定义一个函数的第一种方法，使用function关键字进行定义。
function 函数名（参数列表）{
函数体
}
函数的调用：函数名( 参数 );
如何定义一个带有返回值的函数。只需要在函数体内直接使用return语句返回需要的值即可。
<script type="text/javascript">
// 定义一个无参函数
function fun1(){
alert("fun1无参函数被调用了");
}
// 调用函数
// fun1();
// 定义一个有参函数
function fun2(a , b){
alert("有参函数fun2被调用了 a->" + a + ",b->" + b);
}
// fun2(12,"abc");
function fun3(num1,num2){
var sum = num1 + num2;
return sum;
}
var result = fun3(100,200);
alert(result);
</script>
函数的第二种定义方式：
var 变量名（函数名） = function(参数列表){
函数体
}
<script type="text/javascript">
…… var fun = function(){
alert("无参函数被调用了！");
};
// fun();
var sum = function(num1,num2){
return num1+num2;
}
alert( sum(100,150) );
</script>
注：在Java中函数允许重载。但是在Js中函数的重载会直接覆盖掉上一次的定义
<script type="text/javascript">
function fun(){
alert("这是fun无参函数");
}
// 注：在Java中函数允许重载。但是在Js中函数的重载会直接覆盖掉上一次的定义
function fun(num1,num2){
alert(num1);
alert("这是fun有参函数");
}
fun();
</script>
5.2、函数的 arguments 隐形参数（只在function函数内）
arguments 它跟java中的可变长参数非常接近。
操作arguments 也跟操作数组一样。
它也是用来接收传递的参数值。
<script type="text/javascript">
// function fun(num1,num2){
// // alert(num1);
// // alert(num2);
// // 取得参数的数量
// // alert( arguments.length );
// // alert( arguments[0] );
// // alert( arguments[1] );
// // alert( arguments[2] );
// // alert( arguments[3] );
// }
// fun(12,24,"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",200,300) );
</script>
Typeof（）判断数据类型
6、JS中的自定义对象
6.1、Object形式的自定义对象
var 变量名 = new Object(); // 创建一个空的对象实例
变量名.属性名 = 值; // 给对象实例添加一个属性。
变量名.函数名 = function(){} // 给对象实例添加一个方法。
如何访问对象：
变量名.属性名/方法名();
<script type="text/javascript">
// Object形式的自定义对象
// var 变量名 = new Object(); // 创建一个空的对象实例
// 变量名.属性名 = 值; // 给对象实例添加一个属性。
// 变量名.函数名 = function(){} // 给对象实例添加一个方法。
var obj = new Object();
obj.name = "华仔";
obj.age = 18;
obj.fun = function(){
alert("姓名：" + this.name + ",年龄：" + this.age);
}
// 如何访问对象：
// 变量名.属性名/方法名();
// alert( obj.name );
obj.fun();
</script>
6.2、{}花括号形式的自定义对象
var 变量名 = { 定义一个空对象。
属性名:值, 给对象实例添加一个属性
函数名:function(){} 给对象实例添加一个方法
};
如何访问对象：
变量名.属性名/方法名();
<script type="text/javascript">
// {}花括号形式的自定义对象
// var 变量名 = { 定义一个空对象。
// 属性名:值, 给对象实例添加一个属性
// 函数名:function(){} 给对象实例添加一个方法
// };
var obj = {
name : "木木很帅！",
age : 18,
fun : function(){
alert("姓名：" + this.name + ",年龄：" + this.age);
}
};
// 如何访问对象：
// 变量名.属性名/方法名();
alert(obj.name);
obj.fun();
</script>
7、js中的事件
什么是事件？事件是电脑输入设备与页面进行交互的响应。我们称之为事件。
常用的事件：
onload加载完成事件 常用于页面加载完成之后做一些功能。
onclick单击事件 常用于用户点击的时候触发功能
onblur失去焦点事件 常用于失去焦点的时候触发的功能
onchange内容发生改变事件 常用于下拉列表，和文本输入框内容发生改变。
onsubmit表单提交事件 常用于表单提交事件的时候。做一些表单验证工作
事件的注册又分为静态注册和动态注册两种：
静态注册事件：通过标签的事件属性上。直接赋于事件响应后的js代码。这种方式我们称之为静态注册。
动态注册事件：指的是先通过js代码查找到标签对象。然后通过标签对象.事件名=function(){} （变量名.函数名 = 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">
function onloadFun(){
alert("这是静态注册的onload事件");
}
// 这是动态注册onload事件的写法
window.onload = function(){
alert("这是动态注册的onload事件");
}
</script>
</head>
<!-- onload静态注册
onload是在浏览器内核解析完页面标签，并加载数据完成之后。自动调用。
<body onload="onloadFun();">
-->
<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("onclick静态注册");
}
// 动态绑定第二个按钮的单击事件
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>
<!-- 静态注册onclick -->
<button onclick="onclickFun()">按钮1(静态)</button>
<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(){
// js 提供了一个专门用来调试输出的对象console
// log 是输出的方法--它可以输出任意数据
console.log("静态注册的onblur事件");
}
//动态注册
window.onload = function(){
//1 获取标签对象
var passObj = document.getElementById("pass");
// alert( passObj );
//2 通过标签对象.事件名 = function(){}
passObj.onblur = function(){
console.log("动态注册的onblur事件");
}
}
</script>
</head>
<body>
<!-- 静态注册onblur事件 -->
用户名：<input type="text" onblur="onblurFun()"/><br/>
密码：<input id="pass" 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("验证表单项是否合法");
alert("发现不合法的表单项--阻止提交");
return false;
}
// 动态注册
window.onload = function(){
// 获取标签对象
var formObj = document.getElementById("form01");
// alert(formObj);
// 通过标签对象.事件名=function(){}
formObj.onsubmit = function(){
alert("动态注册");
alert("验证表单项，发现不合法，阻止 提交");
return false;
}
}
</script>
</head>
<body>
<!-- 静态注册onsubmit事件
onsubmit事件常用于验证表单项是否合法。如果有一个不合法，就要阻止表单提交。提醒用户哪里不合法
如果需要阻止表单提交。只需要在标签上使用return返回false
静态注册return不能省，动态可以省略
-->
<form action="http://www.baidu.com" onsubmit="return onsubmitFun();">
<input type="submit" value="静态onsubmit" />
</form>
<form action="http://www.baidu.com" id="form01">
<input type="submit" value="动态onsubmit" />
</form>
</body>
</html>
8、DOM 模型
DOM 全称是Document Object Model 文档对象模型
大白话，就是把html（xml）文档中的标签，属性，文本，转换成为对象来管理。
那么 它们是如何实现把标签，属性，文本转换成为对象来管理呢
8.1、Document对象
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<Dom> children; // 孩子结点
private String innerHTML; // 起始标签和结束标签中间的内容
}
8.2、Document对象中的方法介绍
document.getElementById(elementId)
通过标签的id属性查找标签dom对象，elementId是标签的id属性值
document.getElementsByName(elementName)
通过标签的name属性查找标签dom对象，elementName标签的name属性值
document.getElementsByTagName(tagname)
通过标签名查找标签dom对象。tagname是标签名
document.createElement(tagName)
方法，通过给定的标签名，创建一个标签对象。tagName是要创建的标签名
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位。
window.onload = function(){
//1 获取按钮的标签对象
var btnObj = document.getElementById("btn01");
//2 通过标签对象.onclick=function(){}
btnObj.onclick = function(){
//1 获取用户名输入框中的内容--当我们想操作某个标签的时候，一定要先获取到这个标签对象。
var usernameObj = document.getElementById("username");
var usenrameTextValue = usernameObj.value;
//2 验证是用户名是否合法。---用户名必须由数字。字母，下划线组成，并且长度是5-12位
// 如果要验证这个规则，就必须要使用正则表达式去验证
var patt = /^\w{5,12}$/;
// test方法就是专门用来验证字符串是否匹配正则表达式
// 匹配就返回true
// 不匹配就返回false
var spanObj = document.getElementById("usernameSpan");
// .innerHTML 表示起始标签和结束标签中的内容
// 它可读可写*********
if (patt.test(usenrameTextValue)) {
//3 提示用户验证的结果。
spanObj.innerHTML = "<img alt=\"\" src='right.png' width='20' height='20'/>";
} else {
// spanObj.innerHTML = "用户名不合法！";
spanObj.innerHTML = "<img alt=\"\" src='wrong.png' width='20' height='20'/>";
}
}
}
</script>
</head>
<body>
用户名：<input id="username" type="text" name="username" value="1234"/>
<span id="usernameSpan">
</span>
<button id="btn01">验证</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 hobbyObjs = document.getElementsByName("hobby");
// 元素个数
// 复选框标签对象checked属性表示选中的状态
for (var i = 0; i < hobbyObjs.length; i++) {
hobbyObjs[i].checked = true;
}
}
//全不选
function checkNo(){
var hobbyObjs = document.getElementsByName("hobby");
// 元素个数
// 复选框标签对象checked属性表示选中的状态
for (var i = 0; i < hobbyObjs.length; i++) {
hobbyObjs[i].checked = false;
}
}
// 反选
function checkReverse(){
// 先获取全部的标签对象
var hobbyObjs = document.getElementsByName("hobby");
for (var i = 0; i < hobbyObjs.length; i++) {
// 遍历判断原来的状态，如果是true，设置false
if (hobbyObjs[i].checked) {
hobbyObjs[i].checked = false;
} else {
// 如果是false，设置true
hobbyObjs[i].checked = true;
}
}
}
</script>
</head>
<body>
兴趣爱好：
<input name="hobby" type="checkbox" value="cpp" checked="checked"/>c++
<input name="hobby" type="checkbox" value="java"/>java
<input name="hobby" type="checkbox" value="js"/>js
<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 是根据标签名进行查找
var inputObjs = document.getElementsByTagName("input");
// 遍历设置每一个标签对象的checked属性，让复选框为选中状态
for (var i = 0; i < inputObjs.length; i++) {
inputObjs[i].checked = true;
}
}
</script>
</head>
<body>
兴趣爱好：
<input type="checkbox" value="cpp" checked="checked"/>c++
<input type="checkbox" value="java"/>java
<input type="checkbox" value="js"/>js
<br/>
<button onclick="checkAll()">全选</button>
</body>
</html>
的使用顺序 是先使用id查找。如果没有id的情况下，优化使用name进行查找。
如果id，和name属性都没有，最后使用标签名查找。
8.3、节点的常用属性和方法
节点 = 标签对象
方法：
通过具体的元素节点调用
getElementsByTagName()
方法，获取当前节点的指定标签名孩子节点
appendChild( oChildNode )
方法，可以添加一个子节点，oChildNode是要添加的孩子节点
属性：
childNodes
属性，获取当前节点的所有子节点
firstChild
属性，获取当前节点的第一个子节点
lastChild
属性，获取当前节点的最后一个子节点
parentNode
属性，获取当前节点的父节点
nextSibling
属性，获取当前节点的下一个节点
previousSibling
属性，获取当前节点的上一个节点
className
用于获取或设置标签的class属性值
innerHTML
属性，表示获取/设置起始标签和结束标签中的内容
innerText
属性，表示获取、设置起始标签和结束标签中的文本
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(){
var liObjs = document.getElementsByTagName("li");
alert( liObjs.length );
};
//3.查找name=gender的所有节点
var btn03Ele = document.getElementById("btn03");
btn03Ele.onclick = function(){
var inputObjs = document.getElementsByName("gender");
alert( inputObjs.length );
};
//4.查找#city下所有li节点
var btn04Ele = document.getElementById("btn04");
btn04Ele.onclick = function(){
//1先查找city节点
var cityObj = document.getElementById("city");
//2通过city.getElementsByTagName()
var lis = cityObj.getElementsByTagName("li");
alert(lis.length);
};
//5.返回#city的所有子节点
var btn05Ele = document.getElementById("btn05");
btn05Ele.onclick = function(){
//1先查找city
var cityObj = document.getElementById("city");
//2通过city对象.childNodes
alert( cityObj.childNodes.length );
};
//6.返回#phone的第一个子节点
var btn06Ele = document.getElementById("btn06");
btn06Ele.onclick = function(){
//1 先查找id为phone的节点
var city = document.getElementById("phone");
//2通过phone节点对象.firstChild获取第一个子节点
alert( city.firstChild.innerHTML );
};
//7.返回#bj的父节点
var btn07Ele = document.getElementById("btn07");
btn07Ele.onclick = function(){
//1 先查找bj节点
var bj = document.getElementById("bj");
//2 通过bj节点.parentNode
alert( bj.parentNode.innerHTML );
};
//8.返回#android的前一个兄弟节点
var btn08Ele = document.getElementById("btn08");
btn08Ele.onclick = function(){
//1 先查找id为android的节点
var androidObj = document.getElementById("android");
//2 通过android节点.previousSibling上一个节点
alert( androidObj.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(){
// .value属性可读可写
document.getElementById("username").value = "xxx";
};
//11.返回#bj的文本值
var btn11Ele = document.getElementById("btn11");
btn11Ele.onclick = function(){
// alert( document.getElementById("bj").innerHTML );
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>
