DOM之一些小实验demo

body, table{font-family: 微软雅黑; font-size: 10pt}
table{border-collapse: collapse; border: solid gray; border-width: 2px 0 2px 0;}
th{border: 1px solid gray; padding: 4px; background-color: #DDD;}
td{border: 1px solid gray; padding: 4px;}
tr:nth-child(2n){background-color: #f8f8f8;}

<script type="text/javascript"> <         function showmsg(){                 var h1array = document.getElementsByTagName("h1");                 var h10bj = h1array[0];                 //法1                 //var text = h10bj.childNodes[0].nodeValue;                 //法2                 //var text = h10bj.firstChild.nodeValue;                //法3                //var text = h10bj.lastChild.nodeValue;                //法4                //var text = h10bj.innerHTML;                //法5                  var text = h10bj.innerText;                  alert(text);         } </script> <h1 id="title">后天休息</h1> <input type = "button" value="获取文档" onclick="showmsg()">	<script type="text/javascript">         //第一步:找到bj节点         function getli(){         //var bjNode=document.getElementById("bj");         var bjNode=document.getElementsByTagName("li")[0];         //获取所有节点信息         for (var i=0;i<bjNode.childNodes.length ;++i )         {                 alert(bjNode.childNodes[i].nodeType+":"+bjNode.childNodes[i].nodeName+                         ":"+bjNode.childNodes[i].nodeValue);         } }  </script> <ul>    <li id="bj" value="beijing">                 北京                 <h1>海淀</h1>    </li>    <li id="sh" value="shanghai">                 上海    </li> </ul><br/> <input type="button" value="li取值" onclick="getli()"/>
<select name="edu" id="edu">                 <option value="本科">本科</option>                 <option value="专科">专科</option>                 <option value="高中">高中</option>                 <option value="小学">小学</option>                 <option value="幼儿园">幼儿园</option> </select> //select放在下面编译执行的时候才能找到前面的select   <script type="text/javascript"> //取每个option内的文本 //第一步 取select节点         var selectNode=document.getElementsByName("edu")[0]; //     alert(selectNode.childNodes.length);  //11个，空白部分算做文本也是子节点 //法一    /*         for (var i=0; i<selectNode.childNodes.length ;++i )         {                 //alert(selectNode.childNodes[i].firstChild.nodeValue);  //firstChild会把里面的空格回车算在里面，会出现null情况                 if (selectNode.childNodes[i].nodeType!=3) //不是文本                 {                         alert(selectNode.childNodes[i].firstChild.nodeValue);                 }         }  */ //法二         var optionArray = document.getElementsByTagName("option");         for (var i=0;i<optionArray.length ; ++i)         {                 //alert(optionArray[i].nodeValue); //元素节点的nodeValue是元素的标签名称                 alert(optionArray[i].innerHTML);         } </script>	//修改   <script type="text/javascript">         function changeNode(){                 //1.找到父节点                 var ul0bj1=document.getElementsByTagName("ul")[0];                 //找到打灰机                 var gameNode=document.getElementById("game");                 //copy一份要拿来替换的节点                 var gameNodecopy=gameNode.cloneNode(true);  //true表示要克隆节点所有属性和子节点                 //找到要替换的北京                 var bjNode1=document.getElementById("bj");                 //替换                 //ul0bj1.replaceChild(gameNode,bjNode1); //这样写新的节点直接被截切，前面要copy一份                 //法1   用克隆节点替换                 //ul0bj1.replaceChild(gameNodecopy,bjNode1);                 //法2                 bjNode1.replaceNode(gameNodecopy);         }   </script>  <ul >                 <li id="bj" onclick="changeNode()">北京</li>                 <li>湖南</li>                 <li>山东</li> </ul> <ul>                 <li  id="game">打<p>灰机</p></li>                 <li>抓泥鳅</li>                 <li>斗地主</li> </ul>
//增加 /*xml dom*/ <script type="text/javascript">         function addOptions(){                 //创建一个节点  <option>小学</option>                 var optionNode=document.createElement("option");                 var textNode=document.createTextNode("小学");                 //设置option的value属性                 optionNode.setAttribute("value","小学");                 //将文本节点作为option的子节点                 optionNode.appendChild(textNode);                 //找到select节点                 var selectNode=document.getElementsByTagName("select")[0];      //selectNode.appendChild(optionNode);//追加到末尾                 //在指定位置插入                 var lastNode=document.getElementsByTagName("option")[3];                 selectNode.insertBefore(optionNode,lastNode);  //父节点.insertBefore(新节点,旧节点)；         } /*html*/         function addOptions2(){                 var optionNode=new Option("小学","小学");                 var selectNode=document.getElementsByTagName("select")[0];                 selectNode.add(optionNode,null); //第二个参数写位置，null默认放到末尾         } </script> <input type="button" value="添加选项" onclick="addOptions()"/> <select>                 <option>本科</option>                 <option>专科</option>                 <option>高中</option>                 <option>初中</option> </select>	<script type="text/javascript">         function checkAll(flag){                 var checkboxes=document.getElementsByName("hobby");                 for (var i=0;i<checkboxes.length ;++i )                 {                         checkboxes[i].checked=flag;                 }         }         function reverseCheck(){                 var checkboxes=document.getElementsByName("hobby");                 for (var i=0;i<checkboxes.length ;++i )                 {                         checkboxes[i].checked=!checkboxes[i].checked;                 }         } </script> <h1>请选择你的爱好：</h1> 全选/全不选<input type="checkbox" name="hobbys" onclick="checkAll(this.checked)" /><br/> <input type="checkbox" name="hobby" value="football" />足球 <input type="checkbox" name="hobby" value="basketball" />篮球 <input type="checkbox" name="hobby" value="swim" />游泳 <input type="checkbox" name="hobby" value="singing" />唱歌<br/> <input type="button" value="全选" onclick="checkAll(true)"/> <input type="button" value="全不选" onclick="checkAll(false)"/> <input type="button" value="反选" onclick="reverseCheck()"/> </body>
<script type="text/javascript"> /*html dom*/         function removeLeft(){                 //找到左边选择的option选项                 var leftSelectNode=document.getElementById("left");                 //选中的index对应的option                 if(-1==leftSelectNode.selectedIndex);return; //判断左边,没有元素就直接返回                 var selectOptionNode=leftSelectNode.options[ leftSelectNode.selectedIndex ];                 //找到右边的select对象                 var rightSelectNode=document.getElementById("right");                 //给select对象增加一个option                 rightSelectNode.add(selectOptionNode,null);         }         function removeLeftAll(){  //注意                 var leftSelectNode=document.getElementById("left");                 var rightSelectNode=document.getElementById("right");                 for (var i=0;i<leftSelectNode.options.length ; )   //每次移动一个过去，length都会减一                 {                         rightSelectNode.add(leftSelectNode.options[i],null);                 }         } </script> <table align="center">                 <tr>                         <td>                                 <select size="10" id="left">                                         <option>选项1</option>                                         <option>选项2</option>                                         <option>选项3</option>                                         <option>选项4</option>                                         <option>选项5</option>                                         <option>选项6</option>                                         <option>选项7</option>                                         <option>选项8</option>                                 </select>                         </td>                         <td>                                 <input type="button" value="--->" onclick="removeLeft()"/><br/>                                 <input type="button" value="===>" onclick="removeLeftAll()"/><br/>                                 <input type="button" value="<---" onclick="removeRight()"/><br/>                                 <input type="button" value="<===" onclick="removeRightAll"/><br/>                         </td>                         <td>                                 <select size="10" id="right">                                         <option>选项9</option>                                 </select>                         </td>                 </tr> </table>	<script type="text/javascript">         var cityList = new Array();         cityList['北京市'] = ['朝阳区','东城区','西城区', '海淀区','宣武区','丰台区','怀柔','延庆','房山'];          cityList['上海市'] = ['宝山区','长宁区','丰贤区', '虹口区','黄浦区','青浦区','南汇区','徐汇区','卢湾区'];          cityList['广州省'] = ['广州市','惠州市','汕头市','珠海市','佛山市','中山市','东莞市'];         cityList['深圳市'] = ['福田区', '罗湖区', '盐田区', '宝安区', '龙岗区', '南山区', '深圳周边'];          cityList['重庆市'] = ['俞中区', '南岸区', '江北区', '沙坪坝区', '九龙坡区', '渝北区', '大渡口区', '北碚区'];         cityList['天津市'] = ['和平区', '河西区', '南开区', '河北区', '河东区', '红桥区', '塘古区', '开发区'];          cityList['江苏省'] = ['南京市','苏州市','无锡市'];          cityList['浙江省'] = ['杭州市','宁波市','温州市'];          cityList['四川省'] = ['四川省','成都市'];          cityList['海南省'] = ['海口市'];          cityList['福建省'] = ['福州市','厦门市','泉州市','漳州市'];          cityList['山东省'] = ['济南市','青岛市','烟台市'];          cityList['江西省'] = ['江西省','南昌市'];          cityList['广西省'] = ['柳州市','南宁市'];          cityList['安徽省'] = ['安徽省','合肥市'];          cityList['河北省'] = ['邯郸市','石家庄市'];          cityList['河南省'] = ['郑州市','洛阳市'];          cityList['湖北省'] = ['武汉市','宜昌市'];          cityList['湖南省'] = ['湖南省','长沙市'];          cityList['陕西省'] = ['陕西省','西安市'];          cityList['山西省'] = ['山西省','太原市'];          cityList['黑龙江省'] = ['黑龙江省','哈尔滨市'];          cityList['其他'] = ['其他'];         function init(){                 //初始化第一个select控件，给它里面加入option                 //var array=["bnez","bmw","qq"]                  //for (i in array ) //java里面 i 表示array 里的每一个元素；js 里 i 表示数组索引，上面例子表示0,1,2; 代码例子表示省份；                 //找到第一个select控件                 var provinceNode=document.getElementById("province");                 //拿到array里的省份数据，然后根据该数据new optlion,将option放在第一个select控件                 for(x in cityList)   //各省份                 {                         var optionNode=new Option(x,x);                         provinceNode.add(optionNode,null);                 }         }         function changeCity(){                 //拿到第一个select控件选择的省份                 var provinceNode=document.getElementById("province");                 //拿到当前选中的option                 var selectedOption=provinceNode.options[provinceNode.selectedIndex];                 //拿到当前选中的省份名称可以拿到城市名称                 cityList[selectedOption.innerHTML];                 var cityNode=document.getElementById("city");                 //每次新增之前先将原来的option清空(select长度或者数目改为0)                 cityNode.length=1;  //为1的时候第二个会有请选择，写0没有，上来就是城市                 for(x in cityList[selectedOption.innerHTML])  //注意，这里拿到的是下标，就不是值了                 {                         var cityOption=new Option(cityList[ selectedOption.innerHTML ][ x ],cityList[ selectedOption.innerHTML ][ x ]);                         cityNode.add(cityOption,null);                 }         }         //window.onload=init;//这样也可以在打开页面加载函数 </script>  <body onload="init()" >  <select id="province" onchange="changeCity()">                 <option>--请选择省份--</option> </select> <select id="city">                 <option>--请选择城市--</option> </select> </body>

表格增加删除

<table align="center" cellpadding="10" cellspacing="10" > <tr> <td>姓名：<input type="text" id="username" /></td> <td>Email:<input type="text" id="email"/></td> <td>年龄:<input type="text" id="age"/></td> </tr> <tr> <td colspan="3" align="center"><input type="button" value="添加" onclick="addTR()"/></td> </tr> </table> <br/> <br/> <br/> <hr/> <table id="tabInfo" align="center" width="500" border="1"> <tr> <td>姓名</td> <td>Email</td> <td>年龄</td> <td>操作</td> </tr> </table>

<script type="text/javascript"> //xml dom function addTR(){ //获取input输入框的数据 var username=document.getElementById("username").value; var email=document.getElementById("email").value; var age=document.getElementById("age").value; //新建一行 tr 四个 td var trNode=document.createElement("tr"); var tdNode1=document.createElement("td"); var tdNode2=document.createElement("td"); var tdNode3=document.createElement("td"); var tdNode4=document.createElement("td"); //给td插入数据 tdNode1.innerHTML=username; tdNode2.innerHTML=email; tdNode3.innerHTML=age; tdNode4.innerHTML="<input type='button' value='删除' onclick='deleteTR(this)'>"; //新建的tr增加四个子节点td trNode.appendChild(tdNode1); trNode.appendChild(tdNode2); trNode.appendChild(tdNode3); trNode.appendChild(tdNode4); //找到表格，下面增加一行 var tableNode=document.getElementById("tabInfo"); tableNode.appendChild(trNode); } //HTML function addTR(){ //获取数据 var username=document.getElementById("username").value; var email=document.getElementById("email").value; var age=document.getElementById("age").value; //找到表格 var tableNode=document.getElementById("tabInfo"); //插入一行 var trNode=tableNode.insertRow(tableNode.rows.length); //rows是一个数组 //插入4个 td var tdNode0=trNode.insertCell(0); //括号里的是索引 var tdNode1=trNode.insertCell(1); var tdNode2=trNode.insertCell(2); var tdNode3=trNode.insertCell(3); //填充数据 tdNode0.innerHTML=username; tdNode1.innerHTML=email; tdNode2.innerHTML=age; tdNode3.innerHTML="<input type='button' value='删除' onclick='deleteTR(this)'/>" } //删除 function deleteTR(inputbutton){ //拿到表格 var trNode=inputbutton.parentNode.parentNode; //调用函数删除 trNode.parentNode.deleteRow(trNode.rowIndex); } //--> </script>

//点名

<script type="text/javascript"> <!--         status = 1                 var name1=['刘冬','冯凯','林雷','崔兴永','梁莫柱','邓应民','江宇航','陈剑锋','朱政','杨航','李非凡','陈乔 ','翟乃晖','朱希','赵帅','李伟钊','林少龙','邢超超','李威','张文超','王刚','王童玉','王强','贺群夫','张霞'];                 var name2=['王虎彪','殷洲','杨进进','邓丽英','嵇珂','任国栋','胡飞龙','林超豪','周继昌','曹亚飞','于兴达','黄帅','刘宗元','冷熠博','陈奎','林妙胜','方建明','李桂冀','肖博','张明辉','吴晓璇','陶飞','沈阳','戴会聪'];                 var name3=['粟玲','王锜键','刘政','刘光明'];                 var namelist =name1.concat(name2,name3);                 function showOneName_Random(){                         document.getElementById("name_div").innerHTML =  namelist[Math.floor(Math.random()*namelist.length)];                         }                 function start(){                                 timer = setInterval(showOneName_Random, 100);                 }                 function stopname(){                                 if(status == 1){                                         clearInterval(timer);                                         status = 0;                                 }else{                                         timer = setInterval(showOneName_Random, 100);                                         status = 1;                                 }                 } //--> </script>

<style type="text/css">                 #name_div{                         margin:4cm;                         padding:0cm;                         font-size:3cm;                         color:red;                         width:10cm;                         height:6cm;                         cursor:pointer;                         text-align:center;                         } </style>  <body onload="start()"> <center><Font style="margin-top:5cm" size=7 >点名页面</Font></center> <hr size=10> <center><div id=name_div onClick="stopname()"></div> </center> </body>