JaveWeb笔记之DOM树

<div id="cnblogs_post_body" class="blogpost-body">
<p><span style="mso-spacerun: 'yes'; font-family: 宋体; mso-bidi-font-family: 'Times New Roman'; font-size: 14pt">1、案例:在末尾添加节点(*****)</span></p>

  创建标签 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>
复制代码

 

posted @ 2020-12-10 20:29  HackerEarl  阅读(114)  评论(0编辑  收藏  举报