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="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="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>