1、案例:在末尾添加节点(*****)
创建标签 createElement方法
创建文本 createTextNode方法
把文本添加到标签下面 appendChild方法
2、元素对象(了解)
如何获取标签的子标签(唯一有效办法)(*********)
使用getElementsByTagName方法
3、Node对象(了解)
属性 nodeType nodeName nodeValue
记住nodeType值(******)
4、操作DOM树(********)
父节点:parentNode
appendChild方法
- 添加到末尾
- 剪切黏贴的效果
insertBefore(新节点,旧节点)
- 通过父节点添加
removeChild
- 通过父节点删除
replaceChild(新节点,旧节点)
- 通过父节点替换
5、innerHTML属性(*******)
获取文本内容
向标签里面设置内容(可以设置html代码)
==================================================
6、案例:动态显示时间(******)
- 定时器 setInterval:某个时间内重复执行js代码
7、案例:全选练习(******)
- 属性: checked=true:复选框是选中,false是不选中
8、案例:下拉列表左右选择(******)
- select下拉列表里面属性 multiple:让下拉框里面的内容都显示出来
- 属性:selected=true:option是选中,false:option不是选中
9、案例:省市联动(***重点中的重点***)
- 二维数组:数组里面加一个数组
- 事件:onchange事件,改变事件
- 方法 add1(this.value)
10、案例:动态生成表格(******)
- innerHTML属性
- 使用一个变量存html代码
- tab += "</table>";
1、案例一:在末尾添加节点
第一步:获取到ul标签
第二步:创建li标签
document.createElement("标签名称");
第三步:创建文本
document.createTextNode("文本内容");
第四步:把文本添加到li下面
使用 appendChild方法
第五步:把li添加到ul末尾
使用 appendChild方法
1 <html>
2 <head>
3 <title>HTML示例</title>
4 <style type="text/css">
5 div{
6 width:200px;
7 height:200px;
8 border:2px solid red;
9 }
10 </style>
11 </head>
12 <body>
13 <div>
14 <ul id="ulid">
15 <li>111</li>
16 <li>222</li>
17 <li>333</li>
18 <li>444</li>
19 </ul>
20 </div>
21 <div id="div1">
22 </div>
23 <br/>
24 <input type="button" value="add" onclick="add2();"/>
25 <script type="text/javascript">
26 function add2() {
27 var div1 = document.getElementById("div1");
28 var ul1 = document.getElementById("ulid");
29 div1.appendChild(ul1);
30 }
31 //在末尾添加节点
32 function add1() {
33 //获取到ul标签
34 var ul1 = document.getElementById("ulid");
35 //创建标签
36 var li1 = document.createElement("li");
37 //创建文本
38 var tex1 = document.createTextNode("5555");
39 //把文本加入到li下面
40 li1.appendChild(tex1);
41 //把li加入到ul下面
42 ul1.appendChild(li1);
43 }
44 </script>
45 </body>
46 </html>
2、元素对象(element对象)
要操作element对象,首先必须要获取到element,
- 使用document里面相应的方法获取
方法
获取属性里面的值
getAttribute("属性名称")
- var input1 = document.getElementById("inputid");
//alert(input1.value);
alert(input1.getAttribute("value"));
设置属性的值
input1.setAttribute("class","haha");
删除属性
input1.removeAttribute("name");
不能删除value
想要获取标签下面的子标签
使用属性 childNodes,但是这个属性兼容性很差
获得标签下面子标签的唯一有效办法,使用getElementsByTagName方法
1 <html>
2 <head>
3 <title>HTML示例</title>
4 <style type="text/css">
5 </style>
6 </head>
7 <body>
8 <ul id="ulid1">
9 <li>aaaaaa</li>
10 <li>bbbbbb</li>
11 <li>cccccc</li>
12 </ul>
13 <script type="text/javascript">
14 //获取到ul下面的所有子标签(子元素)
15 //获取ul标签
16 var ul11 = document.getElementById("ulid1");
17 //获取ul下面的子标签
18 //var lis = ul11.childNodes; //兼容性差
19 //alert(lis.length);
20 var lis = ul11.getElementsByTagName("li");
21 alert(lis.length);
22 </script>
23 </body>
24 </html>
3、Node对象属性一
nodeName
nodeType
nodeValue
使用dom解析html时候,需要html里面的标签,属性和文本都封装成对象
标签节点对应的值
nodeType: 1
nodeName: 大写标签名称 比如SPAN
nodeValue: null
属性节点对应的值
nodeType: 2
nodeName: 属性名称
nodeValue: 属性的值
文本节点对应的值
nodeType: 3
nodeName: #text
nodeValue: 文本内容
1 <html>
2 <head>
3 <title>HTML示例</title>
4 <style type="text/css">
5 </style>
6 </head>
7 <body>
8 <span id="spanid">哈哈呵呵</span>
9 <script type="text/javascript">
10 //获取标签对象
11 var span1 = document.getElementById("spanid");
12 //alert(span1.nodeType); // 1
13 ///alert(span1.nodeName); // SPAN
14 ///alert(span1.nodeValue); // null
15
16 //属性
17 var id1 = span1.getAttributeNode("id");
18 //alert(id1.nodeType); // 2
19 //alert(id1.nodeName); // id
20 //alert(id1.nodeValue); // spanid
21
22 //获取文本
23 var text1 = span1.firstChild;
24 alert(text1.nodeType); // 3
25 alert(text1.nodeName); // #text
26 alert(text1.nodeValue); // 内容
27 </script>
28 </body>
29 </html>
4、Node对象的属性二
<ul id=”ulid”>
<li id=”li1”>LLLLL</li>
<li id=”li2”>OOOO</li>
<li id=”li3”>VVVVV</li>
<li id=”li4”>EEEEEE</li>
</ul>
父节点
- ul是li的父节点
- parentNode
- //得到li1
var li1 = document.getElementById("li1");
//得到ul
var ul1 = li1.parentNode;
alert(ul1.id);//ulid
子节点
- li是ul的子节点
- childNodes:得到所有子节点,但是兼容性很差
- firstChild:获取第一个子节点
- //获取ul的第一个子节点 id=li1
//得到ul
var ul1 = document.getElementById("ulid");
//第一个子节点
var li1 = ul1.firstChild;
alert(li1.id);//li1
- lastChild:获取最后一个子节点
//得到最后一个子节点
var li4 = ul1.lastChild;
alert(li4.id);//li4
同辈节点
- li直接关系是同辈节点
- nextSibling: 返回一个给定节点的下一个兄弟节点。
previousSibling:返回一个给定节点的上一个兄弟节点。
- //获取li的id是li3的上一个和下一个兄弟节点
var li3 = document.getElementById("li3");
//alert(li3.nextSibling.id);//li4
alert(li3.previousSibling.id);//li2
5、操作dom树
appendChild()方法
- 添加子节点到末尾
- 特点:类似于剪切黏贴的效果
1 <html>
2 <head>
3 <title>HTML示例</title>
4 <style type="text/css">
5 #div1 {
6 width:200px;
7 height:150px;
8 border:2px solid red;
9 }
10 #div2 {
11 width: 250px;
12 height:150px;
13 border: 5px dashed green;
14 }
15 </style>
16 </head>
17 <body>
18 <div id="div1">
19 <ul id="ulid11">
20 <li>tom</li>
21 <li>mary</li>
22 <li>jack</li>
23 </ul>
24 </div>
25 <div id="div2">
26 </div>
27 <input type="button" value="add1" onclick="add11();"/>
28 <script type="text/javascript">
29 function add11() {
30 //得到div2
31 var div2 = document.getElementById("div2");
32 //获取ul
33 var ul11 = document.getElementById("ulid11");
34 //把ul添加到div2里面
35 div2.appendChild(ul11);
36 }
37 </script>
38 </body>
39 </html>
insertBefore(newNode,oldNode)方法
- 在某个节点之前插入一个新的节点
- 两个参数
要插入的节点
在谁之前插入
- 插入一个节点,节点不存在,创建
1、创建标签
2、创建文本
3、把文本添加到标签下面
- 代码
1 <html>
2 <head>
3 <title>HTML示例</title>
4 <style type="text/css">
5 </style>
6 </head>
7 <body>
8 <ul id="ulid21">
9 <li id="li11">西施</li>
10 <li id="li12">王昭君</li>
11 <li id="li13">貂蝉</li>
12 <li id="li14">杨玉环</li>
13 </ul>
14 <input type="button" value="insert" onclick="insert1()"/>
15 <script type="text/javascript">
16 //在<li>貂蝉</li>之前添加 <li>董小宛</li>
17 function insert1() {
18 /
19 1、获取到li13标签
20 2、创建li
21 3、创建文本
22 4、把文本添加到li下面
23 5、获取到ul
24 6、把li添加到ul下面(在<li>貂蝉</li>之前添加 <li>董小宛</li>)
25 /
26 //获取li3 标签
27 var li13 = document.getElementById("li13");
28 //创建li
29 var li15 = document.createElement("li");
30 //创建文本
31 var text15 = document.createTextNode("董小宛");
32 //把文本添加到li下面 appendChild
33 li15.appendChild(text15);
34 //获取到ul
35 var ul21 = document.getElementById("ulid21");
36 //在<li>貂蝉</li>之前添加 <li>董小宛</li>
37 //insertBefore(newNode,oldNode)
38 ul21.insertBefore(li15,li13);
39 }
40 </script>
41 </body>
42 </html>
不存在 没有insertAfter()方法
removeChild()方法:删除节点
- 通过父节点删除,不能自己删除自己
1 <html>
2 <head>
3 <title>HTML示例</title>
4 <style type="text/css">
5 </style>
6 </head>
7 <body>
8 <ul id="ulid31">
9 <li id="li21">西施</li>
10 <li id="li22">王昭君</li>
11 <li id="li23">貂蝉</li>
12 <li id="li24">杨玉环</li>
13 </ul>
14 <input type="button" value="remove" onclick="remove1();"/>
15 <script type="text/javascript">
16 //删除<li id="li24">杨玉环</li>
17 function remove1() {
18 /
19 1、获取到li24标签
20 2、获取父节点ul标签
21 3、执行删除(通过父节点删除)
22 /
23 //获取li标签
24 var li24 = document.getElementById("li24");
25 //获取父节点
26 //两种方式 1、通过id获取 ; 2、通过属性 parentNode获取
27 var ul31 = document.getElementById("ulid31");
28 //删除(通过父节点)
29 ul31.removeChild(li24);
30 }
31 </script>
32 </body>
33 </html>
replaceChild(newNode,oldNode)方法: 替换节点
- 不能自己替换自己,通过父节点替换
- 两个参数
第一个参数:新的节点(替换成的节点)
第二个参数:旧的节点(被替换的节点)
1 <html>
2 <head>
3 <title>HTML示例</title>
4 <style type="text/css">
5 </style>
6 </head>
7 <body>
8 <ul id="ulid41">
9 <li id="li31">紫衫龙王</li>
10 <li id="li32">白眉鹰王</li>
11 <li id="li33">金毛狮王</li>
12 <li id="li34">青翼蝠王</li>
13 </ul>
14 <input type="button" value="replace" onclick="replace1();"/>
15 <script type="text/javascript">
16 //<li id="li34">青翼蝠王</li>替换 <li>张无忌</li>
17 function replace1() {
18 /
19 1、获取到li34
20 2、创建标签li
21 3、创建文本
22 4、把文本添加到li下面
23 5、获取ul标签(父节点)
24 6、执行替换操作 (replaceChild(newNode,oldNode))
25 /
26 //获取li34
27 var li34 = document.getElementById("li34");
28 //创建li
29 var li35 = document.createElement("li");
30 //创建文本
31 var text35 = document.createTextNode("张无忌");
32 //把文本添加到li下面
33 li35.appendChild(text35);
34 //获取ul
35 var ul41 = document.getElementById("ulid41");
36 //替换节点
37 ul41.replaceChild(li35,li34);
38 }
39 </script>
40 </body>
41 </html>
cloneNode(boolean)方法: 复制节点
- //把ul列表复制到另外一个div里面
1 <html>
2 <head>
3 <title>HTML示例</title>
4 <style type="text/css">
5 </style>
6 </head>
7 <body>
8 <ul id="ulid41">
9 <li id="li31">紫衫龙王</li>
10 <li id="li32">白眉鹰王</li>
11 <li id="li33">金毛狮王</li>
12 <li id="li34">青翼蝠王</li>
13 </ul>
14 <div id="divv">
15 </div>
16 <input type="button" value="copy" onclick="copy1();"/>
17 <script type="text/javascript">
18 function copy1() {
19 //把ul列表复制到另外一个div里面
20 /
21 1、获取到ul
22 2、执行复制方法 cloneNode方法复制 true
23 3、把复制之后的内容放到div里面去
24 获取到div
25 appendChild方法
26 /
27 //获取ul
28 var ul41 = document.getElementById("ulid41");
29 //复制ul,放到类似剪切板里面
30 var ulcopy = ul41.cloneNode(true)
31 //获取到div
32 var divv = document.getElementById("divv");
33 //把副本放到div里面去
34 divv.appendChild(ulcopy);
35 }
36 </script>
37 </body>
38 </html>
操作dom总结
获取节点使用方法
getElementById():通过节点的id属性,查找对应节点。
getElementsByName():通过节点的name属性,查找对应节点。
getElementsByTagName():通过节点名称,查找对应节点
插入节点的方法
insertBefore方法:在某个节点之前插入
appendChild方法:在末尾添加,剪切黏贴
删除节点方法
removeChild方法:通过父节点删除
替换节点方法
replaceChild方法:通过父节点替换
6、innerHTML属性
这个属性不是dom的组成部分,但是大多数浏览器都支持的属性
第一个作用:获取文本内容
//获取span标签
var span1 = document.getElementById("sid");
alert(span1.innerHTML);
第二个作用:向标签里面设置内容(可以是html代码)
//向div里面设置内容 <h1>AAAAA</h1>
//获取到div
var div11 = document.getElementById("div11");
//设置内容
div11.innerHTML = "<h1>AAAAA</h1>";
练习 : 向div里面添加一个表格
- //向div里面添加一个表格
//vartab="<table border='1'><tr><td>aaaaaa</td></tr><tr><td>bbbbbb</td></tr><tr><td>cccccc</td></tr></table>";
var tab = "<table>";
tab += "</table>";
//相当于 var tab = "<table></table>";
div11.innerHTML = tab;
1 <html>
2 <head>
3 <title>HTML示例</title>
4 <style type="text/css">
5 #div11 {
6 width:200px;
7 height:150px;
8 border:2px dashed red;
9 }
10 </style>
11 </head>
12 <body>
13 <span id="sid">哈哈呵呵</span>
14 <div id="div11">
15 </div>
16 <script type="text/javascript">
17 //获取span标签
18 var span1 = document.getElementById("sid");
19 //alert(span1.innerHTML);
20
21 //向div里面设置内容 <h1>AAAAA</h1>
22 //获取到div
23 var div11 = document.getElementById("div11");
24 //设置内容
25 //div11.innerHTML = "<h1>AAAAA</h1>";
26
27 //向div里面添加一个表格
28 //var tab = "<table border='1'><tr><td>aaaaaa</td></tr><tr><td>bbbbbb</td></tr><tr><td>cccccc</td></tr></table>";
29 var tab = "<table>";
30 tab += "</table>";
31 //相当于 var tab = "<table></table>";
32 div11.innerHTML = tab;
33 </script>
34 </body>
35 </html>
7、案例二:动态显示时间
得到当前的时间
var date = new Date(); //得到不是常规的格式
var d1 = date.toLocaleString(); //格式化
需要让页面每一秒获取时间
setInterval方法 定时器
显示到页面上
每一秒向div里面写一次时间
使用innerHTML属性
代码
1 <html>
2 <head>
3 <title>HTML示例</title>
4 <style type="text/css">
5 </style>
6 </head>
7 <body>
8 <div id="times">
9 </div>
10 <script type="text/javascript">
11 function getD1() {
12 //当前时间
13 var date = new Date();
14 //格式化
15 var d1 = date.toLocaleString();
16 //获取div
17 var div1 = document.getElementById("times");
18 div1.innerHTML = d1;
19 }
20 //使用定时器实现每一秒写一次时间
21 setInterval("getD1();",1000);
22 </script>
23 </body>
24 </html>
8、案例三:全选练习
使用复选框上面一个属性判断是否选中
- checked属性
- checked=true:选中
- checked=false:不选中
创建一个页面
复选框和按钮
- 四个复选框表示爱好
- 还有一个复选框操作 全选和选不选,也有一个事件
三个按钮,分别有事件
- 全选
- 全不选
- 反选
全选操作
步骤:
/*
1、获取要操作的复选框
- 使用getElementsByName()
2、返回是数组,
- 属性 checked判断复选框是否选中
checked = true; //表示选中
checked = false;//表示不选中
- 遍历数组,得到的是每一个checkbox
把每一个checkbox属性checked=true
*/
全不选操作
步骤
/*
1、获取到要操作的复选框
2、返回的是数组,遍历数组
3、得到每一个复选框
4、设置复选框的属性 checked=false
*/
反选操作
步骤
/*
1、获取到要操作的复选框
2、返回数组,遍历数组
3、得到每一个复选框
4、判断当前的复选框是选中还是不选中
- if(love1.checked == true) {}
5、如果选中,属性checked设置成false,否则,设置成true
*/
使用复选框实现全选和全不选
步骤
/*
1、得到上面那个复选框
- 通过id获取到
2、判断这个复选框是否是选中
- if条件,checked==true
3、如果是选中,下面是全选
4、如果不是选中,下面是全不选
*/
1 <html>
2 <head>
3 <title>HTML示例</title>
4 <style type="text/css">
5 </style>
6 </head>
7 <body>
8 <input type="checkbox" id="boxid" onclick="selAllNo();"/>全选/全不选
9 <br/>
10 <input type="checkbox" name="love"/>篮球
11 <input type="checkbox" name="love"/>排球
12 <input type="checkbox" name="love"/>羽毛球
13 <input type="checkbox" name="love"/>乒乓球
14 <br/>
15 <input type="button" value="全选" onclick="selAll();"/>
16 <input type="button" value="全不选" onclick="selNo();"/>
17 <input type="button" value="反选" onclick="selOther();"/>
18 <script type="text/javascript">
19 //实现全选和全不选
20 function selAllNo() {
21 /
22 1、得到上面那个复选框
23 - 通过id获取到
24 2、判断这个复选框是否是选中
25 - if条件,checked==true
26 3、如果是选中,下面是全选
27 4、如果不是选中,下面是全不选
28 /
29 //得到上面复选框
30 var box1 = document.getElementById("boxid");
31 //判断这个复选框是否是选择
32 if(box1.checked == true) { //是选择状态
33 //调用全选方法
34 selAll();
35 } else { //不是选中状态
36 //调用全不选方法
37 selNo();
38 }
39 }
40 //实现反选的操作
41 function selOther() {
42 /
43 1、获取到要操作的复选框
44 2、返回数组,遍历数组
45 3、得到每一个复选框
46 4、判断当前的复选框是选中还是不选中
47 - if(love1.checked == true) {}
48 5、如果选中,属性checked设置成false,否则,设置成true
49 /
50 //获取要操作的复选框
51 var loves11 = document.getElementsByName("love");
52 //遍历数组
53 for(var a=0;a<loves11.length;a++) {
54 //得到每一个复选框
55 var love11 = loves11[a];
56 //判断当前这个复选框是什么状态
57 if(love11.checked == true) { //是选中的状态
58 //设置checked=false
59 love11.checked = false;
60 } else { //是不选中的状态
61 //把checked=true
62 love11.checked = true;
63 }
64 }
65 }
66 //实现全不选的操作
67 function selNo() {
68 /
69 1、获取到要操作的复选框
70 2、返回的是数组,遍历数组
71 3、得到每一个复选框
72 4、设置复选框的属性 checked=false
73 /
74 //得到要操作的复选框
75 var loves1 = document.getElementsByName("love");
76 //遍历数组
77 for(var j=0;j<loves1.length;j++) {
78 //得到每一个复选框
79 var love1 = loves1[j];
80 //设置属性的值checked = false;
81 love1.checked = false;
82 }
83 }
84 //实现全选的操作
85 function selAll() {
86 /
87 1、获取要操作的复选框
88 - 使用getElementsByName()
89 2、返回是数组,
90 - 属性 checked判断复选框是否选中
91 checked = true; //表示选中
92 checked = false;//表示不选中
93 - 遍历数组,得到的是每一个checkbox
94 把每一个checkbox属性checked=true
95 /
96 //获取要操作的复选框
97 var loves = document.getElementsByName("love");
98 //遍历数组,得到每一个复选框
99 for(var i=0;i<loves.length;i++) {
100 var love1 = loves[i]; //得到每一个复选框
101 //设置属性是true
102 love1.checked = true;
103 }
104 }
105 </script>
106 </body>
9、案例四:下拉列表左右选择
下拉选择框
<select>
<option>111</option>
<option>111</option>
</select>
创建一个页面
两个下拉选择框
- 设置属性 multiple属性
四个按钮,有事件
选中添加到右边
步骤
/*
1、获取select1里面的option
- getElementsByTagName()返回是数组
- 遍历数组,得到每一个option
2、判断option是否被选中
- 属性 selected,判断是否被选中
selected= true: 选中
selected= false:没有选择
3、如果是选中,把选择的添加到右边去
4、得到select2
5、添加选择的部分
- appendChild方法
*/
全部添加到右边
步骤
/*
1、获取第一个select下面的option对象
2、返回数组,遍历数组
3、得到每一个option对象
4、得到select2
5、添加到select2下面
- appendChild方法
*/
选中添加到左边
步骤
/*
1、获取select2里面的option对象
2、返回是数组,遍历数组
3、得到每一个option对象
4、判断option是否被选中
- if条件 属性 selected == true:选择
5、获取select1
6、添加到select1里面
- 使用appendChild方法
*/
全部添加到左边
步骤
/*
1、获取select2里面的option对象
2、返回是数组,遍历数组
3、得到每一个option对象
4、获取到select1
5、添加到select1里面
- 使用appendChild方法
*/
1 <html>
2 <head>
3 <title>HTML示例</title>
4 <style type="text/css">
5 </style>
6 </head>
7 <body>
8 <div id="s1" style="float:left;">
9 <div>
10 <select id="select1" multiple="multiple" style="width:100px;height:100px;">
11 <option>AAAAAAAA</option>
12 <option>BBBBBBBB</option>
13 <option>CCCCCCCC</option>
14 <option>DDDDDDDD</option>
15 <option>EEEEEEEE</option>
16 </select>
17 </div>
18 <div>
19 <input type="button" value="选中添加到右边" onclick="selToRight();"/><br/>
20 <input type="button" value="全部添加到右边" onclick="allToRight();"/>
21 </div>
22 </div>
23 <div id="s2">
24 <div>
25 <select id="select2" multiple="multiple" style="width:100px;height:100px;">
26 <option>QQQQQQQQ</option>
27 </select>
28 </div>
29 <div>
30 <input type="button" value="选中添加到左边" onclick="selToLeft();"/><br/>
31 <input type="button" value="全部添加到左边" onclick="allToLeft();"/>
32 </div>
33 </div>
34 <script type="text/javascript">
35 //实现全部添加到左边
36 function allToLeft() {
37 /
38 1、获取select2里面的option对象
39 2、返回是数组,遍历数组
40 3、得到每一个option对象
41
42 4、获取到select1
43 5、添加到select1里面
44 - 使用appendChild方法
45 /
46 //获取select2
47 var select2 = document.getElementById("select2");
48 //获取select1
49 var select1 = document.getElementById("select1");
50 //获取select2里面的option
51 var options1 = select2.getElementsByTagName("option");
52 //遍历数组
53 for(var m=0;m<options1.length;m++){
54 //得到每一个option
55 var op11 = options1[m];
56 //添加到select1里面
57 select1.appendChild(op11);
58 m--;
59 }
60 }
61 //选择添加到左边
62 function selToLeft() {
63 /
64 1、获取select2里面的option对象
65 2、返回是数组,遍历数组
66 3、得到每一个option对象
67 4、判断option是否被选中
68 - if条件 属性 selected == true:选择
69 5、获取select1
70 6、添加到select1里面
71 - 使用appendChild方法
72 /
73 //获取select1
74 var s1 = document.getElementById("select1");
75 //获取到select2
76 var s2 = document.getElementById("select2");
77 //得到s1里面的option对象
78 var opss = s2.getElementsByTagName("option");
79 //遍历数组
80 for(var aa=0;aa<opss.length;aa++) {
81 //得到每一个option
82 var op = opss[aa];
83 //判断是否被选中
84 if(op.selected == true) { //被选中
85 //添加到select1里面
86 s1.appendChild(op);
87 aa--;
88 }
89 }
90 }
91 //全部添加到右边
92 function allToRight() {
93 /
94 1、获取第一个select下面的option对象
95 2、返回数组,遍历数组
96 3、得到每一个option对象
97 4、得到select2
98 5、添加到select2下面
99 - appendChild方法
100 /
101 //得到select2
102 var s2 = document.getElementById("select2");
103 //得到select下面的option对象
104 var s1 = document.getElementById("select1");
105 var ops = s1.getElementsByTagName("option");//返回的是数组
106 //遍历数组
107 for(var j=0;j<ops.length;j++) {
108 //得到每一个option对象
109 var op1 = ops[j];
110 //添加option到s2下面
111 s2.appendChild(op1);
112 j--;
113 }
114 }
115 //实现选中添加到右边
116 function selToRight() {
117 /
118 1、获取select1里面的option
119 - getElementsByTagName()返回是数组
120 - 遍历数组,得到每一个option
121 2、判断option是否被选中
122 - 属性 selected,判断是否被选中
123 selected= true: 选中
124 selected= false:没有选择
125 3、如果是选中,把选择的添加到右边去
126 4、得到select2
127 4、添加选择的部分
128 - appendChild方法
129 /
130 //获取select1里面的option
131 //获取select2
132 var select2 = document.getElementById("select2");
133 //得到select1
134 var select1 = document.getElementById("select1");
135 //得到option
136 var options1 = select1.getElementsByTagName("option");
137 //遍历数组
138 for(var i=0;i<options1.length;i++) {
139 //alert(i);
140 //第一次循环 i=0 length:5
141 //第二次循环 i=0 length:4
142 // i=0 length: 3
143 var option1 = options1[i];//得到每一个option对象
144 //判断是否被选中
145 if(option1.selected == true) {
146 //添加到select2里面
147 select2.appendChild(option1);
148 i--;
149 }
150 }
151 }
152 </script>
153 </body>
154 </html>
10、案例五:省市联动
创建一个页面,有两个下拉选择框
在第一个下拉框里面有一个事件 :改变事件 onchange事件
- 方法add1(this.value);表示当前改变的option里面的value值
创建一个二维数组,存储数据
每个数组中第一个元素是国家名称,后面的元素是国家里面的城市
/*
1、遍历二维数组
2、得到也是一个数组(国家对应关系)
3、拿到数组中的第一个值和传递过来的值做比较
4、如果相同,获取到第一个值后面的元素
5、得到city的select
6、添加过去(使用)appendChild方法
- 创建option(三步)
*/
/*
由于每次都要向city里面添加option
第二次添加,会追加。
每次添加之前,判断一下city里面是否有option,如果有,删除
*/
1 <html>
2 <head>
3 <title>HTML示例</title>
4 <style type="text/css">
5 </style>
6 </head>
7 <body>
8 <select id="countryid" onchange="add1(this.value);">
9 <option value="0">--请选择--</option>
10 <option value="中国">中国</option>
11 <option value="美国">美国</option>
12 <option value="德国">德国</option>
13 <option value="日本">日本</option>
14 </select>
15 <select id="cityid">
16 </select>
17 </body>
18 <script type="text/javascript">
19 //创建一个数组存储数据
20 //二维数组
21 var arr = new Array(4);
22 arr[0] = ["中国","南京","抚州","临洮","日喀则","哈密"];
23 arr[1] = ["美国","华盛顿","底特律","休斯顿","纽约"];
24 arr[2] = ["德国","慕尼黑","柏林","法兰克福","狼堡"];
25 arr[3] = ["日本","东京","北海道","大阪","广岛","长崎"];
26
27 function add1(val) {
28 //alert(val);
29 /
30 1、遍历二维数组
31 2、得到也是一个数组(国家对于关系)
32
33 3、拿到数组中的第一个值和传递过来的值做比较
34 4、如果相同,获取到第一个值后面的元素
35 5、得到city的select
36 6、添加过去(使用)appendChild方法
37 - 创建option(三步)
38 /
39 /
40 由于每次都要想city里面添加option
41 第二次添加,追加
42 每次添加之前,判断一下city里面是否有option,如果有,删除
43 /
44 //获取city的select
45 var city1 = document.getElementById("cityid");
46 //得到city里面的option
47 var options1 = city1.getElementsByTagName("option");
48 //遍历数组
49 for(var m=0;m<options1.length;m++) {
50 //得到每一个option
51 var op = options1[m];
52 //删除这个option 通过父节点删除
53 city1.removeChild(op);
54 m--;
55 }
56 //遍历二维数组
57 for(var i=0;i<arr.length;i++) {
58 //得到二维数组里面的每一个数组
59 var arr1 = arr[i];
60 //得到遍历之后的数组的第一个值
61 var firstvalue = arr1[0];
62 //判断传递过来的值和第一个值是否相同
63 if(firstvalue == val) { //相同
64 //得到第一个值后面的元素
65 //遍历arr1
66 for(var j=1;j<arr1.length;j++) {
67 var value1 = arr1[j]; //得到城市的名称
68 //alert(value1);
69 //创建option
70 var option1 = document.createElement("option");
71 //创建文本
72 var text1 = document.createTextNode(value1);
73 //把文本添加到option1里面
74 option1.appendChild(text1);
75 //添加值到city1里面
76 city1.appendChild(option1);
77 }
78 }
79 }
80 }
81 </script>
82 </html>
11、案例六:动态生成表格
创建一个页面:两个输入框和一个按钮
代码和步骤
1 <html>
2 <head>
3 <title>HTML示例</title>
4 <style type="text/css">
5 </style>
6 </head>
7 <body>
8 行:<input type="text" id="h" />
9 列:<input type="text" id="l" />
10 <br/>
11 <input type="button" value="生成" onclick="add2();"/>
12 <div id="divv">
13 </div>
14 <script type="text/javascript">
15 function add2() {
16 /
17 1、得到输入的行和列的值
18 2、生成表格
19 循环行
20 在行里面循环单元格
21 3、显示到页面上
22 - 把表格的代码设置到div里面
23 - 使用innerHTML属性
24 /
25 //获取输入的行和列
26 var h = document.getElementById("h").value;
27 var l = document.getElementById("l").value;
28
29 //把表格代码放到一个变量里面
30 var tab = "<table border='1' bordercolor='blue'>";
31 //循环行
32 for(var i=1;i<=h;i++) {
33 tab += "<tr>";
34 //循环单元格
35 for(var j=1;j<=l;j++) {
36 tab += "<td>aaaaaaa</td>"
37 }
38 tab += "</tr>";
39 }
40
41 tab += "</table>";
42
43 //alert(tab);
44 //得到div标签
45 var divv = document.getElementById("divv");
46 //把table的代码设置到div里面去
47 divv.innerHTML = tab;
48 }
49 </script>
50 </body>
51 </html>