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

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>

//第一步:找到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>

上海

</li>

</ul><br/>

</select>

//select放在下面编译执行的时候才能找到前面的select

//取每个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>

//修改

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 >

</ul>

<ul>

</ul>

//增加

/*xml dom*/

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>

</select>

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" />游泳

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

<tr>

<td>

</select>

</td>

<td>

<input type="button" value="--->" onclick="removeLeft()"/><br/>

<input type="button" value="===>" onclick="removeLeftAll()"/><br/>

</td>

<td>

</select>

</td>

</tr>

</table>

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>

<option>--请选择省份--</option>

</select>

<option>--请选择城市--</option>

</select>

</body>

表格增加删除

<tr>

<td>Email:<input type="text" id="email"/></td>

</tr>

<tr>

</tr>

</table>

<br/>

<hr/>

<tr>

<td>Email</td>

</tr>

</table>

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

//点名

<!--

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>

#name_div{

margin:4cm;

padding:0cm;

font-size:3cm;

color:red;

width:10cm;

height:6cm;

cursor:pointer;

text-align:center;

}

</style>

</body>

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

时间： 2024-08-30 10:17:58

DOM之一些小实验demo

DOM之一些小实验demo的相关文章

Hadoop之词频统计小实验（基于单节点伪分布）

json小实验

DCDC纹波小实验

初识句柄操作(控制台窗口小实验)

留言本小实验

ES6小实验-let和const（2）

关于java中equals与==的区别的小实验

ES6小实验-字符串的扩展

1.类的加载机制_继承类的加载(一个小的Demo)说明