JavaScript(DOM编程三)

节点的移动，insertBefore

 1 <body>
 2 <p>你喜欢哪个城市?</p>
 3 <ul id="city"><li id="bj" name="BeiJing">北京</li>
 4     <li>上海</li>
 5     <li id="dj">东京</li>
 6     <li id="se">首尔</li>
 7 </ul>
 8 <br><br>
 9 <p>你喜欢哪款单机游戏?</p>
10 <ul id="game">
11     <li id="rl">红警</li>
12     <li id="sk">实况</li>
13     <li>极品飞车</li>
14     <li>魔兽</li>
15 </ul>
16 
17 <br><br>
18 gender:
19 <input type="radio" name="gender" value="male"/>Male
20 <input type="radio" name="gender" value="female"/>Female
21 
22 <br><br>
23 name: <input type="text" name="username" value="atguigu"/>
24 
25 </body>

 <script type="text/javascript">
        window.onload=function(){

            alert("把红警插入到北京之前");
            //insertBefore(a,b) 把a查到b的前面
            //获取北京这个节点
            var bjnode=document.getElementById("bj");
            //获取红警节点
            var hj=document.getElementById("rl");
            //获取 北京的父类节点city  因为这是往city的子节点中插入节点
            var city=document.getElementById("city");
            city.insertBefore(hj,bjnode);
//运行之后 把红警移动到了北京之前  实现了移动
    }
    </script>

运行效果：

单击确定

父节点.insertBefore(a,b);的作用是把a节点移动到b节点之前，所以父节点其实就是b节点的父节点，因为是往该节点中的子节点中做添加，但是JavaScript却没有提供insertAfter(a,b)方法 这个方法作用就是把某个节点a插入到某个节点b之后，而我们通过
b.nextSibling[获取xxx节点的下一个兄弟节点c]方法就能够实现功能，然后把a插入到下一个兄弟节点之前就可以了 .insertBefore(a,c)
-----------------------------------------------
innerHtml方法，能够获取某个节点中的全部html内容

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <script type="text/javascript">
 7         window.onload=function(){
 8             var city=document.getElementById("city");//获取city元素节点
 9             alert(city.innerHTML);//打印city节点中的html内容
10         }
11     </script>
12 </head>
13 <body>
14 <p>你喜欢哪个城市?</p>
15 <ul id="city"><li id="bj" name="BeiJing">北京</li>
16     <li>上海</li>
17     <li>东京</li>
18     <li>首尔</li>
19 </ul>
20 
21 <br><br>
22 <p>你喜欢哪款单机游戏?</p>
23 <ul id="game">
24     <li id="rl">红警</li>
25     <li>实况</li>
26     <li>极品飞车</li>
27     <li>魔兽</li>
28 </ul>
29 
30 <br><br>
31 gender:
32 <input type="radio" name="gender" value="male"/>Male
33 <input type="radio" name="gender" value="female"/>Female
34 
35 <br><br>
36 name: <input type="text" name="username" value="atguigu"/>
37 
38 </body>
39 </html>

运行效果：

下面使用该方法，实现两个节点中的子节点之间的内容全部交换位置

 1     <script type="text/javascript">
 2         window.onload=function(){
 3             var city=document.getElementById("city");//获取city元素节点
 4 //            alert(city.innerHTML);//打印city节点中的html内容
 5             var game=document.getElementById("game");//获取game元素节点
 6             alert("交换之前");
 7             var temp=city.innerHTML;//创建中间变量
 8             city.innerHTML=game.innerHTML;//把game的innerHtml赋值给city的innerHtml
 9             game.innerHTML=temp;
10             //完成交换
11 
12         }
13     </script>

运行效果：

单击确定

-------------------------------------------------

select级联菜单实现（IE下支持）

  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2 <html>
  3     <head>
  4         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5         <title>Untitled Document</title>
  6         <script type="text/javascript">
  7 
  8             window.onload = function(){
  9 
 10                 //1. 为 #province 添加 onchange 响应函数
 11                 document.getElementById("province").onchange = function(){
 12 
 13                     //1.1 把 #city 节点除第一个子节点外都移除.
 14                     var cityNode = document.getElementById("city");
 15                     var cityNodeOptions = cityNode.getElementsByTagName("option");
 16 
 17                     var len = cityNodeOptions.length;
 18                     for(var i =1; i < len; i++){
 19                         cityNode.removeChild(cityNodeOptions[1]);//每次都清除第一个内容  除了“请选择”之外的内容最后都会被清除
 20                     }
 21 
 22                     var provinceVal = this.value;
 23                     if(provinceVal == ""){//如果用户选择的第一列中选择了 “请选择” 这个列 那么就不在执行下面的内容 因为加载不到任何内容
 24                         return;
 25                     }
 26 
 27                     //2. 加载 cities.xml 文件. 得到代表给文档的 document 对象
 28                     var xmlDoc = parseXml("cities.xml");
 29 
 30 
 31                     //3. 在 cities.xml 文档中查找和选择的省匹配的 province 节点.
 32 
 33                     //直接使用 XPath 技术查找 XML 文档中匹配的节点.
 34                     var provinceEles = xmlDoc.selectNodes("//province[@name='"
 35                                                    + provinceVal + "']");
 36                     /*  另外一种方式  逐个比较  然后获得对应的节点
 37                     var prochild=xmlDoc.getElementsByTagName("province");
 38                     //alert(prochild.length);
 39                     for(var i=0;i<prochild.length;i++){
 40                         //alert(prochild[i].getAttributeNode("name").value);
 41                         if(prochild[i].getAttributeNode("name").nodeValue==this.value){
 42                             alert("a1");
 43                             var xxxx=prochild[i];
 44                             alert("a2");
 45                             break;
 46                         }
 47                     }
 48                     var cityNodes=xxxx.getElementsByTagName("city");
 49                     */
 50 
 51                     //4. 再得到 province 节点的所有的 city 子节点
 52                     var cityNodes = provinceEles[0].getElementsByTagName("city");
 53 
 54                     //5. 遍历 city 子节点, 得到每一个 city 子节点的文本值
 55                     for(var i = 0; i < cityNodes.length; i++){
 56                         //6. 利用得到的文本值创建 option 节点
 57                         //<option>cityName</option>
 58                         var cityText = cityNodes[i].firstChild.nodeValue;
 59                         var cityTextNode = document.createTextNode(cityText);
 60                         var optionNode = document.createElement("option");
 61                         optionNode.appendChild(cityTextNode);
 62 
 63                         //7. 并把 6 创建的 option 节点添加为 #city 的子节点.
 64                         cityNode.appendChild(optionNode);
 65                     }
 66 
 67                 }
 68 
 69                 //js 解析 xml 文档的函数, 只支持 ie
 70                 function parseXml(fileName){
 71                     //IE 内核的浏览器
 72                     if (true) {//(window.ActiveXObject)的作用，用来判断浏览器是否支持ActiveX控件   使用ie功能可以实现 使用360没反应
 73                         //创建 DOM 解析器
 74                         var doc = new ActiveXObject("Microsoft.XMLDOM");
 75                         doc.async = "false";
 76                         //加载 XML 文档, 获取 XML 文档对象
 77                         doc.load(fileName);
 78                         return doc;
 79                     }
 80                 }
 81 
 82 //                function parseXml(fileName)
 83 //                {alert("a0");
 84 //                    //IE 内核的浏览器
 85 //                    if (window.ActiveXObject)
 86 //                    {
 87 //                        alert("a1");
 88 //                        // 创建 DOM 解析器
 89 //                        var doc = new ActiveXObject("Microsoft.XMLDOM");
 90 //                        alert("a2");
 91 //                        doc.async = "false";
 92 //                        // 加载 XML 文档 , 获取 XML 文档对象
 93 //                        alert("a3");
 94 //                        doc.load(fileName);
 95 //                        alert("a4");
 96 //                        return doc;
 97 //                    }
 98 //                    //Mozilla 浏览器
 99 //                    else if (window.DOMParser)
100 //                    {
101 //                        // 创建 DOM 解析器
102 //                        var p = new DOMParser();
103 //                        // 创建 DOM 解析器
104 //                        return p.parseFromString(fileName, "text/xml");
105 //                    }
106 //                    else
107 //                    {
108 //                        return false;
109 //                    }
110 //                }
111 
112             }
113 
114         </script>
115 
116     </head>
117     <body>
118         <select id="province">
119             <option value="">请选择...</option>
120             <option value="河北省">河北省</option>
121             <option value="辽宁省">辽宁省</option>
122             <option value="山东省">山东省</option>
123         </select>
124         
125         <select id="city"><option value="">请选择...</option></select>
126     </body>
127 </html>

cities.xml

 1 <?xml version="1.0" encoding="GB2312"?>
 2 <china>
 3     
 4     <province name="河北省">
 5         <city>石家庄</city>
 6         <city>邯郸</city>
 7     </province>
 8     
 9     <province name="辽宁省">
10         <city>沈阳</city>
11         <city>大连</city>
12 
13     </province>
14     
15     <province name="山东省">
16         <city>济南</city>
17         <city>青岛</city>
18 
19     </province>
20     
21 </china>

运行效果；

---------------------------------------------------------

Checkbox全选操作

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5     <title>Insert title here</title>
 6     <script type="text/javascript">
 7 
 8         //需求: 若 #checkedAll_2 被选中, 则 name=items 的 checkbox 都被选中
 9         //若 #checkedAll_2 取消选中, 则 name=items 的 checkbox 都取消选中
10         //若 name=items 的 checkbox 都被选中, 则 #checkedAll_2 的 checkbox 也被选中
11         //若 name=items 的 checkbox 有一个没有被选中, 则 #checkedAll_2 取消选择.
12 
13         //提示: 事件需要加给  #checkedAll_2, 获取 name=items 的 checkbox 数组
14         //判断是否被选中, 若被选择, 则 name=items 的 checkbox 都要被选择
15         //若没有被选择, 则 name=items 的 checkbox 都要取消选择
16         //根据是否存在 checked 属性来判断是否被选择, 可以使其 checked = true 被选择
17         //checked = false 取消选择.
18 
19         //还需要给每个  name=items 的 checkbox 加响应函数
20         //判断  name=items 的 checkbox 是否都被选中: 选择的个数和总个数是否相等.
21         //若都被选择: 则使  #checkedAll_2 被选择
22         //若没有都被选择: 则使  #checkedAll_2 取消选择
23         window.onload=function(){
24             //为全选按钮加事件
25             var items=document.getElementsByName("items");
26             document.getElementById("checkedAll_2").onclick=function(){
27                 var flag=this.checked;
28                 //获取所有的items节点
29 
30                 for(var i=0;i<items.length;i++){
31                     items[i].checked=flag;
32                 }
33             }
34             //为每个选项也要加事件
35             for(var i=0;i<items.length;i++){
36                 items[i].onclick=function(){
37                     //每次单击 都要判断已经被选中的个数是否==总个数items.length
38                     var count=0;
39                     for(var j=0;j<items.length;j++){
40                         if(items[j].checked){
41                             count++;
42                         }
43                     }
44                     document.getElementById("checkedAll_2").checked=(items.length==count);
45                 }
46 
47             }
48 
49             //为全选按钮添加事件
50             document.getElementById("CheckedAll").onclick=function(){
51                 for(var i=0;i<items.length;i++){
52                     items[i].checked=true;
53                 }
54             }
55             //为全 不选按钮添加单击事件
56             document.getElementById("CheckedNo").onclick=function(){
57                 for(var i=0;i<items.length;i++){
58                     items[i].checked=false;
59                 }
60             }
61             //为反选按钮增加事件
62             document.getElementById("CheckedRev").onclick=function(){
63                 //以前的选择为true  则变为false  即以前的取反
64                 for(var i=0;i<items.length;i++){
65                     items[i].checked=!items[i].checked;//取反操作
66                 }
67             }
68 
69             //提交事件
70             document.getElementById("send").onclick=function(){
71                 //以前的选择为true  则变为false  即以前的取反
72                 for(var i=0;i<items.length;i++){
73                     if(items[i].checked){
74                         alert(items[i].value);//输出那些被选中的内容
75                     }
76                 }
77             }
78         }
79     </script>
80 </head>
81 <body>
82 
83 <form method="post" action="">
84     你爱好的运动是？<input type="checkbox" id="checkedAll_2" />全选/全不选
85 
86     <br /> <input
87         type="checkbox" name="items" value="足球" />足球 <input type="checkbox"
88                                                             name="items" value="篮球" />篮球 <input type="checkbox" name="items"
89                                                                                                 value="羽毛球" />羽毛球 <input type="checkbox" name="items" value="乒乓球" />乒乓球
90     <br /> <input type="button" id="CheckedAll" value="全　选" /> <input
91         type="button" id="CheckedNo" value="全不选" /> <input type="button"
92                                                            id="CheckedRev" value="反　选" /> <input type="button" id="send"
93                                                                                                  value="提　交" />
94 </form>
95 
96 </body>
97 </html>

运行效果：