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>
|
DOM之一些小实验demo的更多相关文章
- Hadoop之词频统计小实验
声明: 1)本文由我原创撰写,转载时请注明出处,侵权必究. 2)本小实验工作环境为Ubuntu操作系统,hadoop1-2-1,jdk1.8.0. 3)统计词频工作在单节点的伪分布上,至于真正实 ...
- js中关于事件捕获与事件冒泡的小实验
1.事件冒泡:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: div -> body -> document IE 6.0: div - ...
- 番外篇！全球首个微信应用号开发教程！小程序 DEMO 视频奉上！
大家好,我是博卡君.经过国庆节的七天假期,相信很多朋友都已经研究出自己的小程序 demo 了吧?我最近也利用休息时间关注了一下网上关于小程序开发的讨论,今天就利用这个番外篇谈谈自己对小程序的一些想法吧 ...
- 秒懂JVM的三大参数类型，就靠这十个小实验了
秒懂JVM的三大参数类型,就靠这十个小实验了 你好,我是悟空哥,「7年项目开发经验,全栈工程师,开发组长,超喜欢图解编程底层原理」.手写了2个小程序,Java刷题小程序,PMP刷题小程序,已发布到公众 ...
- 基于 Source Generators 做个 AOP 静态编织小实验
0. 前言 上接:用 Roslyn 做个 JIT 的 AOP 作为第二篇,我们基于Source Generators做个AOP静态编织小实验. 内容安排如下: source generators 是什 ...
- 微信小程序DEMO初体验
小程序虽然被炒的很热,但是绝大部分人却从未亲自体验过,在2017年的上班第一天,献上一个小程序DEMO,您可以体验! 注意:由于微信限制,只能使用扫一扫来体验下方小程序DEMO. DEMO首页截图如下 ...
- PBR综合小实验视频-狮子XL
这个是上学时候录的一个策略路由小实验
- ubuntu下格式化内存当硬盘使的小实验
内存虚拟硬盘(ramdisk)是指通过软件技术,将物理内存进行分割,将一部分内存通过虚拟技术转变为硬盘以较大幅度提升计算机数据读取速度和保护硬盘. 在ubuntu下的dev下有ram相关的文件,这些文 ...
- MongoDB 主从复制小实验
MongoDB 主从复制小实验 操作环境描述:WIN8 64位操作系统,内装虚拟机为CentOS 5.5 32位系统. 操作描述:跟其他关系型数据库类似,在主库进行数据操作,将数据同步到从节点,从节 ...
随机推荐
- Shader工具
1. RenderMonkey 2. NVIDIA FX Composer 2.5
- django高级之点赞、文章评论及上传文件
目录: 点赞 文章评论 上传文件 保留页面条件 一.点赞 1.所用技术: django model F查询 js应用:$(function () {}); 为文件加载完成执行ready() 方法.等同 ...
- Codeforces Round #265 (Div. 2) E
这题说的是给了数字的字符串 然后有n种的操作没次将一个数字替换成另一个字符串,求出最后形成的字符串的 数字是多大,我们可以逆向的将每个数推出来,计算出他的值和位数记住位数用10的k次方来记 1位就是1 ...
- centos配置用户级别的jdk的环境变量
前面讲解了centos配置jdk的环境变量 的root级别的jdk配置 ,这里讲解用户级别的jdk配置. 在用户的当前目录下,如下,有四个隐藏的文件,文件打头是.bash******: 1.编辑.ba ...
- bzoj1601 / P1550 [USACO08OCT]打井Watering Hole（堆优化prim）
P1550 [USACO08OCT]打井Watering Hole 对于自己建水库的情况,新建一个虚拟结点,和其他点的边权即为自建水库的费用 这样问题就转化为一个裸最小生成树问题了. 这里用堆优化 ...
- Java集合转有类型的数组之toArray(T[] a)
在java变成中慎用强制类型转换,尽量使用类自带的转换函数或泛型.先看一行代码 错误方法: String[] array= (String[]) list.toArray(); 如果list中存放的是 ...
- FromBottomToTop第十三周项目博客
FromBottomToTop第十三周项目博客 本周项目计划 完成游戏核心算法以及界面相关类和怪物类 项目进展 用户可选择游戏模式,共有20张不同的地图. 炮台的建立和升级. 小怪的路径算法. 参考资 ...
- HashMap 遍历的两种方式及性能比较
HashMap 是Java开发中经常使用的数据结构.相信HashMap 的基本用法你已经很熟悉了.那么我们该如何遍历HashMap 呢?哪种遍历方式的性能更好呢?本篇文章来为你解决这个疑惑. 一.Ha ...
- MySQL 学习笔记整理
1. 创建表 CREATE TABLE item( ID INT(6) NOT NULL AUTO_INCREMENT, Name CHAR(32) NOT NULL, Price DECI ...
- Ubuntu 安装zookeeper
下载zookeeper Zookeeper下载 下载以后将文件迁移到/home/Hadoop/文件夹下面 hongdada@ubuntu:~/Downloads$ sudo mv zookeepe ...