自定义列表
<dl></dl>：表示列表的范围
**在里面 <dt></dt>：上层内容
**在里面 <dd></dd>：下层内容
有序列表
<ol></ol>：有序列表的范围
--属性 type：设置排序方式，1(默认),a,i、、
**在ol标签里面 <li>具体内容</li>
无序列表
<ul></ul>：无序列表的范围
--属性 type：circle(空心圆)、disc(默认的实心圆)、square(实心方块)
**在ul标签里面 <li>具体内容</li>
图像标签
--属性：src、width、height、alt(图片上显示的文字，把鼠标移动到图片上，停留片刻显示内容 或者是图片显示出错时显示的文字，但有些浏览器不显示，没有效果)
** <img src="图片的路径"/>
路径的介绍
*分类：两类
**绝对路径 eg. http://www.baidu.com/b.jpg
***三种相对路径 一个文件相对于另外一个文件的位置
--html文件和图片在同一个路径(目录)下，可以直接写文件名称
--在html文件中，使用与其在同一个路径下的img文件夹下的a.jpg文件 使用方法：imga.jpg
**d:htmlstudycode4.html
**d:htmlstudycodeimga.jpg
--图片在html文件的上层目录中，此时图片使用方法：../c.png ../表示上层路径
超链接标签
**链接资源
-- <a href="链接到资源的路径">显示在页面上的内容</a>
**href：链接的资源的地址
**target：设置打开的方式，默认是在当前页打开
--_blank ：在一个新窗口打开
--_self ：在当前页打开 默认的
--<a href="#">链接标题</a>：当超链接不需要跳转到页面时，在href中添加#（占位符）就可以了
**定位资源
--如果想要定位资源：定义一个位置
<a name="top">顶部</a>
--回到这个位置
<a href="#top">回到顶部</a>
--原样输出标签：<pre>需要原样输入的内容</pre>
表格标签
*作用：可以对数据进行格式化，使数据显示更加清晰
*属性 border(表格线粗细) bordercolor(表格线颜色) cellspacing(单元格间距离) width height
*<table></table> ： 表示表格的范围
**在table里面，表示一行 <tr></tr>
--设置对齐方式 align ：left center right
***在tr里面，表示一行里边的单元格 <td></td>
**使用th也可以表示单元格：表示可以实现居中和加粗
*表格的标题，放在table里边 <caption></caption>
*操作技巧：
**首先数有多少行，在数每行里面有多少个单元格
*合并单元格
**rowspan ：跨行（纵向合并）
<td rowspan="3" align="center">13</td>
**colspan ：跨列（横向合并）
<td colspan="3" align="center">表格练习</td>
表单标签
*例如注册开心网时，可以提交数据到开心网的服务器，这个过程可以使用表单标签实现
* <form></form> ：定义一个表单范围
*属性：
** action ：提交到的地址，默认提交到 当前的页面
** method ： 表单的提交方式
--常用的有两种： get 和 post ，默认是get请求
** get 和 post 的区别
1）get请求地址栏会携带提交的数据，post不会携带（数据在请求体里面）
2）get请求安全级别较低，post较高
3）get请求数据大小有限制，post没有限制
** enctype ：一般请求下不需要这个属性，做文件上传时候需要设置这个属性
**输入项：可以输入内容或者选择内容的部分
--大部分的输入项可使用 <input type="输入项类型"/>
********在输入项里面需要有一个name属性
***普通输入项：<input type="text"/>
***密码输入项：<input type="password"/>
***单选输入项：<input type="radio"/>
--在里边需要属性 name
--name的属性值必须要相同
--必须要有一个value值
****实现默认选中的属性
***checked="checked"
***复选输入项：<input type="checkbox"/>
**在里边需要属性 name
**name的属性值必须要相同
**必须要有一个value值
****实现默认选中的属性
----checked="checked"
***文件输入项：<input type="file"/>
***下拉输入项（不是在input标签里面的）
<select name="birth">
<option value="0">请选择</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
</select>
****实现默认选中的属性
----selected="selected"
*** 文本域（如：注册账号时填写个人信息简介的方框）
<textarea cols="5" rows="20"></textarea>
***隐藏项（不会显示在页面上，但是存在于 html代码里面）
<input type="hidden"/>
***提交按钮
<input type="submit"/>
<input type="submit" value="按钮标题"/>
--提交之前地址：C:UsersHappyDogDesktopindex.html
**当在输入项里面写了name属性之后
--file:///c:/users/happydog/desktop/index.html?phone=123123&pwd=12321312&sex=man&love=y&love=pp&birth=1992&tex=1231245
**?输入项name的值=输入的值&
**参数类似于key-value形式
***使用（点击）图片来提交
<input type="image" src="图片路径"/>
***重置按钮 ：回到输入项的初始状态
<input type="reset"/>
<input type="reset" value="按钮标题"/>
***普通按钮（和js在一起使用的）
<input type="button" value=""/>
案例：使用表单标签实现注册页面
表格单元格内容为空时，一般用占位符（ (转义空格)）来填充
html中的其他的常用标签的使用
** b(加粗) s(删除线) u(下划线) i(斜体) pre(原样输出) sub(下标) sup(上标) div(自动换行) span(在一行显示) p(段落标签)
html的头标签的使用
**html两部分组成 head 和 body
**在head里面的标签就是头标签
**title标签：表示在标签上显示的内容
**<meta>标签 ：设置页面的一些相关内容
--<meta name="keywords" content="" />
--<meta http-equiv="refresh" content="10;url=Test_form.html" />定时跳转到指定页面
**base标签 ：设置超链接的基本的设置
--可以统一设置超链接的打开方式 <base target="_blank" />
**link标签 ：引入外部文件
框架标签的使用
**<frameset>
**rows ：按照行进行划分
<frameset rows="80,*"> 分成上下两部分，上边80，下边任意
**cols ：按照列进行划分
<frameset cols="80,*"> 分成左右两部分，左边80，右边任意
**<frame> 具体显示的页面
**<frame name="lower_left" src="b.html">
*使用框架标签的时候，不能写在head和body里面，使用了框架标签，需要把body去掉，写在head外边
*如果在左边的页面超链接，想让内容显示在右边的页面中，可以设置超链接里面的target属性，将target的值设置为框架中的名字
**<a href="http://www.baidu.com" target="right">百度</a><br/>
<frameset rows="80,*">
<frame name="top" src="a.html">
<frameset cols="120,*">
<frame name="left" src="b.html">
<frame name="right" src="http://www.baidu.com">
</frameset>
</frameset>
知识总结
1）html操作思想：使用标签把要操作的数据包起来，通过修改标签的属性值，来实现标签内数据样式的变化
2）font标签 属性：size 取值范围1-7 color：十六进制数 #ffffff
3）标题标签 <h1></h1>......<h6></h6> ：从h1到h6字体越来越小，自动换行
4）注释
CSS的简介
**CSS：层叠样式表
** 层叠：一层一层的
** 样式表：很多的属性和属性值
**使页面显示效果更加好
**CSS将网页内容和显示样式进行分离，提高了显示功能
CSS和html的结合方式（四种结合方式）
1）在每个html标签上面都有一个属性 style，把CSS和html结合在一起
-- <div style="background-color:red;color:green;" id="" class="" >天之道，损有余而补不足，是故虚胜实，不足胜有余。</div>
2）使用html的一个标签实现 <style>标签，写在head里面
-- <style type="text/css">
css代码;
</style>
----代码实现<head>
<style type="text/css">
div{
background-color:blue;
color:red;
}
</style>
</head>
<body>
<div id="" class="">
天之道，损有余而补不足，是故虚胜实，不足胜有余。
</div>
</body>
3）在style标签里面 使用语句
@import url(css文件的路径)；
-- 第一步：创建一个css文件
---- <style type="text/css">
@import url(div.css);
</style>
4）使用头标签 link，引入外部css文件 放在<head></head>里边
-- 第一步：创建一个css文件
-- <link rel="stylesheet" type="text/css" href="css文件的路径"/>
****第三种结合方式的缺点：在某些浏览器下不起作用，一般使用第四种方式
****优先级（一般）
由上到下，由内到外，优先级由低到高。
后加载的优先级高
****格式：选择器名称{属性名:属性值;属性名:属性值;......}
css的基本选择器（三种）
**要对那个标签里面的数据进行操作
1）标签选择器 div {css代码}
--使用标签名作为选择器的名称
<head>
<style type="text/css">
div{
background-color:blue;
color:red;
}
</style>
</head>
<body>
<div>aaaaaa</div>
</body>
2）class选择器 .名称 {}
**每个html标签都有一个属性 class
**<head>
<style type="text/css">
div.test{
background-color:blue;
color:red;
}
p.test{
background-color:blue;
color:red;
}
可以简写为：
.test{
background-color:blue;
color:red;
}
</style>
</head>
**<body>
<div class="test">aaaaaa</div>
<p class="test">bbbbbbbbb</p>
</body>
3）id选择器 #名称 {}
**每个html标签上面都有一个属性 id
--<div id="test">cccccccccc</div>
--<head>
<style type="text/css">
div#test{
background-color:blue;
color:red;
}
p#test{
background-color:blue;
color:red;
}
可以简写为：
#test {
background-color:blue;
color:red;
}
</style>
</head>
--<body>
<div id="test">aaaaaa</div>
<p id="test">bbbbbbbbb</p>
</body>
**优先级 style > id选择器 > class选择器 > 标签选择器
css的扩展选择器(了解)
1）关联选择器 嵌套标签的样式的设置
**<div><p>wwwwwwwwww</p></div>
**设置div标签里面p标签的样式，嵌套标签里面的样式
--<head>
<style type="text/css">
div p {
background-color:blue;
color:red;
}
</style>
</head>
--<body>
<div><p>wwwwwwwwww</p></div>
<p>aaaaaa</p>
</body>
2）组合选择器 不同标签设置相同的样式
**<div>1111</div>
<p>2222</p>
**把div和p标签设置成相同的样式，把不同的标签设置成相同的样式
--<head>
<style type="text/css">
div,p {
background-color:blue;
color:red;
}
</style>
</head>
--<body>
<div>1111</div>
<p>2222</p>
</body>
3）伪（类）元素选择器
** css里面提供了一些定义好的样式，可以拿过来使用
**比如 超链接
**超链接的状态
--原始状态 鼠标放上去 点击 点击之后
:link :hover :active :visited
代码实现：
<head>
<style type="text/css">
/*原始状态*/
a:link {
background-color:red;
}
/*悬停状态*/
a:hover {
background-color:green;
}
/*点击状态*/
a:active {
background-color:blue;
}
/*点击之后状态*/
a:visited {
background-color:gray;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">点击链接到百度网页</a>
</body>
css的盒子模型(了解) 对数据进行操作，需要把数据放到一个区域里面（div）
1）边框 border ：统一设置
也可以分别设置：上 border-top 下：border-bottom 左：border-left 右：border-right
--<head>
<style type="text/css">
div {
200px;
height: 100px;
border: 2px solid blue;
}
#div12 {
border-right: 2px dashed yellow;
}
</style>
</head>
--<body>
<div id="div11">AAAAAAAAA</div>
<div id="div12">BBBBBBBBB</div>
</body>
2) 内边距 padding ：统一设置 内容距离上下左右四条边的距离
也可以分别设置：上下左右
<head>
<style type="text/css">
div {
200px;
height: 100px;
border: 2px solid blue;
}
#div21 {
padding: 20px;
}
#div22 {
padding-left: 30px;
}
</style>
</head>
<body>
<div id="div21">AAAAAAAAA</div>
<div id="div22">BBBBBBBBB</div>
</body>
3) 外边距 margin ：统一设置 div距离最外边四条边的距离
也可以分别设置：上下左右。。。
css的布局的漂浮（了解） float ：left right
css的布局的定位 (了解)
*position
**属性值：
--static：默认值，无特殊定位
--absolute：
将对象从文档流中拖出，使用left,right,top,bottom等属性相对于其进行绝对定位
--relative：不会将对象从文档流中拖出，对象不可层叠，但将依据left,right,top,bottom等属性在正常文档流中偏移位置。
案例：图文混排案例
**图片和文字在一起显示
案例：图像签名
javascript的简介：是基于对象和事件驱动的脚本语言，主要应用在客户端
*基于对象：提供好了很多对象，可以直接拿过来使用
*事件驱动：html做网站静态效果，javascript动态效果
*客户端：专门指的是浏览器
* js的特点：
1）交互性 信息的动态交互
2）安全性 js不能访问本地磁盘的文件
3）跨平台性 java里面跨平台性，虚拟机；只要能够支持js的浏览器，都可以运行
*javascript和java的区别：两者之间没有什么任何关系
1）java是sun公司，现在是Oracle；js是网景公司
2）java是面向对象的，js是基于对象的
3）java是强类型的语言，js是弱类型的语言
--比如：java里面 int i = "10";会报错
--js: var i = 10; var i = "10";都不报错
4）js只需要解析就可以执行，而java需要先编译成字节码文件，在执行
*js的组成（三部分）：
1）ECMAScript
-- ECMA ：欧洲计算机协会
--由ECMA组织制定的js语法，语句...
2）BOM
--broswer object model:浏览器对象模型
3）DOM
--document object model：文档对象模型
js与html的结合方式（两种）
1）使用一个标签 <script type="text/javascript"> js代码；</script>
2）使用script标签，引入一个外部的js文件
-- 创建一个js文件，写js代码
-- <script type="text/javascript" src="js的路径"></script>
注意：使用第二种方式的时候，就不要在script标签里面写js代码了，不会执行
js的原始类型和声明变量
*java的基本数据类型：byte short int long float double char bolean
*js定义变量 都是用关键字 var
*js的原始类型（五个）
--string 字符串 var str = "abc";
--number 数字类型 var m = 123;
--boolean true和false var flag = true;
--null var date = new Date();
**获取对象的引用，null表示对象引用为空，所有对象的引用也是object
--undifined 定义一个变量，但是没有赋值 var aa;
* typeof(变量名称) 查看当前变量的数据类型
js的语句
**java里面的语句 if判断("="表示赋值；"=="等于，表示判断) switch语句 循环语句（for while do-while）
**js里面的这些语句
--if判断语句
--switch(a) {
case 5: ...
break;
case 6: ...
break;
default:...
........
}
**循环语句 for while do-while
--var i = 5;
while(i>0) {
alert(i);
i--;
}
--for(var i = 0;i<=5;i++){
alert(i);
}
js的运算符
**js里面不区分整数和小数
--var j = 123;
alert(j/1000*1000);
** j/1000*1000 在java里面得到结果是0
** 在js里面不区分整数和小数， 123/1000*1000 = 0.123*1000 = 123
**字符串的相加和相减的操作
--var str = "123";
alert(str + 1); 在java和js中的结果都是1231，做的是字符串的连接
alert(str - 1); 相减时候，执行减法的运算，如果str中不是数字，会提示NaN：表示不是一个数字
**boolean类型也可以操作
***如果设置成true，相当于这个值是1；如果设置成false，相当于这个值是0；
** == 和 === 区别
**都是做判断
** == 比较的只是值； === 比较的是值和类型
**直接向页面输出的语句（可以把内容显示在页面上），可以向页面输出变量，固定值和html代码。Document.write("") 里面是双引号，如果设置标签的属性需要使用单引号。
-- document.write("aaaa");
-- document.write("<hr/>");
***document.write("<table border='1' bordercolor='red'>");
***document.write("</table>");
练习：实现99乘法表
js的数组
*java里面的数组 定义 int[] arr = {1,2,3};
*js数组的定义方式（三种）
1）var arr = [1,2,3];var arr = [1,"2",3];var arr = [1,2,true]; 都可以
2）使用内置对象 Array对象
var arr1 = new Array(5); // 定义一个数组，数组的长度是5
arr1[0] = "1";
......
3）使用内置对象 Array对象
var arr2 = new Array(3,4,5); // 定义一个数组，数组里的元素是3,4,5
* 数组里面有一个属性 length ：获取到数组的长度
* 数组的长度是可变的，数组可以存放不同的数据类型的数据。
js的函数（方法）
**在js里面定义函数（方法）有三种方式 函数的参数列表里面，不需要写var，直接写参数名称
1）使用到一个关键字 function
*** function 方法名(参数列表) {
方法体;
返回值可有可无（根据实际需要）;
}
代码实现：// 使用第一种方式创建函数
function test() {
alert("qqqqqq");
}
// 调用方法
test();
// 定义一个有参数的方法 实现两个数的相加
function add1(a,b) {
var sum = a+b;
alert(sum);
}
add1(3,5);
function add2(a,b,c) {
var sum1 = a+b+c;
return sum1;
}
alert(add2(7,8,9));
2）匿名函数
var add = function(参数列表) {
方法体和返回值;
}
代码实现： var add3 = function(m,n) {
alert(m+n);
}
// 调用方法
add3(8,9);
3）一般也称为动态函数，用的少，了解即可
*使用到js里面的一个内置对象 Function
var add = new Function("参数列表","方法体和返回值");
var add4 = new Function("x,y","var sum;sum=x+y;return sum;");
alert(add4(9,10));
// 或者下边的代码
var canshu = "x,y";
var fangfati = "var sum;sum=x+y;return sum;";
var add4 = new Function(canshu,fangfati);
alert(add4(5,3));
js的全局变量和局部变量
**全局变量：在script标签里面定义一个变量，这个变量在页面中js部分都可以使用
--在方法外部使用，在方法内部使用，在另一个script标签使用
**局部变量：在方法内部定义一个变量，只能在方法内部使用
--只能在方法内部使用，如果在方法的外部调用这个变量，提示出错
--ie自带了一个调试工具，ie8以上的版本中，键盘上的F12,再页面下方出现一个条 看控制台可以看到错误
script标签应该放置的位置
**建议把script标签放到</body>后面
**如果现在有这样一个需求：
--在js里面需要获取到input里面的值，如果把script标签放在head里面，会出现问题
--html解析是从上到下解析的，script标签放到的是head里面，直接在里面取input的值，因为页面还没有解析到input那一行，肯定取不到
js的重载 js不存在重载，但是可以模拟实现
例子：function add11(a,b) {
return a+b;
}
function add11(a,b,c) {
return a+b+c;
}
function add11(a,b,c,d) {
return a+b+c+d;
}
alert(add11(2,2)); // NaN
alert(add11(2,2,3)); // NaN
alert(add11(2,2,4,5)); // 13
js的String对象
** 创建String对象 var str = "abc'；
**方法和属性（文档）
--属性 length ：字符串的长度
--方法
1）与html相关的方法
-- bold():加粗 fontcolor():设置字符串的颜色 fontsize():设置字体的大小 link():将字符串显示成超链接
2）与java相似的方法
--concat():连接字符串 charAt():返回指定位置的字符串 indexOf():返回字符串位置 split():切分字符串 成数组 replace("",""):替换字符串--传递两个参数：第一个参数是原始字符，第二个参数是要替换成的字符 substr(5,3)从第五位开始，向后截取三个字符 substring(3,5) 从第三位开始包括第三位到第五位结束，不包括第五位 [3,5)
js的Array对象
**创建数组的三种方法
1）var arr1 = [1,2,3];
2）var arr1 = new Array(3); // 长度是三
3）var arr1 = new Array(1,2,3); // 元素是1,2,3
var arr = []; //创建一个空数组
**属性 length：查看数组的长度
**方法
concat();连接数组 join();根据指定的字符分割数组 push();向数组末尾添加元素，返回数组的新的长度**如果添加的是一个数组，这个时候把数组当做一个整体字符串添加进去 pop();删除并返回数组的最后一个元素 reverse();颠倒数组中的元素的顺序
js的Date对象
** 在java里面获取当前时间
Date date = new Date();
// 格式化 //toLocaleString()
** js里面获取当前时间
var date = new Date();
// 转换成习惯的格式 date.toLocaleString();
js的Math对象 数学的运算
** 里面的都是静态方法，使用可以直接使用 Math.方法();
js的全局函数
**由于不属于任何一个对象，直接写名称使用
** eval(); 执行js代码(如果字符串是一个js代码，使用方法直接执行)
-- var str = "alert('1234');";
// alert(str); //alert('1234');
eval(str); // 1234
** .....
js的函数的重载 什么是重载？方法名相同，参数不同
*js不存在函数的重载，只会调用最后一个方法，但是可以通过其他方式模拟重载。js的函数把传递的参数保存到 arguments数组里面 可以利用判断arguments数组的长度 来对应返回不同的处理结果
模拟重载效果代码实现：
function add1() {
if(arguments.length ==2 ) {
return arguments[0] + arguments[1];
} else if ( arguments.length == 3) {
return arguments[0] + arguments[1] + arguments[2];
} else if ( arguments.length == 4) {
return arguments[0] + arguments[1] + arguments[2] + arguments[3];
} else {
return 0;
}
}
// 调用
alert(add1(1,2)); //3
alert(add1(1,2,3)); //6
alert(add1(1,2,3,4)); //10
alert(add1(1,2,3,4,5)); //0
js的bom对象
**bom ：broswer object model:浏览器对象模型
**有哪些对象？
-- navigator ：获取客户机的信息（浏览器的信息）
-- screen : 获取屏幕的信息
-- location ：请求的url地址
*** href属性
1）获取到请求的url地址
--document.write(location.href);
2）设置url地址
--页面上安置一个按钮，按钮上绑定一个事件，当点击这个按钮，页面可以跳转到另外一个页面
<body>
<input type="button" value="JumpBaidu" onclick="href1();"/>
<script type="text/javascript">
function href1() {
//alert("aaaa");
location.href = "http://www.baidu.com";
}
</script>
</body>
-- history ：请求的url的历史记录
-- 创建三个页面（模拟上下历史的效果）
1）创建一个页面a.html 写一个超链接 到 b.html
2）创建 b.html 超链接到 c.html
3）创建 c.html
-- 到访问的上一个页面
history.back();
history,go(-1);
-- 到访问的下一个页面
history.forward();
history.go(1);
-- window（重点掌握） 窗口对象 顶层对象（所有bom对象都是在window里面操作的）
**方法
-- window.alert(); 简写为：alert(); 页面弹出一个窗口，显示内容
-- confirm("显示的消息内容"); 确认提示框 有返回值 true和false
-- prompt(); 输入的对话框（现在使用的不多） ，有两个参数：显示内容和默认值
-- open("url地址","","窗口特征，比如窗口宽度和高度"); 打开一个新窗口
-- close(); 关闭窗口（浏览器兼容性比较差）
-- 做一些定时器
*** setInterval("js代码",毫秒数); window.setInterval("alert('123');",3000); 表示每三秒执行一次alert方法
*** setTimeout("js代码",毫秒数); 表示在毫秒数之后执行，但是只会执行一次
***clearInterval(); 清除掉setInterval设置的定时器
-- var id1 = setInterval("alert('123');",3000);
clearInterval(id1);
***clearTimeout(); 清除掉setTimeout设置的定时器
js的dom对象
**dom ：document object model: 文档对象类型
**文档：超文本文档（超文本标记文档） html、xml
**对象：提供了属性和方法
**模型：使用属性和方法操作超文本标记型文档
***可以使用js里面的dom里面提供的对象，使用这些对象的属性和方法，对标记型文档进行操作
***想要对标记型文档进行操作，首先需要把标记型文档里面的所有内容封装成对象
-- 需要把html里面的标签、属性、文本内容都封装成对象
***要想对标记型文档进行操作，解析标记型文档
***解析过程：根据html的层级结构，会在内存中分配一个树形结构，需要把html中的每部分封装成对象
*只能有一个根节点
在根节点下面可以有多个子节点，没有子节点的节点称为叶子节点
-- document对象：整个html文档
-- element对象：标签对象
-- 属性对象
-- 文本对象
** Node节点对象：是这些对象的父对象
DHTML：是很多技术的简称
** html：封装数据
** css：使用属性和属性值设置样式
** dom：操作html文档（标记型文档）
** javascript：专门指的是js的语法语句（ECMAScript）
document对象 表示整个文档
**常用方法
-- write()方法：1)向页面输出变量 2)向页面输出html代码
-- getElementById(); 表示通过id得到元素（标签）
<body>
<input type="text" id="nameid" value="aaaaa"/><br/>
<script type="text/javascript">
// 使用getElementById得到input标签的对象
var input1 = document.getElementById("nameid");
// 得到input里面的value值
alert(input1.value);
// 向input里面设置一个值value
input1.value = "bbbbbbb";
</script>
</body>
-- getElementsByName(); 通过标签的name的属性值得到标签，返回的是一个集合（数组）
<body>
<input type="text" name="name1" value="aaaaa"/><br/>
<input type="text" name="name1" value="bbbb"/><br/>
<input type="text" name="name1" value="ccccc"/><br/>
<script type="text/javascript">
var input1 = document.getElementsByName("name1"); // 传递的参数是标签里面的name的值
for(var i =0;i<input1.length;i++) { // 通过遍历，得到每个标签里面的具体的值
var inputs = input1[i]; // 每次循环得到input对象，赋值到inputs里面
alert(inputs.value); // 得到每个input标签里面的value值
}
</script>
</body>
-- getElementsByTagName("标签的名称"); 返回的是一个集合（数组）
<body>
<input type="text" name="name1" value="aaaaa"/><br/>
<input type="text" name="name1" value="bbbb"/><br/>
<input type="text" name="name1" value="ccccc"/><br/>
<script type="text/javascript">
var inputs1 = document.getElementsByTagName("input"); //传递的参数是标签的名称
for(var i =0;i<inputs1.length;i++) {
var input1 = inputs1[i];
alert(input1.value);
}
</script>
</body>
****注意的地方：只有一个标签，这个标签只能使用name获取到，这个时候，使用getElementsByName返回的是一个数组，但是现在只有一个元素，这个时候不需要遍历，而是可以直接通过数组的下标获取到值
<input type="text" name="name1" value="aaaaa"/>
var input1 = document.getElementsByName("name1")[0];
alert(input1.value);
案例：window弹窗案例
**实现过程：1）需要创建一个页面：两个输入项和一个按钮，按钮上边有一个事件，作用是弹出一个新窗口
2）创建弹出页面：表格 每一行表格上有一个按钮和编号和姓名；按钮上有一个事件:把当前的编号和姓名，赋值到第一个页面相应的位置
**跨页面的操作 opener :可以得到创建这个窗口的窗口，也就是可以得到父窗口
案例：在末尾添加节点
1）创建li标签
2）创建文本
3）把文本加入到li下面
4）把li加入到ul下面
<body>
<ul id="ulid">
<li>1111</li>
<li>2222</li>
<li>3333</li>
</ul> <br/>
<input type="button" value="add" onclick="add1();"/>
<script type="text/javascript">
function add1() {
// 获取到ul标签
var ul1 = document.getElementById("ulid");
// 创建标签
var li1 = document.createElement("li");
// 创建文本
var tex1 = document.createTextNode("4444");
// 把文本加入到li下面
li1.appendChild(tex1);
// 把li加入到ul下面
ul1.appendChild(li1);
}
</script>
</body>
元素对象（element对象）：要操作element，首先必须要获取到element 使用document里面相应的方法获取
**方法
****获取属性里面的值 getAttribute("属性名称");
****设置属性的值 setAttribute(name,value);
****删除属性 removeAttribute("属性名称"); 不能删除value
<input type="text" name="name1" id="inputid" value="aaaa"/>
<script type="text/javascript">
// 先要获取input标签
var input1 = document.getElementById("inputid");
// alert(input1.value);
alert(input1.getAttribute("value")); //获取属性里面的值
alert(input1.getAttribute("class"));
input1.setAttribute("class","haha"); // 设置属性的值
alert(input1.getAttribute("class"));
input1.removeAttribute("name");
</script>
** 想要获取标签下面的子标签
**使用属性 childNodes,但是这个属性兼容性很差
**获得标签下面子标签的唯一有效方法，使用getElementsByTagName方法
<body>
<ul id="ulid1">
<li>aaaaaa</li>
<li>bbbbbb</li>
<li>cccccc</li>
</ul>
<script>
// 获取到ul标签
var ul1 = document.getElementById("ulid1");
// 获取ul下面的子标签
// var lis = ul1.childNodes;//兼容性很差
// alert(lis.length); // 有的显示的是3 有的显示的是7
var lis = ul1.getElementsByTagName("li");
alert(lis.length);
</script>
</body>
Node对象的属性
**nodeName
**nodeType
**nodeValue
**使用dom解析html时候，需要html里面的标签，属性和文本都封装成对象
**标签节点对应的值
nodeType : 1
nodeName : 大写标签名称，比如SPAN
nodeValue : null
**属性节点对应的值
nodeType : 2
nodeName : 属性名称
nodeValue : 属性的值
**文本节点对应的值
nodeType : 3
nodeName : #text
nodeValue : 文本内容
**<body>
<span id="spanid">文本内容</span>
<script type="text/javascript">
// 获取标签对象
var span1 = document.getElementById("spanid");
// alert(span1.nodeType); // 1
// alert(span1.nodeName); // SAPN
// alert(span1.nodeValue); // null
// 属性
var id1 = span1.getAttributeNode("id");
// alert(id1.nodeType); // 2
// alert(id1.nodeName); //id
// alert(id1.nodeValue); // spanid
//获取文本
var text1 = span1.getfirstChild;
// alert(text1.nodeType); // 3
// alert(text1.nodeName); //#text
// alert(text1.nodeValue); // 文本内容
</script>
</body>
Node对象的属性二
<ul>
<li>aaaaaa</li>
<li>bbbbb</li>
</ul>
**父节点 ul是li的父节点
*** parentNode ：父节点
**子节点 li是ul的子节点
*** childNodes : 得到所有子节点，但是兼容性很差
*** firstChild : 获取第一个子节点
*** lastChild : 获取最后一个子节点
**同辈节点 li与li之间是同辈节点
**nextSibling : 返回一个给定节点的下一个兄弟节点
**previousSibling : 返回一个给定节点的上一个兄弟节点
<body>
<ul id="ulid">
<li id="li1">aaaaa</li>
<li id="li2">bbbbb</li>
<li id="li3">ccccc</li>
<li id="li4">ddddd</li>
</ul>
<script type="text/javascript">
/* // 得到li1
var li1 = document.getElementById("li1");
// 得到ul
var ul1 = li1.parentNode;
alert(ul1.id); */
/* // 获取ul的第一个子节点
// 得到ul
var ul1 = document.getElementById("ulid");
// 第一个子节点
var li1 = ul1.firstChild;
alert(li1.id);
var li4 = ul1.lastChild;
alert(li4.id); */
//获取li的id是li3的上一个和下一个兄弟节点
var li3 = document.getElementById("li3");
var li4 = li3.nextSibling;
var li2 = li3.previousSibling;
alert(li4.id);
alert(li2.id);
</script>
</body>
操作dom树
** appendChild方法：
*** 添加子节点到末尾
*** 特点：类似于剪切粘贴的效果
** insertBefore(newNode,oldNode);
*** 在某个节点之前插入一个新的节点 通过父节点添加
*** 两个参数 1）要插入的节点 2)在谁之前插入
*** 插入一个节点，节点不存在，创建
1）创建标签
2）创建文本
3）把文本添加到标签下面
**代码实现：（在<li>貂蝉</li>之前添加 <li>董小宛</li>）
<body>
<ul id="ulid21">
<li id="li11">西施</li>
<li id="li12">王昭君</li>
<li id="li13">貂蝉</li>
<li id="li14">杨玉环</li>
</ul>
<input type="button" value="insert" onclick="insert1();"/>
<script type="text/javascript">
// 在<li>貂蝉</li>之前添加 <li>董小宛</li>
function insert1() {
// 1、获取到li13标签
var li13 = document.getElementById("li13");
// 2、创建li
var li15 = document.createElement("li");
// 3、创建文本
var text15 = document.createTextNode("董小宛");
// 4、把文本添加到li下面
li15.appendChild(text15);
// 5、获取ul
var ul21 = document.getElementById("ulid21");
// 6、把li添加到ul下面（在<li>貂蝉</li>之前添加 <li>董小宛</li>）
ul21.insertBefore(li15,li13);
}
</script>
</body>
**removeChild方法：删除节点
***通过父节点删除，不能自己删除自己
**代码实现 : 删除<li id="li24">杨玉环</li>
<body>
<ul id="ulid31">
<li id="li21">西施</li>
<li id="li22">王昭君</li>
<li id="li23">貂蝉</li>
<li id="li24">杨玉环</li>
</ul>
<input type="button" value="remove" onclick="remove1();"/>
<script type="text/javascript">
// 删除<li id="li24">杨玉环</li>
function remove1() {
// 1、获取到li24标签
var li24 = document.getElementById("li24");
// 2、获取父节点ul标签
// 有两种方式 1）通过id获取 2）通过属性 parentNode获取
var ul31 = document.getElementById("ulid31");
// 3、执行删除（通过父节点删除）
ul31.removeChild(li24);
}
</script>
</body>
** replaceChild(newNode,oldNode); 替换节点
***两个参数：1）新的节点（替换成的节点） 2）旧的节点（被替换的节点）
***不能自己替换自己，通过父节点替换
** cloneNode(boolean) : 复制节点
**代码实现：把ul列表复制到另外一个div里面
<body>
<ul id="ulid41">
<li id="li31">西施</li>
<li id="li32">王昭君</li>
<li id="li33">貂蝉</li>
<li id="li34">杨玉环</li>
</ul>
<div id="divv">
</div>
<input type="button" value="clone" onclick="clone1();"/>
<script type="text/javascript">
// 把ul列表复制到另外一个div里面
/*
1、获取到ul
2、执行复制方法 cloneNode方法复制 参数true
3、把复制之后的内容放到div里面去
** 获取到div
** appendChild方法
*/
function clone1() {
// 1、获取ul
var ul41 = document.getElementById("ulid41");
// 2、复制ul，放到类似剪切板里面
var ulcopy = ul41.cloneNode(true);
// 3、获取到div
var divv = document.getElementById("divv");
// 4、把副本放到div里面去
divv.appendChild(ulcopy);
}
</script>
</body>
**操作dom总结：
**获取节点使用方法
getElementById() : 通过节点的id属性，查找对应节点
getElementsByName() : 通过节点的name属性，查找对应节点
getElementsByTagName() : 通过节点名称，查找对应节点
**插入节点的方法
insertBefore方法 : 在某个节点之前插入
appendChild方法 : 在末尾添加，类似于剪贴粘贴
**删除节点的方法
removeChild方法 : 通过父节点删除
**替换节点的方法
replaceChild方法 : 通过父节点替换
innerHTML属性（重点）
** 这个属性不是dom的组成部分，但是大多数浏览器都支持的属性
** 第一个作用：获取文本内容
var span1 = document.getElementById("sid");
alert(span1.innerHTML);
** 第二个作用：向标签里面设置内容（可以是html代码）
<body>
<span id="sid">测试文本</span>
<div id="div11">
</div>
<script type="text/javascript">
// 获取span标签
var span1 = document.getElementById("sid");
//alert(span1.innerHTML); // 测试文本
// 向div里面设置内容 <h1>AAAAA</h1>
// 获取div
var div11 = document.getElementById("div11");
div11.innerHTML = "<h1>AAAAA</h1>"; // 设置内容
</script>
</body>
** 练习：向div里面添加一个表格
var tab = "<table border='1'><tr><td>aaaaa</td></tr><tr><td>bbbb</td></tr></table>";
div11.innerHTML = tab;
案例：动态显示时间
** 得到当前时间
var date = new Date();
var d1 = date.toLocaleString();
** 需要让页面每一秒获取时间
setInterval方法 定时器
** 显示到页面上
每一秒向div里面写一次时间 使用innerHTML属性
** 代码实现 动态显示时间
<body>
<div id="times">
</div>
<script type="text/javascript">
function getD1() {
// 当前时间
var date = new Date();
// 格式化
var d1 = date.toLocaleString();
// 获取div
var div1 = document.getElementById("times");
div1.innerHTML = d1;
}
// 使用定时器实现每一秒写一次时间
setInterval("getD1();",1000);
</script>
</body>
案例：全选练习
** 使用复选框上面一个属性判断是否选中
** checked 属性
** checked = true; 选中
** checked = false; 未选中
** 创建一个页面
** 复选框 和 按钮
***四个复选框表示爱好
***还有一个复选框操作全选和全不选 有一个事件
***三个按钮 全选 全不选 反选 每个按键都分别有事件
**代码实现
<body>
<input type="checkbox" id="boxid" onclick="selAllNo();"/>全选/全不选
<br/>
<input type="checkbox" name="love"/>篮球
<input type="checkbox" name="love"/>排球
<input type="checkbox" name="love"/>羽毛球
<input type="checkbox" name="love"/>乒乓球
<br/>
<input type="button" value="全选" onclick="selAll();"/>
<input type="button" value="全不选" onclick="selNo();"/>
<input type="button" value="反选" onclick="selOther();"/>
<script type="text/javascript">
// 实现全选操作
function selAll() {
/*
1、获取要操作的复选框 使用getElementsByName();
2、返回的是数组
**属性 checked 判断复选框是否选中
** checked = true; // 表示选中
** checked = false; // 表示未选中
**遍历数组，得到的是每一个checkbox
** 把每一个checkbox属性设置为true 即checked = true;
*/
// 获取要操作的复选框
var loves = document.getElementsByName("love");
// 遍历数组，得到每一个复选框
for(var i=0;i<loves.length;i++) {
var love1 = loves[i]; // 得到每一个复选框
love1.checked = true; // 设置属性为true
}
}
// 实现全不选操作
function selNo() {
/*
1、获取到要操作的复选框
2、返回的是数组，遍历数组
3、得到每一个复选框
4、设置复选框的属性 checked = false;
*/
// 获取要操作的复选框
var loves = document.getElementsByName("love");
// 遍历数组，得到每一个复选框
for(var i=0;i<loves.length;i++) {
var love1 = loves[i]; // 得到每一个复选框
love1.checked = false; // 设置属性为true
}
}
function selOther() { // 实现反选
var loves = document.getElementsByName("love");
// 遍历数组，得到每一个复选框
for(var i=0;i<loves.length;i++) {
var love1 = loves[i]; // 得到每一个复选框
if(love1.checked == true) {
love1.checked = false;
}
else {
love1.checked = true;
}
}
}
function selAllNo() { // 一个多选框实现全选 全不选切换
/*
1、得到上边的复选框 通过id来获取
2、判断该复选框是否选中 if条件 checked == true
3、如果是选中，下面是全选
4、如果不是选中，下面是全不选
*/
var box1 = document.getElementById("boxid");
if(box1.checked == true) {
selAll();
}
else {
selNo();
}
}
</script>
</body>
案例：下拉列表左右选择
** 下拉选择框
<select>
<option>111</option>
<option>111</option>
</select>
** 创建一个页面
** 两个下拉框 设置属性multiple
** 四个按钮， 都有事件
** 代码实现：
<body>
<div id="s1" style="float:left;">
<div>
<select id="select1" multiple="multiple" style="100px;height:100px;">
<option>1111111</option>
<option>22222222</option>
<option>33333333</option>
<option>444444444</option>
</select>
</div>
<div>
<input type="button" value="选中添加到右边" onclick="selToRight();"/><br/>
<input type="button" value="全部添加到右边" onclick="allToRight();"/>
</div>
</div>
<div id="s2">
<div>
<select id="select2" multiple="multiple" style="100px;height:100px;">
<option>AAAAAAAA</option>
<option>BBBBBBBB</option>
</select>
</div>
<div>
<input type="button" value="选中添加到左边" onclick="selToLeft();"/><br/>
<input type="button" value="全部添加到左边" onclick="allToLeft();"/>
</div>
</div>
<script type="text/javascript">
// 实现选中添加到右边
function selToRight() {
/*
1、获取 select1 里面的 option
* 使用getElementsByTagName(); 返回的是数组
* 遍历数组，得到每一个 option
2、判断option是否被选中
* 属性 selected ，判断是否被选中
** selected = true; 选中
** selected = false;未选中
3、如果选中，把选择的添加到右边去
4、得到 select2
5、添加选择的部分
* appendChild 方法
*/
// 获取到 select1 里面的option
// 得到 select1
var select1 = document.getElementById("select1");
// 得到 select2
var select2 = document.getElementById("select2");
// 得到 option
var options1 = select1.getElementsByTagName("option");
// 遍历数组
for(var i=0;i<options1.length;i++) {
// 第一次循环 i=0 length:5
// 第二次循环 i=1 length:4
// 第三次循环 i=2 length:3
// 再往后就不满足条件了 后边的都循环不到了
var option1 = options1[i]; // 得到每一个option对象
// 判断是否被选中
if(option1.selected == true) {
// 添加到 select2 里面
select2.appendChild(option1);
i--; // 注意这一点，不写 会出问题
}
}
}
// 全部添加到右边
function allToRight() {
var select2 = document.getElementById("select2");
var select1 = document.getElementById("select1");
var options1 = select1.getElementsByTagName("option");
for(var i=0;i<options1.length;i++) {
var option1 = options1[i];
select2.appendChild(option1);
i--;
}
}
// 右边的添加到左边的操作类似
</script>
</body>
案例：下拉框联动效果(省市联动)
** 创建一个页面，有两个下拉选择框
** 在第一个下拉框里面有一个事件：改变事件 onchange事件
** 方法 add1(this.value); 表示当前改变的 option 里面的value值
** 创建一个二维数组，存储数据
** 每个数组中第一个元素是国家名称，后面的元素是国家里面的城市
**代码实现：
<body>
<select id="countryid" onchange="add1(this.value);">
<option value="0">--请选择--</option>
<option value="中国">中国</option>
<option value="美国">美国</option>
<option value="德国">德国</option>
<option value="日本">日本</option>
</select>
<select id="cityid">
<option value="" selected>
<option value="">
</select>
<script type="text/javascript">
// 创建一个数组存储数据
// 使用二维数组
var arr = new Array(4);
arr[0] = ["中国","南京","抚州","临洮","日喀则","哈密"];
arr[1] = ["美国","华盛顿","底特律","休斯顿","纽约"];
arr[2] = ["德国","慕尼黑","柏林","法兰克福","狼堡"];
arr[3] = ["日本","东京","北海道","大阪","广岛","长崎"];
function add1(val) {
/* 实现步骤：
1、遍历二维数组
2、得到的也是一个数组（国家对应关系）
3、拿到数组中的第一个值和传递过来开的值作比较
4、如果相同，获取到第一个值后面的元素
5、得到 city 的 select
6、添加过去 使用 appendChild 方法
** 需要创建option （三步操作）
*/
// 由于每次都要向city里面添加option，第二次添加，前边第一次的会保留，追加
// 所以每次添加之前，判断一下city里面是否有option，如果有，删除
// 获取 city 的 select
var city1 = document.getElementById("cityid");
// 得到 city 里面的 option
var options1 = city1.getElementsByTagName("option");
// 遍历数组
for(var k=0;k<options1.length;k++) {
// 得到每一个 option
var op = options1[k];
// 删除这个 option 通过父节点删除
city1.removeChild(op);
k--;// 每次删除 长度都会减一 k都会增加一 不执行此操作 会出错
}
// 遍历二维数组
for(var i=0;i<arr.length;i++) {
// 得到二维数组里面的每一个数组
var arr1 = arr[i];
// 得到遍历之后的数组的第一个值
var firstvalue = arr1[0];
// 判断传递过来的值和第一个值是否相同
if(firstvalue == val) { // 相同
// 得到第一个值后面的元素
// 遍历数组 arr1
for(var j=1;j<arr1.length;j++) {
var value1 = arr1[j]; // 得到国家之后 城市的名称
// alert(value1);
// 创建 option
var option1 = document.createElement("option");
// 创建文本
var text1 = document.createTextNode(value1);
// 把文本添加到option里面
option1.appendChild(text1);
// 添加值到 city 的 select 里面
city1.appendChild(option1);
}
}
}
}
</script>
</body>