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方法

 <html>
 <head>
     <title>HTML示例</title>
     <style type="text/css">
         div{
             width:200px;
             height:200px;
             border:2px solid red;
         }
     </style>
 </head>
 <body>
     <div>
         <ul id="ulid">
             <li>111</li>
             <li>222</li>
             <li>333</li>
             <li>444</li>
         </ul>
 </div>
 <div id="div1">
 </div>
     <br/>
     <input type="button" value="add" onclick="add2();"/>
     <script type="text/javascript">
         function add2() {
             var div1 = document.getElementById("div1");
             var ul1 = document.getElementById("ulid");
             div1.appendChild(ul1);
         }
         //在末尾添加节点
         function add1() {
             //获取到ul标签
             var ul1 = document.getElementById("ulid");
             //创建标签
             var li1 = document.createElement("li");
             //创建文本
             var tex1 = document.createTextNode("5555");
             //把文本加入到li下面
             li1.appendChild(tex1);
             //把li加入到ul下面
             ul1.appendChild(li1);
         }
     </script>
 </body>
 </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方法

 <html>
 <head>
     <title>HTML示例</title>
     <style type="text/css">
     </style>
 </head>
 <body>
     <ul id="ulid1">
         <li>aaaaaa</li>
         <li>bbbbbb</li>
         <li>cccccc</li>
     </ul>
     <script type="text/javascript">
         //获取到ul下面的所有子标签（子元素）
         //获取ul标签
         var ul11 = document.getElementById("ulid1");
         //获取ul下面的子标签
         //var lis = ul11.childNodes;    //兼容性差
         //alert(lis.length);
         var lis = ul11.getElementsByTagName("li");
         alert(lis.length);
     </script>
 </body>
 </html>

3、Node对象属性一

　　nodeName

　　nodeType

　　nodeValue

　　使用dom解析html时候，需要html里面的标签，属性和文本都封装成对象

　　标签节点对应的值

　　　　nodeType： 1

　　　　nodeName：大写标签名称比如SPAN

　　　　nodeValue: null

　　属性节点对应的值

　　　　nodeType： 2

　　　　nodeName：属性名称

　　　　nodeValue: 属性的值

　　文本节点对应的值

　　　　nodeType： 3

　　　　nodeName： #text

　　　　nodeValue: 文本内容

 <html>
 <head>
       <title>HTML示例</title>
       <style type="text/css">
     </style>
 </head>
 <body>
     <span id="spanid">哈哈呵呵</span>
     <script type="text/javascript">
         //获取标签对象
         var span1 = document.getElementById("spanid");
         //alert(span1.nodeType);   //  1
         ///alert(span1.nodeName);   // SPAN
         ///alert(span1.nodeValue);  // null
 
         //属性
         var id1 = span1.getAttributeNode("id");
         //alert(id1.nodeType);  // 2
         //alert(id1.nodeName);  // id
         //alert(id1.nodeValue); // spanid
 
         //获取文本
         var text1 = span1.firstChild;
         alert(text1.nodeType);  //  3
         alert(text1.nodeName);  // #text
         alert(text1.nodeValue); // 内容
     </script>
 </body>
 </html>

4、Node对象的属性二

　　　　<li id=”li1”>LLLLL</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()方法

　　　　- 添加子节点到末尾

　　　　- 特点：类似于剪切黏贴的效果

 <html>
 <head>
       <title>HTML示例</title>
       <style type="text/css">
         #div1 {
             width:200px;
             height:150px;
             border:2px solid red;
         }
         #div2 {
             width: 250px;
             height:150px;
             border: 5px dashed green;
         }
       </style>
 </head>
 <body>
     <div id="div1">
         <ul id="ulid11">
             <li>tom</li>
             <li>mary</li>
             <li>jack</li>
         </ul>
     </div>
     <div id="div2">
     </div>
     <input type="button" value="add1" onclick="add11();"/>
     <script type="text/javascript">
         function add11() {
             //得到div2
             var div2 = document.getElementById("div2");
             //获取ul
             var ul11 = document.getElementById("ulid11");
             //把ul添加到div2里面
             div2.appendChild(ul11);
         }
     </script>
 </body>
 </html>

　　insertBefore(newNode,oldNode)方法

　　　　- 在某个节点之前插入一个新的节点

　　　　- 两个参数

　　　　　　要插入的节点

　　　　　　在谁之前插入

　　　　- 插入一个节点，节点不存在，创建

　　　　　　1、创建标签

　　　　　　2、创建文本

　　　　　　3、把文本添加到标签下面

　　　　- 代码

 <html>
 <head>
       <title>HTML示例</title>
       <style type="text/css">
       </style>
 </head>
 <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标签
                 2、创建li
                 3、创建文本
                 4、把文本添加到li下面
                 5、获取到ul
                 6、把li添加到ul下面（在<li>貂蝉</li>之前添加 <li>董小宛</li>）
             /
             //获取li3 标签
             var li13 = document.getElementById("li13");
             //创建li
             var li15 = document.createElement("li");
             //创建文本
             var text15 = document.createTextNode("董小宛");
             //把文本添加到li下面 appendChild
             li15.appendChild(text15);
             //获取到ul
             var ul21 = document.getElementById("ulid21");
             //在<li>貂蝉</li>之前添加 <li>董小宛</li>
             //insertBefore(newNode,oldNode)
             ul21.insertBefore(li15,li13);
         }
     </script>
 </body>
 </html>

　　不存在没有insertAfter()方法

　　removeChild()方法：删除节点

　　　　- 通过父节点删除，不能自己删除自己

 <html>
 <head>
       <title>HTML示例</title>
       <style type="text/css">
       </style>
 </head>
 <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标签
                 2、获取父节点ul标签
                 3、执行删除（通过父节点删除）
             /
             //获取li标签
             var li24 = document.getElementById("li24");
             //获取父节点
             //两种方式  1、通过id获取 ； 2、通过属性 parentNode获取
             var ul31 = document.getElementById("ulid31");
             //删除（通过父节点）
             ul31.removeChild(li24);
         }
     </script>
 </body>
 </html>

　　replaceChild(newNode,oldNode)方法: 替换节点

　　　　- 不能自己替换自己，通过父节点替换

　　　　- 两个参数

　　　　　　第一个参数：新的节点（替换成的节点）

　　　　　　第二个参数：旧的节点（被替换的节点）

 <html>
 <head>
       <title>HTML示例</title>
       <style type="text/css">
       </style>
 </head>
 <body>
     <ul id="ulid41">
         <li id="li31">紫衫龙王</li>
         <li id="li32">白眉鹰王</li>
         <li id="li33">金毛狮王</li>
         <li id="li34">青翼蝠王</li>
     </ul>
     <input type="button" value="replace" onclick="replace1();"/>
     <script type="text/javascript">
         //<li id="li34">青翼蝠王</li>替换  <li>张无忌</li>
         function replace1() {
             /
                 1、获取到li34
                 2、创建标签li
                 3、创建文本
                 4、把文本添加到li下面
                 5、获取ul标签（父节点）
                 6、执行替换操作 （replaceChild(newNode,oldNode)）
             /
             //获取li34
             var li34 = document.getElementById("li34");
             //创建li
             var li35 = document.createElement("li");
             //创建文本
             var text35 = document.createTextNode("张无忌");
             //把文本添加到li下面
             li35.appendChild(text35);
             //获取ul
             var ul41 = document.getElementById("ulid41");
             //替换节点
             ul41.replaceChild(li35,li34);
         }
     </script>
 </body>
 </html>

　　cloneNode(boolean)方法: 复制节点

　　　　- //把ul列表复制到另外一个div里面

 <html>
 <head>
       <title>HTML示例</title>
       <style type="text/css">
       </style>
 </head>
 <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="copy" onclick="copy1();"/>
     <script type="text/javascript">
         function copy1() {
             //把ul列表复制到另外一个div里面
             /
                 1、获取到ul
                 2、执行复制方法 cloneNode方法复制 true
                 3、把复制之后的内容放到div里面去
                      获取到div
                      appendChild方法
             /
             //获取ul
             var ul41 = document.getElementById("ulid41");
             //复制ul，放到类似剪切板里面
             var ulcopy = ul41.cloneNode(true)
             //获取到div
             var divv = document.getElementById("divv");
             //把副本放到div里面去
             divv.appendChild(ulcopy);
         }
     </script>
 </body>
 </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;

 <html>
 <head>
       <title>HTML示例</title>
       <style type="text/css">
         #div11 {
             width:200px;
             height:150px;
             border:2px dashed red;
         }
       </style>
 </head>
 <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>";
 
         //向div里面添加一个表格
         //var tab = "<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;
     </script>
 </body>
 </html>

7、案例二：动态显示时间

　　得到当前的时间

　　　　var date = new Date(); //得到不是常规的格式

　　　　var d1 = date.toLocaleString(); //格式化

　　需要让页面每一秒获取时间

　　　　setInterval方法定时器

　　显示到页面上

　　　　每一秒向div里面写一次时间

　　　　　　使用innerHTML属性

　　代码

 <html>
 <head>
       <title>HTML示例</title>
       <style type="text/css">
       </style>
 </head>
 <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>
 </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、如果不是选中，下面是全不选

 <html>
 <head>
       <title>HTML示例</title>
       <style type="text/css">
       </style>
 </head>
 <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 selAllNo() {
             /
                 1、得到上面那个复选框
                     - 通过id获取到
                 2、判断这个复选框是否是选中
                     - if条件，checked==true
                 3、如果是选中，下面是全选
                 4、如果不是选中，下面是全不选
             /
             //得到上面复选框
             var box1 = document.getElementById("boxid");
             //判断这个复选框是否是选择
             if(box1.checked == true) { //是选择状态
                 //调用全选方法
                 selAll();
             } else { //不是选中状态
                 //调用全不选方法
                 selNo();
             }
         }
         //实现反选的操作
         function selOther() {
             /
                 1、获取到要操作的复选框
                 2、返回数组，遍历数组
                 3、得到每一个复选框
                 4、判断当前的复选框是选中还是不选中
                     - if(love1.checked == true) {}
                 5、如果选中，属性checked设置成false，否则，设置成true
             /
             //获取要操作的复选框
             var loves11 = document.getElementsByName("love");
             //遍历数组
             for(var a=0;a<loves11.length;a++) {
                 //得到每一个复选框
                 var love11 = loves11[a];
                 //判断当前这个复选框是什么状态
                 if(love11.checked == true) { //是选中的状态
                     //设置checked=false
                     love11.checked = false;
                 } else { //是不选中的状态
                     //把checked=true
                     love11.checked = true;
                 }
             }
         }
         //实现全不选的操作
         function selNo() {
             /
                 1、获取到要操作的复选框
                 2、返回的是数组，遍历数组
                 3、得到每一个复选框
                 4、设置复选框的属性 checked=false
             /
             //得到要操作的复选框
             var loves1 = document.getElementsByName("love");
             //遍历数组
             for(var j=0;j<loves1.length;j++) {
                 //得到每一个复选框
                 var love1 = loves1[j];
                 //设置属性的值checked = false;
                 love1.checked = false;
             }
         }
         //实现全选的操作
         function selAll() {
             /
                 1、获取要操作的复选框
                     - 使用getElementsByName()
                 2、返回是数组，
                     - 属性 checked判断复选框是否选中
                          checked = true; //表示选中
                          checked = false;//表示不选中
                     - 遍历数组，得到的是每一个checkbox
                          把每一个checkbox属性checked=true
             /
             //获取要操作的复选框
             var loves = document.getElementsByName("love");
             //遍历数组，得到每一个复选框
             for(var i=0;i<loves.length;i++) {
                 var love1 = loves[i]; //得到每一个复选框
                 //设置属性是true
                 love1.checked = true;
             }
         }
     </script>
 </body>

9、案例四：下拉列表左右选择

　　下拉选择框

　　</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方法

 <html>
 <head>
       <title>HTML示例</title>
       <style type="text/css">
       </style>
 </head>
 <body>
 <div id="s1" style="float:left;">
         <div>
     <select id="select1" multiple="multiple" style="width:100px;height:100px;">
         <option>AAAAAAAA</option>
         <option>BBBBBBBB</option>
         <option>CCCCCCCC</option>
         <option>DDDDDDDD</option>
         <option>EEEEEEEE</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="width:100px;height:100px;">
         <option>QQQQQQQQ</option>
     </select>
     </div>
     <div>
     <input type="button" value="选中添加到左边" onclick="selToLeft();"/><br/>
     <input type="button" value="全部添加到左边" onclick="allToLeft();"/>
     </div>
 </div>
     <script type="text/javascript">
         //实现全部添加到左边
         function allToLeft() {
             /
                 1、获取select2里面的option对象
                 2、返回是数组，遍历数组
                 3、得到每一个option对象
 
                 4、获取到select1
                 5、添加到select1里面
                     - 使用appendChild方法
             /
             //获取select2
             var select2 = document.getElementById("select2");
             //获取select1
             var select1 = document.getElementById("select1");
             //获取select2里面的option
             var options1 = select2.getElementsByTagName("option");
             //遍历数组
             for(var m=0;m<options1.length;m++){
                 //得到每一个option
                 var op11 = options1[m];
                 //添加到select1里面
                 select1.appendChild(op11);
                 m--;
             }
         }
         //选择添加到左边
         function selToLeft() {
             /
                 1、获取select2里面的option对象
                 2、返回是数组，遍历数组
                 3、得到每一个option对象
                 4、判断option是否被选中
                     - if条件 属性 selected == true：选择
                 5、获取select1
                 6、添加到select1里面
                     - 使用appendChild方法
             /
             //获取select1
             var s1 = document.getElementById("select1");
             //获取到select2
             var s2 = document.getElementById("select2");
             //得到s1里面的option对象
             var opss = s2.getElementsByTagName("option");
             //遍历数组
             for(var aa=0;aa<opss.length;aa++) {
                 //得到每一个option
                 var op = opss[aa];
                 //判断是否被选中
                 if(op.selected == true) { //被选中
                     //添加到select1里面
                     s1.appendChild(op);
                     aa--;
                 }
             }
         }
         //全部添加到右边
         function allToRight() {
             /
                 1、获取第一个select下面的option对象
                 2、返回数组，遍历数组
                 3、得到每一个option对象
                 4、得到select2
                 5、添加到select2下面
                     - appendChild方法
             /
             //得到select2
             var s2 = document.getElementById("select2");
             //得到select下面的option对象
             var s1 = document.getElementById("select1");
             var ops = s1.getElementsByTagName("option");//返回的是数组
             //遍历数组
             for(var j=0;j<ops.length;j++) {
                 //得到每一个option对象
                 var op1 = ops[j];
                 //添加option到s2下面
                 s2.appendChild(op1);
                 j--;
             }
         }
         //实现选中添加到右边
         function selToRight() {
             /
                 1、获取select1里面的option
                     - getElementsByTagName()返回是数组
                     - 遍历数组，得到每一个option
                 2、判断option是否被选中
                     - 属性 selected，判断是否被选中
                          selected= true: 选中
                          selected= false：没有选择
                 3、如果是选中，把选择的添加到右边去
                 4、得到select2
                 4、添加选择的部分
                     - appendChild方法
             /
             //获取select1里面的option
             //获取select2
             var select2 = document.getElementById("select2");
             //得到select1
             var select1 = document.getElementById("select1");
             //得到option
             var options1 = select1.getElementsByTagName("option");
             //遍历数组
             for(var i=0;i<options1.length;i++) {
                 //alert(i);
                 //第一次循环 i=0  length：5
                 //第二次循环 i=0  length：4
                 //           i=0  length: 3
                 var option1 = options1[i];//得到每一个option对象
                 //判断是否被选中
                 if(option1.selected == true) {
                     //添加到select2里面
                     select2.appendChild(option1);
                     i--;
                 }
             }
         }
     </script>
 </body>
 </html>

10、案例五：省市联动

　　创建一个页面，有两个下拉选择框

　　在第一个下拉框里面有一个事件：改变事件 onchange事件

　　　　- 方法add1(this.value);表示当前改变的option里面的value值

　　创建一个二维数组，存储数据

　　　　每个数组中第一个元素是国家名称，后面的元素是国家里面的城市

　　1、遍历二维数组

　　2、得到也是一个数组（国家对应关系）

　　3、拿到数组中的第一个值和传递过来的值做比较

　　4、如果相同，获取到第一个值后面的元素

　　5、得到city的select

　　6、添加过去（使用）appendChild方法

　　　　- 创建option（三步）

　　由于每次都要向city里面添加option

　　第二次添加，会追加。

　　每次添加之前，判断一下city里面是否有option，如果有，删除

 <html>
 <head>
       <title>HTML示例</title>
       <style type="text/css">
       </style>
 </head>
 <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">
     </select>
 </body>
      <script type="text/javascript">
         //创建一个数组存储数据
         //二维数组
         var arr = new Array(4);
         arr[0] = ["中国","南京","抚州","临洮","日喀则","哈密"];
         arr[1] = ["美国","华盛顿","底特律","休斯顿","纽约"];
         arr[2] = ["德国","慕尼黑","柏林","法兰克福","狼堡"];
         arr[3] = ["日本","东京","北海道","大阪","广岛","长崎"];
 
         function add1(val) {
             //alert(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 m=0;m<options1.length;m++) {
                 //得到每一个option
                 var op = options1[m];
                 //删除这个option 通过父节点删除
                 city1.removeChild(op);
                 m--;
             }
             //遍历二维数组
             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);
                         //把文本添加到option1里面
                         option1.appendChild(text1);
                         //添加值到city1里面
                         city1.appendChild(option1);
                     }
                 }
             }
         }
     </script>
 </html>

11、案例六：动态生成表格

　　创建一个页面：两个输入框和一个按钮

　　代码和步骤

 <html>
 <head>
       <title>HTML示例</title>
       <style type="text/css">
       </style>
 </head>
 <body>
     行：<input type="text" id="h" />
     列：<input type="text" id="l" />
     <br/>
     <input type="button" value="生成" onclick="add2();"/>
     <div id="divv">
     </div>
     <script type="text/javascript">
         function add2() {
             /
                 1、得到输入的行和列的值
                 2、生成表格
                      循环行
                      在行里面循环单元格
                 3、显示到页面上
                     - 把表格的代码设置到div里面
                     - 使用innerHTML属性
             /
             //获取输入的行和列
             var h = document.getElementById("h").value;
             var l = document.getElementById("l").value;
 
             //把表格代码放到一个变量里面
             var tab = "<table border='1' bordercolor='blue'>";
             //循环行
             for(var i=1;i<=h;i++) {
                 tab += "<tr>";
                 //循环单元格
                 for(var j=1;j<=l;j++) {
                     tab += "<td>aaaaaaa</td>"
                 }
                 tab += "</tr>";
             }
 
             tab += "</table>";
 
             //alert(tab);
             //得到div标签
             var divv = document.getElementById("divv");
             //把table的代码设置到div里面去
             divv.innerHTML = tab;
         }
     </script>
 </body>
 </html>

超全面的JavaWeb笔记day04<dom树等>的更多相关文章

超全面的JavaWeb笔记day03<JS对象&函数>
1.js的String对象(****) 2.js的Array对象 (****) 3.js的Date对象 (****) 获取当前的月 0-11,想要得到准确的月 +1 获取星期时候,星期日是 0 4.j ...
超全面的JavaWeb笔记day15<mysql数据库>
1.数据库的概述 2.SQL 3.DDL 4.DML 5.DCL 6.DQL MySQL 数据库 1 数据库概念(了解) 1.1 什么是数据库数据库就是用来存储和管理数据的仓库! 数据库存储数据的优 ...
超全面的JavaWeb笔记day13<JSTL&自定义标签>
1.JSTL标签库(重点) core out set remove url if choose when otherwise forEach fmt formatDate formatNumber 2 ...
超全面的JavaWeb笔记day12<Jsp&JavaBean&El表达式>
1.JSP三大指令 page include taglib 2.9个内置对象 out page pageContext request response session application exc ...
超全面的JavaWeb笔记day11<JSP&Session&Cookie&HttpSession>
1.JSP 2.回话跟踪技术 3.Cookie 4.HttpSession JSP入门 1 JSP概述 1.1 什么是JSP JSP(Java Server Pages)是JavaWeb服务器端的动态 ...
超全面的JavaWeb笔记day10<Response&Request&路径&编码>
1.Response 2.Request 3.路径 4.编码请求响应流程图 response 1.response概述 response是Servlet.service方法的一个参数,类型为java ...
超全面的JavaWeb笔记day06<Schema&SAX&dom4j>
1.Schema的简介和快速入门(了解) 2.Schema文档的开发流程(了解) 3.Schema文档的名称空间(了解) 4.SAX解析原理分析(*********) 5.SAX解析xml获得整个文档 ...
超全面的JavaWeb笔记day05<xml&dtd&jaxp>
0.表单提交方式(*****) button提交超链接提交事件 1.xml简介和应用(了解) 2.xml文档声明和乱码解决(*****) 文档声明必须放在第一行第一列设置xml编码和保存编码一 ...
超全面的JavaWeb笔记day02<CSS&JavaScript>
1.CSS的简介 2.CSS概述和与HTML的结合方式(四种)(*******) 3.CSS的基本选择器(******) 4.CSS的扩展选择器(了解) 5.CSS的盒子模型(了解) 6.CSS的布局 ...

随机推荐

tomcat 部署时修改服务器时间
tomcat 在部署时修改了服务器时间会出现以下状况 1.session 失效 2.修改的文件不会正确被tomcat热部署进去
基于jQuery/CSS3实现拼图效果的相册插件
今天我们要来分享一款很酷的jQuery相册插件,首先相册中的图片会以一定的角度倾斜放置在页面上,点击图片缩略图就可以展开图片,并且图片是由所有缩略图拼接而成,图片展开和收拢的动画效果也非常不错.当然图 ...
基于jquery的可拖动div
昨天给大家介绍了一款基于jquery ui漂亮的可拖动div实例,今天要给大家分享一款基于jquery的可拖动div.这款可拖动div只要引用jquery就可以,无需引用jquery ui.还实时记录 ...
discuz论坛折腾记录
1.邮箱验证自带的是用php sendmail,好在可以用smtp 如果用企业邮箱,一般都是ssl,需要设置为,参考此帖 STMP服务器 - QQ 企业邮ssl://smtp.exmail.qq.c ...
uboot中log处理
位图或logo和开机显示画面,是两个完全不同的东西. logo显示uboot相关信息,如版本号等. 开机画面是用户下载到固定位置后uboot加载的. 1.开机画面在uboot中使用splash sc ...
SpringAOP来监控service层中每个方法的执行时间
使用AOP来说,太方便了,并且特别适合这类场景. 代码如下,这里是将要统计的信息写到log文件中,也可以设计成写入表中. package com.ecsoft.interceptor; import ...
cause: java.lang.IllegalStateException: Serialized class com.taotao.pojo.TbItem must implement java.io.Serializable
HTTP Status 500 - Request processing failed; nested exception is com.alibaba.dubbo.rpc.RpcException: ...
高性能高并发网络库：StateThreads
StateThreads是一个C的网络程序开发库,提供了编写高性能.高并发.高可读性的网络程序的开发库,轻量级网络应用框架共也就3000行C代码网络程序(Internet Application) ...
pdo mysql连接时报[2002] No such file or directory
将PDO连接中的dsn的host由“localhost”改为“127.0.0.1”即可
Windoows窗口程序四
子窗口的创建 .创建时要设置父窗口句柄 .创建风格要增加WS_CHILD|WS_VISIBLE HWND CreateChild(LPSTR lpClassName,LPSTR lpWndName,H ...

超全面的JavaWeb笔记day04<dom树等>

1、案例一：在末尾添加节点

2、元素对象（element对象）

3、Node对象属性一

4、Node对象的属性二

5、操作dom树

appendChild()方法

insertBefore(newNode,oldNode)方法

replaceChild(newNode,oldNode)方法: 替换节点

cloneNode(boolean)方法: 复制节点

操作dom总结

6、innerHTML属性

7、案例二：动态显示时间

8、案例三：全选练习

9、案例四：下拉列表左右选择

10、案例五：省市联动

11、案例六：动态生成表格

超全面的JavaWeb笔记day04<dom树等>的更多相关文章

随机推荐

热门专题

　　appendChild()方法

　　insertBefore(newNode,oldNode)方法

　　replaceChild(newNode,oldNode)方法: 替换节点

　　cloneNode(boolean)方法: 复制节点

　　操作dom总结