码迷,mamicode.com
首页 > 其他好文 > 详细

DOM之一些小实验demo

时间:2018-06-13 11:59:48      阅读:178      评论:0      收藏:0      [点我收藏+]

标签:uvc   slb   ica   doctype   lex   年龄   pwc   gms   win   

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

DOM之一些小实验demo

标签:uvc   slb   ica   doctype   lex   年龄   pwc   gms   win   

原文地址:https://www.cnblogs.com/meihao1203/p/9176085.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!