超全面的JavaWeb笔记day04<dom树等>
来源：互联网 发布：香港买家淘宝怎么发货 编辑：程序博客网 时间：2024/06/05 23:23
创建标签 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); // 113 ///alert(span1.nodeName); // SPAN14 ///alert(span1.nodeValue); // null15 16 //属性17 var id1 = span1.getAttributeNode("id");18 //alert(id1.nodeType); // 219 //alert(id1.nodeName); // id20 //alert(id1.nodeValue); // spanid21 22 //获取文本23 var text1 = span1.firstChild;24 alert(text1.nodeType); // 325 alert(text1.nodeName); // #text26 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 //得到div231 var div2 = document.getElementById("div2");32 //获取ul33 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、创建li21 3、创建文本22 4、把文本添加到li下面23 5、获取到ul24 6、把li添加到ul下面（在<li>貂蝉</li>之前添加 <li>董小宛</li>） 25 /26 //获取li3 标签27 var li13 = document.getElementById("li13");28 //创建li29 var li15 = document.createElement("li");30 //创建文本31 var text15 = document.createTextNode("董小宛");32 //把文本添加到li下面 appendChild33 li15.appendChild(text15);34 //获取到ul35 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、获取到li3420 2、创建标签li21 3、创建文本22 4、把文本添加到li下面23 5、获取ul标签（父节点）24 6、执行替换操作 （replaceChild(newNode,oldNode)）25 /26 //获取li3427 var li34 = document.getElementById("li34");28 //创建li29 var li35 = document.createElement("li");30 //创建文本31 var text35 = document.createTextNode("张无忌");32 //把文本添加到li下面33 li35.appendChild(text35);34 //获取ul35 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、获取到ul22 2、执行复制方法 cloneNode方法复制 true23 3、把复制之后的内容放到div里面去24 获取到div25 appendChild方法26 /27 //获取ul28 var ul41 = document.getElementById("ulid41");29 //复制ul，放到类似剪切板里面30 var ulcopy = ul41.cloneNode(true)31 //获取到div32 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 //获取到div23 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 //获取div17 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 //设置属性是true102 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 //得到select2102 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里面的option119 - getElementsByTagName()返回是数组120 - 遍历数组，得到每一个option121 2、判断option是否被选中122 - 属性 selected，判断是否被选中123 selected= true: 选中124 selected= false：没有选择125 3、如果是选中，把选择的添加到右边去126 4、得到select2127 4、添加选择的部分128 - appendChild方法129 /130 //获取select1里面的option131 //获取select2132 var select2 = document.getElementById("select2");133 //得到select1134 var select1 = document.getElementById("select1");135 //得到option136 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: 3143 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的select36 6、添加过去（使用）appendChild方法37 - 创建option（三步）38 /39 /40 由于每次都要想city里面添加option41 第二次添加，追加42 每次添加之前，判断一下city里面是否有option，如果有，删除43 /44 //获取city的select45 var city1 = document.getElementById("cityid");46 //得到city里面的option47 var options1 = city1.getElementsByTagName("option");48 //遍历数组49 for(var m=0;m<options1.length;m++) {50 //得到每一个option51 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 //遍历arr166 for(var j=1;j<arr1.length;j++) {67 var value1 = arr1[j]; //得到城市的名称68 //alert(value1);69 //创建option70 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>
- 超全面的JavaWeb笔记day04<dom树等>
- 超全面的JavaWeb笔记day01<HTML等>
- 超全面的JavaWeb笔记day01<HTML等>
- 超全面的JavaWeb笔记day17<JDBC>
- 超全面的JavaWeb笔记day19<Service>
- 超全面的JavaWeb笔记day21<过滤器>
- 超全面的JavaWeb笔记day23<AJAX>
- 超全面的JavaWeb笔记day02<CSS&JavaScript>
- 超全面的JavaWeb笔记day03<JS对象&函数>
- 超全面的JavaWeb笔记day05<xml&dtd&jaxp>
- 超全面的JavaWeb笔记day07<Java基础加强>
- 超全面的JavaWeb笔记day06<Schema&SAX&dom4j>
- 超全面的JavaWeb笔记day09<Servlet&GenericServlet&HttpServlet&ServletContext>
- 超全面的JavaWeb笔记day10<Response&Request&路径&编码>
- 超全面的JavaWeb笔记day11<JSP&Session&Cookie&HttpSession>
- 超全面的JavaWeb笔记day12<Jsp&JavaBean&El表达式>
- 超全面的JavaWeb笔记day13<JSTL&自定义标签>
- 超全面的JavaWeb笔记day14<用户注册登录>
- Gson用法详解
- 采样率和采样大小
- 超全面的JavaWeb笔记day03<JS对象&函数>
- react多国语言——react-intl
- 从根本解决Android6.0权限检测问题 附demo
- 超全面的JavaWeb笔记day04<dom树等>
- 超全面的JavaWeb笔记day05<xml&dtd&jaxp>
- mac os环境安装需知
- TextView显示（不同大小的，颜色）富文本
- 超全面的JavaWeb笔记day07<Java基础加强>
- 1970之谜
- 盗号，黑电脑，黑网站，真的666
- 例题7-4 素数环（Prime Ring Problem, UVa 524）
- Eclipse导入Maven项目详解（新手初学）
