网页部分第四次培训——JavaScript

最新推荐文章于 2024-04-02 14:52:01 发布

HHUCESTA

最新推荐文章于 2024-04-02 14:52:01 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/NOTFOUND_Liu/article/details/90380854

版权

文章目录

JavaScript第一讲
JavaScript第二讲
四、Struts2框架

JavaScript第一讲

一、简介

HTML、CSS、JavaScript被称为“前端三剑客”，它们各司其职，共同完成网页前端的酷炫功能。其中，HTML负责一个页面的结构，CSS负责一个页面的样式，JavaScript则是负责与用户进行交互。
JavaScript，简称js，是前端开发的一门语言。其作用是验证发往服务端的数据、增加Web互动、加强用户体验度。它有三个特点：交互性（信息的动态交互）、安全性（不可以直接访问本地硬盘）、跨平台性（浏览器就可以解析js）。

  js由三大部分组成：1、核心：语法部分2、文档对象模型DOM 3、浏览器对象

二、JS语法

2.1准备工作

编写JavaScript脚本不需要任何特殊的软件，只需一个普通的文本编辑器和一个Web浏览器就足够了。用JavaScript编写的代码必须通过HTML/XHTML文档才能执行。
方法一：将JavaScript代码放到文档< head >标签中的< script >标签之间。

1.     <!DOCTYPE html>  
2.     <html lang="en">  
3.     <head>  
4.         <meta charset="UTF-8">  
5.         <title>Document</title>  
6.         <script type="text/javascript">  
7.         JavaScript goes here...  
8.         </script>  
9.     </head>  
10.    <body>  
11.        Mark-up goes here...  
12.    </body>  
13.    </html>

方法二：将JavaScript代码存为一个扩展名为.js的独立文件。典型做法是在文档的< head >部分放一个< script >标签，并把它的src属性指向该文件。

1.     <!DOCTYPE html>  
2.     <html lang="en">  
3.     <head>  
4.         <meta charset="UTF-8">  
5.         <title>Document</title>  
6.         <script src="file.js"></script>  
7.     </head>  
8.     <body>  
9.         Mark-up goes here...  
10.    </body>  
11.    </html>

最好的做法是把< script >标签放到HTML文档的最后，< /body >标签之前，这样浏览器能够更快的加载页面：

1.     <!DOCTYPE html>  
2.     <html lang="en">  
3.     <head>  
4.         <meta charset="UTF-8">  
5.         <title>Document</title>  
6.     </head>  
7.     <body>  
8.         Mark-up goes here...  
9.     <script src="file.js"></script>  
10.    </body>  
11.    </html>

2.2语法

2.2.1语句

JavaScript语句是发给浏览器的命令。这些命令的作用是告诉浏览器要做的事情。
程序员只需将各条语句放在不同的行上就可以分隔它们，如下所示：

1.     first statement  
2.     second statement

也可将其放在同一行上：

first statement;second statement;

但我们建议养成良好的编程习惯：

1.     first statement;  
2.     second statement;

2.2.1注释

不是所有的语句都需要JavaScript解释器去解释并执行。有时需要在脚本中添加一些仅供自己参考或提醒自己的信息，这类语句称为注释。
注释分为两种：
① 单行注释：使用这种注释就必须在每个注释行的开头加上//。

1.     //自我提醒：    
2.     //有注释是好事

② 多行注释:在注释内容的开头加上一个斜线和一个星号（/），在注释内容的末尾加上一个星号和一个斜线（/）。

1.     /*自我提醒：   
2.       有注释是好事*/

这种注释在需要插入大段注释时可以提高整个脚本的可读性。

2.2.3变量

什么是变量? 从字面上看，变量是可变的量；从编程角度讲，变量是用于存储某种/某些数值的存储器。我们可以把变量看做一个盒子，为了区分盒子，可以用BOX1,BOX2等名称代表不同盒子，BOX1就是盒子的名字（也就是变量的名字）。
1、定义变量使用关键字var,语法如下：

     var 变量名

2、变量名可以任意取名，但要遵循命名规则:
①变量允许包含字母、数字、下划线( _ )或者美元符( $ )，第一个字符不允许是数字，且不允许变量名中包含空格或标点符号，$除外。
②可以使用任意多个英文字母、数字、下划线( _ )或者美元符( $ )组成。
③不能使用JavaScript关键词与JavaScript保留字。
3、变量要先声明再赋值，如下：

1.     var mychar;  
2.     mychar="javascript";  
3.     var mynum = 6;

4、变量可以重复赋值，如下：

1.     var mychar;  
2.     mychar="javascript";  
3.     mychar="hello";

注意:
①在JS中区分大小写，如变量mood与Mood是不一样的，表示是两个变量。
②变量虽然也可以不声明，直接使用，但不规范，提前声明是一种良好的编程习惯。

2.2.4数据类型

1、字符串：字符串由零个或多个字符构成。字符包括（但不限于）字母、数字、标点符号和空格。字符串必须包在引号里，单引号或双引号都可以。下面两条语句含义是完全相同的：

1.     var mood='happy';  
2.     var mood="happy";

注意：选用引号时最好根据字符串中包含的字符来选择。如果字符串包含双引号，就把整个字符串放在单引号里；反之，则放在双引号里：

var mood="don't ask";

如果想在上面这条语句中使用单引号，就必须保证字幕“n”和“t”之间的单引号能被当成这个字符串的一部分。这种情况我们需对这个字符进行转义。在JavaScript里用反斜线对字符进行转义：

var mood='don\'t ask';

双引号亦然。作为一个好的编程习惯，不管选择双引号还是单引号，在整个脚本中保持一致，提高脚本的可读性。
2、数值：JavaScript允许使用带小数点的数值，并且允许任意位小数，这样的数称为浮点数：

var age=33.25;

也可使用负数：

var temperature=-20.333333;

3、布尔值：布尔数据只有两个可选值——true或false。假设需要这样一个变量：如果我正在睡觉，这个变量将存储一个值；如果我没有睡觉，这个变量将存储于另一个值，此时使用布尔数据类型显然是一个更好的选择：

var sleeping=true;

作为最基本的事实，所有的电子电路智能识别和使用布尔数据：电路中有电流或是没有电流。
注意：布尔值不是字符串，千万不要把布尔值用引号括起来。布尔值false和字符串“false”是两码事！

2.2.5数组

1、数组是指用一个变量表示一个值的集合，集合中的每个值都是这个数组的一个元素。
2、在JavaScript中，数组用关键字Array声明。在声明数组的同时可以指定数组初始元素个数，也就是这个数组的长度：

var team=Array(4);

但JavaScript不要求在声明数组时必须给出元素个数：

var team=Array();

3、向数组中添加元素的操作称为填充。在填充数组时，不仅需要给出新元素的值，还需要给出新元素在数组中的存放位置，这个位置就是这个元素的下标。下标必须用方括号括起来：

1.     team[0]="John";  
2.     team[1]="Ringo";  
3.     team[2]="Amy";  
4.     team[3]="Paul";

注意：下标是从0开始的！
有一种相对简单的方式：在声明数组的同时对它进行填充，这种方式要求用逗号把各个元素隔开：

var team=Array("John","Ringo","Amy","Paul");

甚至不用明确地表明我们是在创建数组，只需用一对方括号把各个元素的初始值括起来：

var team=["John","Ringo","Amy","Paul"];

数组元素不必非得是字符串，可以把多种数据类型混合在一起，可以是布尔值、数值，甚至可以是变量：

1.     var lennon=["John",1940,false];  
2.     var beatles=[];  
3.     var name="Ringo";  
4.     beatles[0]=lennon;  
5.     beatles[1]=name;

4、关联数组：在为新元素给出下标时，不必局限于使用整数数字，也可以使用字符串。

1.     var lennon=Array();  
2.     lennon["name"]="John";  
3.     lennon["year"]=1940;  
4.     lennon["living"]=false;

2.2.6对象

在JavaScript中，所有变量实际上都是某种类型的对象。比如，一个布尔值就是一个Boolean类型的对象，一个数组就是一个Array类型的对象。上面这个例子中实际是给lennon数组添加了name、year和living三个属性，可以建成如下的对象：

1.     var lennon=Object();  
2.     lennon.name="John";  
3.     lennon.year=1940;  
4.     lennon.living=false;

创建对象使用Object关键字，并使用点号来获取属性。创建对象还有一种更简洁的语法，即花括号法：

var lennon={name:"John",year:1940,living:false};

用对象来代替传统数组的做法意味着可以通过元素的名字而不是下标数字来引用它们。这大大提高了脚本的可读性。

2.3操作

加法、减法、除法、乘法这些算术操作都是必须借助于相应的操作符才能完成，操作符是JavaScript为完成各种操作而定义的一些符号，包括=，+，-、/、*、++、–。
变量可包含操作，也可以对变量进行操作。
加号（+）是比较特殊的操作符，它既可以用于字符串：

var message="I am feeling"+"happy";

像这样把多个字符串首尾相连在一起的操作叫做拼接。这种拼接也可以通过变量来完成：

1.     var mood="happy";  
2.     var message="I am feeling"+mood;

甚至可以把数值和字符串拼接在一起：

1.     var year=2005;  
2.     var message="The year is"+year;

注：如果把字符串和数值拼接在一起，其结果将是一个更长的字符串；但如果用同样的操作符来拼接两个数值，其结果将是那两个数值的算术和。

1.     alert("10"+20);  
2.     alert(10+20);

另一个非常有用的操作符是+=（同时完成“加法和赋值”）

1.          var year=2010;  
2.     var message="The year is";  
3.     message+=year;  
4.     alert(message);

2.4条件语句

2.4.1比较操作符

如大于（>）、小于（<）、大于或等于（>=）、小于或等于（<=）、等于（ = = ）、不等于（！=）等。
注：这里的相等操作符 = = 并不表示严格相等于

1.     var a=false;  
2.     var b=" ";  
3.     if(a==b){ alert("a equal b"); }

运行会有对话框弹出，因为相等操作符= =认为空字符串与false的含义相同。
要进行严格比较，就要使用另一种等号（===）。这个全等操作符会执行严格的比较，不仅比较值，而且会比较变量的类型。

1.     var a=false;  
2.     var b=" ";  
3.     if(a===b){  
4.       alert("a equals b");  
5.     }

对于不等操作符！=也是如此。如果想比较严格不想等，就要用！==。

2.4.2逻辑操作符

1、逻辑与&&：操作只有在它的两个操作数都是true时才会是true。

1.     var num=6;  
2.     if(num>=5&&num<=10)  
3.     {  
4.       alert("The number is in the right range.");  
5.     }

2、逻辑或||：操作只有在它的两个操作数都是false时才会是false。

1.     if(num>10||num<5)  
2.     {  
3.         alert("The number is not in the right range.");  
4.     }

3、逻辑非！：如果那个逻辑操作数所返回的布尔值是true，“逻辑非”操作符将把它取反为false。

1.     if(!(1>2))  
2.     {  
3.         alert("All is well with the world");  
4.     }

2.5循环语句

2.5.1while循环

while循环

1.     var count=1;  
2.     while(count<11){  
3.       alert(count);  
4.       count++;  
5.     }

这一操作将重复执行10次，如果用Web浏览器来观察这段代码，你将会看到alert对话框闪现了10次。最后，count的数值为11。
do…while循环
对于do…while循环语句来说，花括号里的语句至少会被执行一次。

1.     var count=1;  
2.     do{  
3.       alert(count);  
4.       count++;  
5.     }while(count<11);

同样，alert对话框会闪现10次。最后，count的数值为11。
for循环
相较于while循环，for循环的好处是循环控制结构更加清晰。

1.     for(var count=1;count<11;count++){  
2.       alert(count);  
3.     }

for循环最常见的用途之一是对某个数组里的全体元素进行遍历处理。这需要array.length属性，数组的下标从0开始：

1.     var team=Array("A","B","C","D","E");  
2.     for(var count=0;count<team.length;count++)  
3.     {  
4.        alert(team[count]);  
5.     }//运行这段代码，将看到4条alert消息

2.6函数

函数（function）是一组允许在你的代码里随时调用的语句。每个函数实际上是一个短小的脚本。
作为一种良好的编程习惯，应该先对函数做出定义再调用它们。

1.     function shout(){  
2.        var team=Array("A","B","C","D","E");    
3.        for(var count=0;count<team.length;count++)    
4.        {    
5.           alert(team[count]);    
6.         }  
7.     }  
8.     shout();

在定义函数时，可以声明任意多个参数，只要用逗号把它们分隔开来：

1.     function multiply(num1,num2){  
2.            var total=num1*num2;  
3.            alert(total);  
4.     }  
5.     multiply(10,2）；//此时，屏幕上会弹出一个显示乘法运算（20）的alert对话框。

函数不仅可以（以参数的形式）接收数据，也能够返回数据。
我们可以创建一个函数并让它返回一个数值、一个字符串、一个数组或一个布尔值。这时需要用到return语句：

1.     function multiply(num1,num2){  
2.            var total=num1*num2;  
3.            return total;  
4.     }  
5.     alert(multiply(10,2))；//此时，屏幕上会弹出一个显示乘法运算（20）的alert对话框。

变量的作用域
1、全局变量可以在脚本的任何位置被引用。一旦你在某个脚本里声明了一个全局变量，就可以从这个脚本的任何位置—包括函数内部—引用它。全局变量的作用域是整个脚本。
2、局部变量只存在于声明它的那个函数内部，在那个函数的外部是无法引用它的。局部变量的作用域仅限于某个特定的函数。
3、为了防止全局变量和局部变量发生混淆，我们可以使用var关键字明确地为函数变量设定作用域。如果在某个函数中使用了var，那个变量就将被视为一个局部变量，它只存在于这个函数的上下文中；反之，如果没有使用var，那个变量就将被视为一个全局变量，如果脚本里已经存在一个与之同名的全局变量，这个函数就会改变那个全局变量的值。

1.     function square(num){  
2.       total=num*num;  
3.       return total;  
4.     }  
5.     var total=50;  
6.     var number=square(20);  
7.     alert(total);

这段代码的本意是让square函数把它计算出来的平方值返回给变量number，但因为未把这个函数内部的total变量明确地声明为局部变量，这个变量把同样是total的那个全局变量的值也改变了。

1.     function square(num){  
2.       var total=num*num;  
3.       return total;  
4.     }  
5.     var total=50;  
6.     var number=square(20);  
7.     alert(total);

现在，全局变量total变得安全了，无论怎么调用square函数也不会影响到它了。

三、互动方式

3.1 JavaScript-输出内容（document.write）

document.write() 可用于直接向 HTML 输出流写内容。简单的说就是直接在网页中输出内容。
第一种:输出内容用"“括起，直接输出”"号内的内容。

1.     <script type="text/javascript">  
2.       document.write("I love JavaScript！"); //内容用""括起来，""里的内容直接输出。  
3.     </script>

第二种:通过变量，输出内容

1.     <script type="text/javascript">  
2.       var mystr="hello world!";  
3.       document.write(mystr);  //直接写变量名，输出变量存储的内容。  
4.     </script>

第三种:输出多项内容，内容之间用+号连接。

1.     <script type="text/javascript">  
2.       var mystr="hello";  
3.       document.write(mystr+"I love JavaScript"); //多项内容之间用+号连接  
4.     </script>

第四种:输出HTML标签，并起作用，标签使用""括起来。

1.     <script type="text/javascript">  
2.       var mystr="hello";  
3.     document.write(mystr+"<br>");//输出hello后，输出一个换行符  
4.       document.write("JavaScript");  
5.     </script>

在写JS代码的时候，大家可以会发现这样现象:

document.write("   1     2                3  ");

结果:1 2 3

无论在输出的内容中什么位置有多少个空格，显示的结果好像只有一个空格。

这是因为浏览器显示机制，对手动敲入的空格，将连续多个空格显示成1个空格。

解决方法:
1.使用输出html标签来解决

document.write("&nbsp;&nbsp;"+"1"+"&nbsp;&nbsp;&nbsp;&nbsp;"+"23");

结果: 1 23
2.使用CSS样式来解决

document.write("<spanstyle='white-space:pre;'>"+" 1        2    3   "+"</span>");

结果: 1 2 3
在输出时添加“white-space:pre;”样式属性。这个样式表示"空白会被浏览器保留"

3.2 JavaScript-警告（alert 消息对话框）

我们在访问网站的时候，有时会突然弹出一个小窗口，上面写着一段提示信息文字。如果你不点击“确定”，就不能对网页做任何操作，这个小窗口就是使用alert实现的。

语法:alert(字符串或变量);

看下面的代码:

1.     <script type="text/javascript">  
2.        var mynum = 30;  
3.        alert("hello!");  
4.        alert(mynum);  
5.     </script>

注:alert弹出消息对话框(包含一个确定按钮)。

结果:按顺序弹出消息框

注意:

在点击对话框"确定"按钮前，不能进行任何其它操作。
消息对话框通常可以用于调试程序。
alert输出内容，可以是字符串或变量，与document.write 相似。

3.3 JavaScript-确认（confirm 消息对话框）

confirm 消息对话框通常用于允许用户做选择的动作，如：“你对吗？”等。弹出对话框(包括一个确定按钮和一个取消按钮)。

语法:confirm(str);

参数说明:
str：在消息对话框中要显示的文本。
返回值:Boolean值。

返回值：

当用户点击"确定"按钮时，返回true;当用户点击"取消"按钮时，返回false。通过返回值可以判断用户点击了什么按钮。
以下面代码为例，尝试运行：

1.     <script type="text/javascript">  
2.         var mymessage=confirm("你喜欢JavaScript吗?");  
3.         if(mymessage==true)  
4.         {   document.write("很好,加油!");   }  
5.         else  
6.         {  document.write("JS功能强大，要学习噢!");   }  
7.     </script>

注: 消息对话框是排它的，即用户在点击对话框按钮前，不能进行任何其它操作。

3.4 JavaScript-提问（prompt 消息对话框）

prompt弹出消息对话框,通常用于询问一些需要与用户交互的信息。弹出消息对话框（包含一个确定按钮、取消按钮与一个文本输入框）。
语法:prompt(str1, str2);
参数说明：
str1: 要显示在消息对话框中的文本，不可修改
str2：文本框中的内容，可以修改
返回值:
1. 点击确定按钮，文本框中的内容将作为函数返回值
2. 点击取消按钮，将返回null
以下面的代码为例：

1.     var myname=prompt("请输入你的姓名:");  
2.     if(myname!=null)  
3.       {   alert("你好"+myname); }  
4.     else  
5.       {  alert("你好 my friend.");  }

注:在用户点击对话框的按钮前，不能进行任何其它操作

3.5 JavaScript-打开新窗口（window.open）

open()方法可以查找一个已经存在或者新建的浏览器窗口。
语法：
window.open([URL],[窗口名称], [参数字符串])
参数说明:
URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。
窗口名称：可选参数，被打开窗口的名称。
1.该名称由字母、数字和下划线字符组成。
2."_top"、"_blank"、"_self"具有特殊意义的名称。
_blank：在新窗口显示目标网页
_self：在当前窗口显示目标网页
_top：框架网页中在上部窗口中显示目标网页
3.相同name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。
4.name不能包含有空格。
参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。
例如:打开http://www.imooc.com网站，大小为300px * 200px，无菜单，无工具栏，无状态栏，有滚动条窗口：

1.     <script type="text/javascript"> 
2.    window.open('http://www.imooc.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')  
3.     </script>

注意：运行结果考虑浏览器兼容问题。

3.6 JavaScript-关闭窗口（window.close）

close()关闭窗口
用法：
window.close(); //关闭本窗口
或
<窗口对象>.close(); //关闭指定的窗口
例如:关闭新建的窗口。

1.     <script type="text/javascript">  
2.        var mywin=window.open('http://www.imooc.com'); //将新打的窗口对象，存储在变量mywin中  
3.        mywin.close();  
4.     </script>

注意:上面代码在打开新窗口的同时，关闭该窗口，看不到被打开的窗口

JavaScript第二讲

一、事件响应

1.1 什么是事件

JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。比如说，当用户单击按钮或者提交表单数据时，就发生一个鼠标单击（onclick）事件，需要浏览器做出处理，返回给用户一个结果。

1.2 鼠标单击事件（onclick）

onclick是鼠标单击事件，当在网页上单击鼠标时，就会发生该事件。同时onclick事件调用的程序块就会被执行，通常与按钮一起使用。
在这里插入图片描述

1.3 鼠标经过事件（onmouseover）

鼠标经过事件，当鼠标移到一个对象上时，该对象就触发onmouseover事件，并执行onmouseover事件调用的程序。将上述代码改为鼠标经过触发：
在这里插入图片描述

1.4 鼠标移开事件（onmouseout）

同理，鼠标移开事件，当鼠标移开当前对象时，执行onmouseout调用的程序。

1.5 光标聚焦事件（onfocus）

当网页中的对象获得聚点时，执行onfocus调用的程序就会被执行。
举例：
在这里插入图片描述

1.6 失焦事件（onblur）

onblur事件与onfocus是相对事件，当光标离开当前获得聚焦对象的时候，触发onblur事件，同时执行被调用的程序。
假如网页中有用户和密码两个文本框。当前光标在用户文本框内时（即焦点在文本框），在光标离开该文本框后（即失焦时），触发onblur事件，并调用相关函数。

1.7 内容选中事件（onselect）

选中事件，当文本框或者文本域中的文字被选中时，触发onselect事件，同时调用的程序就会被执行

1.8 文本框内容改变事件（onchange）

通过改变文本框的内容来触发onchange事件，同时执行被调用的程序。当文本框的内容改变则触发onchange事件，同时执行被调用的程序。

二、浏览器对象

2.1 JavaScript 计时器概念

在JavaScript中，我们可以在设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。
计时器类型：
一次性计时器：仅在指定的延迟时间之后触发一次。
间隔性触发计时器：每隔一定的时间间隔就触发一次。

2.2 计时器setInterval()

在执行时,从载入页面后每隔指定的时间执行代码。
语法:
setInterval(代码,交互时间);
参数说明：
1.代码：要调用的函数或要执行的代码串。
2.交互时间：周期性执行或调用表达式之间的时间间隔，以毫秒计（1s=1000ms）。
返回值:
一个可以传递给 clearInterval() 从而取消对”代码”的周期性执行的值。
举例：
在这里插入图片描述

2.3 取消计时器clearInterval()

clearInterval() 方法可取消由 setInterval() 设置的交互时间。
语法：
clearInterval(id_of_setInterval)
参数说明:
id_of_setInterval：由 setInterval() 返回的 ID 值。
举例：
在这里插入图片描述

2.4 计时器setTimeout()

setTimeout()计时器，在载入后延迟指定时间后,去执行一次表达式,仅执行一次。
语法:
setTimeout(代码,延迟时间);
参数说明：

要调用的函数或要执行的代码串。
延时时间：在执行代码前需等待的时间，以毫秒为单位（1s=1000ms)。

2.5 取消计时器clearTimeout()

同clearInterval（）；
语法:
clearTimeout(id_of_setTimeout)
参数说明:
id_of_setTimeout：由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。

三、DOM对象

3.1 认识DOM

文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。
HTML DOM树：
在这里插入图片描述

3.2 getElementByID()方法

返回带有指定id的节点对象
语法:
document.getElementsById(id)
说明:

id是标签的id

3.3 getElementsByName()方法

返回带有指定名称的节点对象的集合。
语法：
document.getElementsByName(name)
与getElementById() 方法不同的是，通过元素的 name 属性查询元素，而不是通过 id 属性。

3.4 getElementsByTagName()方法

返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。
语法:
document.getElementsByTagName(Tagname)
说明:

Tagname是标签的名称，如p、a、img等标签名。
和数组类似也有length属性，可以和访问数组一样的方法来访问，所以从0开始。

3.5 区别getElementByID,getElementsByName,getElementsByTagName

以人来举例说明，人有能标识身份的身份证，有姓名，有类别(大人、小孩、老人)等。

ID 是一个人的身份证号码，是唯一的。所以通过getElementById获取的是指定的一个人。
Name 是他的名字，可以重复。所以通过getElementsByName获取名字相同的人集合。
TagName可看似某类，getElementsByTagName获取相同类的人集合。如获取小孩这类人，getElementsByTagName(“小孩”)。
举例：

//用三种不同方式获取节点并打印出它们的数量
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function getnum(){
/*第一种*/
alert(document.getElementById("hobby1").length);
alert(document.getElementById("hobby1").nodeName);
/*第二种*/
alert(document.getElementsByName("hobby").length);
/*第三种*/
alert(document.getElementsByTagName("input").length);

}
</script>
</head>
<body>
  <input type="checkbox" name="hobby" id="hobby1">  音乐
  <input type="checkbox" name="hobby" id="hobby2">  登山
  <input type="checkbox" name="hobby" id="hobby3">  游泳
  <input type="checkbox" name="hobby" id="hobby4">  阅读
  <input type="checkbox" name="hobby" id="hobby5">  打球
  <input type="checkbox" name="hobby" id="hobby6">  跑步 
  <input type="button" value = "全选" id="button1">
  <input type="button" value = "全不选" id="button1">
<br />
<input type="button" onclick="getnum()" value="看看有几项？" />
</body>
</html>

3.6 getAttribute()方法

通过元素节点的属性名称获取属性的值。
语法：
elementNode.getAttribute(name)
说明:

elementNode：使用getElementById()、getElementsByTagName()等方法，获取到的元素节点。
name：要想查询的元素节点的属性名字
举例：

3.7 setAttribute()方法

setAttribute() 方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。
语法：
elementNode.setAttribute(name,value)
说明：
1.name: 要设置的属性名。
2.value: 要设置的属性值。
注意：
1.把指定的属性设置为指定的值。如果不存在具有指定名称的属性，该方法将创建一个新属性。
2.类似于getAttribute()方法，setAttribute()方法只能通过元素节点对象调用的函数。

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function change(){
    //改变input标签里面的value值
    var temp = document.getElementById("hobby1");
    temp.setAttribute("value","小花")

}
//实现全选与全不选功能
function change1(){
    //改变input标签里面的value值
    var temp = document.getElementsByName("hobby");
    for(var i=1;i<temp.length;i++){
        temp[i].checked = true;
    }

}
function change2(){
    //改变input标签里面的value值
    var temp = document.getElementsByName("hobby");
    for(var i=1;i<temp.length;i++){
        temp[i].checked = false;
    }

}
</script>
</head>
<body>
  <input type="text" name="hobby" id="hobby1" value=”音乐”> 
  <input type="checkbox" name="hobby" id="hobby2" >  登山
  <input type="checkbox" name="hobby" id="hobby3">  游泳
  <input type="checkbox" name="hobby" id="hobby4">  阅读
  <input type="checkbox" name="hobby" id="hobby5">  打球
  <input type="checkbox" name="hobby" id="hobby6">  跑步 
  <input type="button" value = "全选" id="button1" onclick="change1()">
  <input type="button" value = "全不选" id="button1" onclick="change2()">
<br />
<input type="button" onclick="change()" value="看看有几项？" />
</body>
</html>

3.8 访问子节点childNodes

访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，他具有length属性。
语法：
elementNode.childNodes
注意：
如果选定的节点没有子节点，则该属性返回不包含节点的 NodeList。

3.9 节点属性

在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性：

nodeName : 节点的名称
nodeValue ：节点的值
nodeType ：节点的类型

一、nodeName 属性: 节点的名称，是只读的。

元素节点的 nodeName 与标签名相同
属性节点的 nodeName 是属性的名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document

二、nodeValue 属性：节点的值

元素节点的 nodeValue 是 undefined 或 null，例如：

均为元素节点。
文本节点的 nodeValue 是文本自身，例如：
“Hello,World”
中 “Hello,World”等属于文本节点。
属性节点的 nodeValue 是属性的值，例如：
中class=”lucy”属于属性节点。
（第一步假设等等我们的html的结构是一本书，那么元素节点就是每页书，而文本节点则是每页书中的文字，属性节点就是这些文字的颜色，字体）

三、nodeType 属性: 节点的类型，是只读的。以下常用的几种结点类型:

元素	节点类型
元素	1
属性	2
文本	3
注释	8
文档	9

3.10 访问子节点的第一和最后项

1.firstChild 属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。
语法：
node.firstChild
说明：与elementNode.childNodes[0]是同样的效果。

2.lastChild 属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。
语法：
node.lastChild
说明：
与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果。
举例：

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function text(){
    //获取父节点
    var container = document.getElementById("container");
    //获取子节点集合
    var t1 = container.childNodes;
    for(var i=0; i<t1.length; i++)   
    {   
        var node = t1[i];   
        if(node.nodeType == 3 && !/\S/.test(node.nodeValue))   
        {   
            //删除空白子节点
            node.parentNode.removeChild(node);   
        }   
    }  

    //获取第一个子节点
    var firstChild = container.firstChild;
    alert(firstChild.value);
    //获取第二个子节点
    var t2 = t1[1];
    alert(t2.innerHTML);

}
</script>
</head>
<body>
<div id="container">
  <input type="text" name="hobby" id="hobby1" value=”音乐”>
   <span>lalala</span> 
  <input type="checkbox" name="hobby" id="hobby2">  登山
  <input type="checkbox" name="hobby" id="hobby3">  游泳
  <input type="checkbox" name="hobby" id="hobby4">  阅读
  <input type="checkbox" name="hobby" id="hobby5">  打球
  <input type="checkbox" name="hobby" id="hobby6">  跑步 
  <input type="button" value = "全选" id="button1">
  <input type="button" value = "全不选" id="button1">
</div>
<input type="button" onclick="text()" value="看看有几项？" />
<span id="content"></span>
</body>
</html>

3.11 访问父节点parentNode

获取指定节点的父节点
语法：
elementNode.parentNode

3.12 访问兄弟节点

nextSibling 属性可返回某个节点之后紧跟的节点（处于同一树层级中）。
语法：
nodeObject.nextSibling
说明：如果无此节点，则该属性返回 null。

previousSibling 属性可返回某个节点之前紧跟的节点（处于同一树层级中）。
语法：
nodeObject.previousSibling
说明：
如果无此节点，则该属性返回 null。
注意:
两个属性获取的是节点。Internet Explorer 会忽略节点间生成的空白文本节点（例如，换行符号），而其它浏览器不会忽略。
解决问题方法:
判断节点nodeType是否为1, 如是为元素节点，跳过。

3.13 插入节点appendChild()

在指定节点的最后一个子节点列表之后添加一个新的子节点。
语法:
appendChild(newnode)
参数:
newnode：指定追加的节点

3.14 插入节点insertBefore()

insertBefore() 方法可在已有的子节点前插入一个新的子节点。
语法:
insertBefore(newnode,node);
参数:
newnode: 要插入的新节点。
node: 指定此节点前插入节点。

3.15 删除节点removeChild()

removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。

语法:
nodeObject.removeChild(node)
参数:
node ：必需，指定需要删除的节点。

3.16 替换元素节点replaceChild()

replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。

语法：
node.replaceChild (newnode,oldnew )
参数：
newnode : 必需，用于替换 oldnew 的对象。
oldnew : 必需，被 newnode 替换的对象。

3.17 创建元素节点createElement

createElement()方法可创建元素节点。此方法可返回一个 Element 对象。

语法：
document.createElement(tagName)
参数:
tagName：字符串值，这个字符串用来指明创建元素的类型。
注意：
要与appendChild() 或 insertBefore()方法联合使用，将元素显示在页面中。

四、Struts2框架

4.1 用idea新建struts2工程

参考网站： IDEA创建struts2项目
所需用到的jar包：struts2官网
在这里插入图片描述

4.2 Struts2的运行流程

4.2.1 HttpServletRequest进入到StrutsPrepareAndExecuteFilter

在web.xml中配置的filter:StrutsPrepareAndExecuteFilter这个也是Struts2的核心，在Struts项目中所有的请求都需要经过它的处理。（注意：更早的版本会有所不同）当每次启动服务器的时候第一次请求都会调用该类的init方法，随后的请求会调用doFilter；
通过FilterDispacther后会进入到ActionMapper，ActionMapper这个类是一个接口就是用来匹配当前的请求是否有对应的action。它有4个实现类分别是:RestfulActionMapper，DefaultActionMapper(默认使用)。
4.2.2 StrutsPrepareAndExecuteFilter调用dispatcher类的serviceAction创建ActionProxy

得到ActionMapping后接着执行execute.executeAction方法。此时 StrutsPrepareAndExecuteFilter会调用dispatcher这个类的serviceAction，这个方法会对valuStatck等进行处理，重要的是这边会根据ActionMapping这个对象中的属性以configurationManager（加载Struts2的配置文件）来生成一个ActionProxy如果这个ActionProxy成功创建的话会执行execute方法反之如果匹配不到Action即无法生成相应的代理对象会返回404页面。
4.2.3通过ActionProxy对象调用Actioninvocation的invoke方法执行所有的拦截器

ActionProxy的execute方法中最后执行的是Actioninvocation（创建ActionProxy过程中默认生成的是它的子类DefaultActionInvocation）的invoke方法，Strtus2从这里开始对拦截器进行处理，这边的interceptors集合在初始化ActionProxy的时候通过配置文件（struts的Struts-default.xml中）得到。intercept方法时候Struts会把所有的拦截器执行一遍，接着执行请求所指的action中的方法并且按照后进先出的规则执行先前的拦截器
4.2.4 执行HttpServletRequest对应的Action方法并返回Result

当到了最后一个拦截器DeprecationInterceptor（默认配置情况下最后一个）的时候，此时interceptors.HasNext()为false，因此执行invokeActionOnly方法。这个方法是用来执行ActionProxy代理的那个Action方法并获得Result的过程，该过程用了Java的反射机制来实现。最后按照后进先出的方式依次返回所有拦截器的值最终返回Result视图。

4.2.5总结

客户端提交一个HttpServletRequest请求。
请求被提交到一系列的过滤器（Filter）。如（ActionContextCleanUp，其他过滤器（SiteMesh等）、 FilterDispatcher。注意：这里是有顺序的，先ActionContext CleanUp，再其他过滤器（Othter Filters、SiteMesh等），最后到FilterDispatcher。FilterDispatcher是控制器的核心，就是MVC的Struts 2实现中控制层（Controller）的核心。常规情况官方推荐使用StrutsPrepareAndExecuteFilter替代FilterDispatcher。
FilterDispatcher询问ActionMapper是否需要调用某个Action来处理这个（HttpServlet Request）请求，如果ActionMapper决定需要调用某个Action，FilterDispatcher则把请求的处理交给ActionProxy。
ActionProxy通过Configuration Manager（struts.xml）询问框架的配置文件，找到需要调用的Action类。
ActionProxy创建一个ActionInvocation实例，同时ActionInvocation通过代理模式调用Action。(有点类似与递归操作)，但在调用之前，ActionInvocation会根据配置加载Action相关的所有Interceptor（拦截器）。
Action执行完毕后，ActionInvocation负责根据struts.xml中的配置找到对应的返回结果result。

4.3 struts.xml配置文件各种属性详解

4.3.1 package配置
Struts2框架的核心组件是Action和拦截器，使用包来管理Action和拦截器。每个包就是多个Action、多个拦截器及引用的集合。在struts.xml文件中，package元素用于定义包配置，package元素的常用属性，如下：

属性	说明
name	必填属性，定义该包的名字，该名字就是其他包引用此包的key
namespace	可选属性，定义该包的命名空间
extends	可选属性，指该包继承自其他包，同时继承了Action和拦截器通常为struts-default(该包中Action包含Struts2框架默认拦截器等功能）
abstract	可选属性，指该包不是一个抽象包，抽象包不能包含Action定义

在package配置中的namespace属性和action标签中的name属性共同决定了访问路径。namespace有如下三种配置：

默认命名空间：namespace=””
根命名空间：namespace=”/”
有值的命名空间：namespace=”/hello”
eg：

<package name="default" namespace="/" extends="struts-default">

4.3.2 Action配置
action映射就是将请求的URL映射到一个action类并转交到相应的方法，
action元素共有四个属性，分别如下：

属性	说明
name	必填属性，标识Action，与namespace共同决定了Action所处理请求的URL
class	可选属性，指定当前请求对应的Action类全路径
method	可选属性，指定请求对应的Action类中的具体处理方法，默认为execute
converter	可选属性，指定类型转换器的类

eg：

<action name="Login" class="com.action.LoginAction" method="execute">

4.3.3 result 配置

name属性: 标识结果处理的名称.与action方法的返回值对应.
type属性: 指定调用哪一个result类来处理结果,默认使用转发.
标签体:填写页面的相对路径
eg:

<result name="success">/success.jsp</result>