JavaWeb开发第2节 JavaScript

Posted 2021-12-07 yutianbao

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaWeb开发第2节 JavaScript相关的知识，希望对你有一定的参考价值。

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>

数组常用方法：
- join() 把数组的所有元素放入一个字符串，通过一个分隔符进行分割；
- sort() 对数进行排序（按照字母（字符编码顺序）为数组排序）

var num = [1,2,8,3,9,10,7];
document.write("</br>"+num.sort());   //输出[1,10,2,3,7,8,9]
//如果需要有自己的排序规则，则自己定义排序规则函数
funcion  sortNum(a,b){
    if(a>b){
        return 1;
    }else if(a<b){
        return -1;
    }else{
        return 0;
    }
}
 document.write("</br>"+num.sort(sortNum));   //输出[1,2,3,7,8,9,10]

- push 象数组末尾添加一个或多个元素，并返回新的数组长度

5、函数

　　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是要创建的标签名的使用顺序是先使用id查找。如果没有id的情况下，优化使用name进行查找。如果id，和name属性都没有，最后使用标签名查找。

/*************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>

　　技术图片

　　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>