DOM之一些小实验demo

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

---

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

---

<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的子节点

                optionNode.appendChild(textNode);

                //找到select节点

                var selectNode=document.getElementsByTagName("select")[0];

     //selectNode.appendChild(optionNode);//追加到末尾

                //在指定位置插入

                var lastNode=document.getElementsByTagName("option")[3];

                selectNode.insertBefore(optionNode,lastNode);  //父节点.insertBefore(新节点,旧节点)；

        }

</script>

---

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

---

<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" 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>