JavaScript(DOM编程三)
节点的移动，insertBefore
<body>
<p>你喜欢哪个城市?</p>
<ul id="city"><li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li id="dj">东京</li>
<li id="se">首尔</li>
</ul>
<br><br>
<p>你喜欢哪款单机游戏?</p>
<ul id="game">
<li id="rl">红警</li>
<li id="sk">实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul> <br><br>
gender:
<input type="radio" name="gender" value="male"/>Male
<input type="radio" name="gender" value="female"/>Female <br><br>
name: <input type="text" name="username" value="atguigu"/> </body>
<script type="text/javascript">
window.onload=function(){ alert("把红警插入到北京之前");
//insertBefore(a,b) 把a查到b的前面
//获取北京这个节点
var bjnode=document.getElementById("bj");
//获取红警节点
var hj=document.getElementById("rl");
//获取 北京的父类节点city 因为这是往city的子节点中插入节点
var city=document.getElementById("city");
city.insertBefore(hj,bjnode);
//运行之后 把红警移动到了北京之前 实现了移动
}
</script>
运行效果：
单击确定
父节点.insertBefore(a,b);的作用是把a节点移动到b节点之前，所以父节点其实就是b节点的父节点，因为是往该节点中的子节点中做添加，但是JavaScript却没有提供insertAfter(a,b)方法 这个方法作用就是把某个节点a插入到某个节点b之后，而我们通过
b.nextSibling[获取xxx节点的下一个兄弟节点c]方法就能够实现功能，然后把a插入到下一个兄弟节点之前就可以了 .insertBefore(a,c)
-----------------------------------------------
innerHtml方法，能够获取某个节点中的全部html内容
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
var city=document.getElementById("city");//获取city元素节点
alert(city.innerHTML);//打印city节点中的html内容
}
</script>
</head>
<body>
<p>你喜欢哪个城市?</p>
<ul id="city"><li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul> <br><br>
<p>你喜欢哪款单机游戏?</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul> <br><br>
gender:
<input type="radio" name="gender" value="male"/>Male
<input type="radio" name="gender" value="female"/>Female <br><br>
name: <input type="text" name="username" value="atguigu"/> </body>
</html>
运行效果：
下面使用该方法，实现两个节点中的子节点之间的内容全部交换位置
<script type="text/javascript">
window.onload=function(){
var city=document.getElementById("city");//获取city元素节点
// alert(city.innerHTML);//打印city节点中的html内容
var game=document.getElementById("game");//获取game元素节点
alert("交换之前");
var temp=city.innerHTML;//创建中间变量
city.innerHTML=game.innerHTML;//把game的innerHtml赋值给city的innerHtml
game.innerHTML=temp;
//完成交换 }
</script>
运行效果：
单击确定
-------------------------------------------------
select级联菜单实现（IE下支持）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type="text/javascript"> window.onload = function(){ //1. 为 #province 添加 onchange 响应函数
document.getElementById("province").onchange = function(){ //1.1 把 #city 节点除第一个子节点外都移除.
var cityNode = document.getElementById("city");
var cityNodeOptions = cityNode.getElementsByTagName("option"); var len = cityNodeOptions.length;
for(var i =1; i < len; i++){
cityNode.removeChild(cityNodeOptions[1]);//每次都清除第一个内容 除了“请选择”之外的内容最后都会被清除
} var provinceVal = this.value;
if(provinceVal == ""){//如果用户选择的第一列中选择了 “请选择” 这个列 那么就不在执行下面的内容 因为加载不到任何内容
return;
} //2. 加载 cities.xml 文件. 得到代表给文档的 document 对象
var xmlDoc = parseXml("cities.xml"); //3. 在 cities.xml 文档中查找和选择的省匹配的 province 节点. //直接使用 XPath 技术查找 XML 文档中匹配的节点.
var provinceEles = xmlDoc.selectNodes("//province[@name='"
+ provinceVal + "']");
/* 另外一种方式 逐个比较 然后获得对应的节点
var prochild=xmlDoc.getElementsByTagName("province");
//alert(prochild.length);
for(var i=0;i<prochild.length;i++){
//alert(prochild[i].getAttributeNode("name").value);
if(prochild[i].getAttributeNode("name").nodeValue==this.value){
alert("a1");
var xxxx=prochild[i];
alert("a2");
break;
}
}
var cityNodes=xxxx.getElementsByTagName("city");
*/ //4. 再得到 province 节点的所有的 city 子节点
var cityNodes = provinceEles[0].getElementsByTagName("city"); //5. 遍历 city 子节点, 得到每一个 city 子节点的文本值
for(var i = 0; i < cityNodes.length; i++){
//6. 利用得到的文本值创建 option 节点
//<option>cityName</option>
var cityText = cityNodes[i].firstChild.nodeValue;
var cityTextNode = document.createTextNode(cityText);
var optionNode = document.createElement("option");
optionNode.appendChild(cityTextNode); //7. 并把 6 创建的 option 节点添加为 #city 的子节点.
cityNode.appendChild(optionNode);
} } //js 解析 xml 文档的函数, 只支持 ie
function parseXml(fileName){
//IE 内核的浏览器
if (true) {//(window.ActiveXObject)的作用，用来判断浏览器是否支持ActiveX控件 使用ie功能可以实现 使用360没反应
//创建 DOM 解析器
var doc = new ActiveXObject("Microsoft.XMLDOM");
doc.async = "false";
//加载 XML 文档, 获取 XML 文档对象
doc.load(fileName);
return doc;
}
} // function parseXml(fileName)
// {alert("a0");
// //IE 内核的浏览器
// if (window.ActiveXObject)
// {
// alert("a1");
// // 创建 DOM 解析器
// var doc = new ActiveXObject("Microsoft.XMLDOM");
// alert("a2");
// doc.async = "false";
// // 加载 XML 文档 , 获取 XML 文档对象
// alert("a3");
// doc.load(fileName);
// alert("a4");
// return doc;
// }
// //Mozilla 浏览器
// else if (window.DOMParser)
// {
// // 创建 DOM 解析器
// var p = new DOMParser();
// // 创建 DOM 解析器
// return p.parseFromString(fileName, "text/xml");
// }
// else
// {
// return false;
// }
// } } </script> </head>
<body>
<select id="province">
<option value="">请选择...</option>
<option value="河北省">河北省</option>
<option value="辽宁省">辽宁省</option>
<option value="山东省">山东省</option>
</select> <select id="city"><option value="">请选择...</option></select>
</body>
</html>
cities.xml
<?xml version="1.0" encoding="GB2312"?>
<china> <province name="河北省">
<city>石家庄</city>
<city>邯郸</city>
</province> <province name="辽宁省">
<city>沈阳</city>
<city>大连</city> </province> <province name="山东省">
<city>济南</city>
<city>青岛</city> </province> </china>
运行效果；
---------------------------------------------------------
Checkbox全选操作
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"> //需求: 若 #checkedAll_2 被选中, 则 name=items 的 checkbox 都被选中
//若 #checkedAll_2 取消选中, 则 name=items 的 checkbox 都取消选中
//若 name=items 的 checkbox 都被选中, 则 #checkedAll_2 的 checkbox 也被选中
//若 name=items 的 checkbox 有一个没有被选中, 则 #checkedAll_2 取消选择. //提示: 事件需要加给 #checkedAll_2, 获取 name=items 的 checkbox 数组
//判断是否被选中, 若被选择, 则 name=items 的 checkbox 都要被选择
//若没有被选择, 则 name=items 的 checkbox 都要取消选择
//根据是否存在 checked 属性来判断是否被选择, 可以使其 checked = true 被选择
//checked = false 取消选择. //还需要给每个 name=items 的 checkbox 加响应函数
//判断 name=items 的 checkbox 是否都被选中: 选择的个数和总个数是否相等.
//若都被选择: 则使 #checkedAll_2 被选择
//若没有都被选择: 则使 #checkedAll_2 取消选择
window.onload=function(){
//为全选按钮加事件
var items=document.getElementsByName("items");
document.getElementById("checkedAll_2").onclick=function(){
var flag=this.checked;
//获取所有的items节点 for(var i=0;i<items.length;i++){
items[i].checked=flag;
}
}
//为每个选项也要加事件
for(var i=0;i<items.length;i++){
items[i].onclick=function(){
//每次单击 都要判断已经被选中的个数是否==总个数items.length
var count=0;
for(var j=0;j<items.length;j++){
if(items[j].checked){
count++;
}
}
document.getElementById("checkedAll_2").checked=(items.length==count);
} } //为全选按钮添加事件
document.getElementById("CheckedAll").onclick=function(){
for(var i=0;i<items.length;i++){
items[i].checked=true;
}
}
//为全 不选按钮添加单击事件
document.getElementById("CheckedNo").onclick=function(){
for(var i=0;i<items.length;i++){
items[i].checked=false;
}
}
//为反选按钮增加事件
document.getElementById("CheckedRev").onclick=function(){
//以前的选择为true 则变为false 即以前的取反
for(var i=0;i<items.length;i++){
items[i].checked=!items[i].checked;//取反操作
}
} //提交事件
document.getElementById("send").onclick=function(){
//以前的选择为true 则变为false 即以前的取反
for(var i=0;i<items.length;i++){
if(items[i].checked){
alert(items[i].value);//输出那些被选中的内容
}
}
}
}
</script>
</head>
<body> <form method="post" action="">
你爱好的运动是？<input type="checkbox" id="checkedAll_2" />全选/全不选 <br /> <input
type="checkbox" name="items" value="足球" />足球 <input type="checkbox"
name="items" value="篮球" />篮球 <input type="checkbox" name="items"
value="羽毛球" />羽毛球 <input type="checkbox" name="items" value="乒乓球" />乒乓球
<br /> <input type="button" id="CheckedAll" value="全 选" /> <input
type="button" id="CheckedNo" value="全不选" /> <input type="button"
id="CheckedRev" value="反 选" /> <input type="button" id="send"
value="提 交" />
</form> </body>
</html>
运行效果：
JavaScript(DOM编程三)的更多相关文章
- 读书笔记：JavaScript DOM 编程艺术（第二版）
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...
- JavaScript DOM 编程艺术·setInterval与setTimeout的动画实现解析
先贴上moveElement()函数的大纲,为了方便观看,删了部分代码,完整版粘到文章后面. function moveElement(elementID,final_x,final_y,interv ...
- JavaScript DOM编程艺术第一章：JavaScript简史
本系列的博客是由本人在阅读<JavaScript DOM编程艺术>一书过程中做的总结.前面的偏理论部分都是书中原话,觉得有必要记录下来,方便自己翻阅,也希望能为读到本博客的人提供一些帮助, ...
- JavaScript DOM编程艺术读后感（1）—— 平稳退化
最近,在读<JavaScript DOM编程艺术(第二版)>这本书,想着将自己的读后感记录下来,作为记忆吧. 其实我并不是最近才刚开始读这本书的,我读了有一段时间了.我是一名web前端开发 ...
- Java web JavaScript DOM 编程
JavaScript DOM 编程 (1).DOM概述及分类 (2).DOM结构模型:XML DOM 和 HTML DOM 关系? (3).结点,结点树,结点属性与方法? 1.DOM是什么? d ...
- javascript Dom 编程
javascript Dom 编程 知识概要: (1)Dom是什么? (2)Dom结构模型 (3)XML DOM和 HTML DOM (4)NODE接口的特性和方法 (5)DOM结点的常用属性 ...
- 《JavaScript Dom 编程艺术》读书笔记-第4章
我的前端入门第一本书是<JavaScript Dom 编程艺术>,网上查找资料发现前端的入门推荐书籍最受好评的就是这本和<JavaScript 高级程序设计>了.之所以先选这本 ...
- Javascript DOM 编程艺术（第二版）读书笔记——基本语法
Javascript DOM 编程艺术(第二版),英Jeremy Keith.加Jeffrey Sambells著,杨涛.王建桥等译,人民邮电出版社. 学到这的时候,我发现一个问题:学习过程中,相当一 ...
- 《JavaScript DOM 编程艺术》 学习笔记
目录 <JavaScript DOM 编程艺术> 学习笔记 第一章 js简史 第二章 js语法 准备工作 语法 第三章 DOM DOM中的D DOM中的O DOM中的M 第四章 js图片库 ...
随机推荐
- rsync与cwRsync
以下这个链接是windows之间的csRsync和csRsyncServer同步教程: http://www.cnblogs.com/wwufengg/p/rsync-config.html !Att ...
- iOS不同版本号适配问题(#ifdef __IPHONE_7_0)
部分參考http://www.cnblogs.com/ios8/p/ios-version-com.html 以下举个简单的样例来说明在iOS7.0和iOS6.1(以及更低版本号)之间的适配问题(用的 ...
- HDU 2586 How far away ？（LCA模板 近期公共祖先啊）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2586 Problem Description There are n houses in the vi ...
- 在Mac OS X中部署Tomcat的经验
因为前几天重装了Mac的系统.准备接下来把一些必需的实验环境都搭建起来.这里简单总结一下在Mac OS X上部署Tomcat应该注意的事情: 下载Tomcat的相应版本号,如http://tomcat ...
- leetcode解题文件夹
点击打开链接点击打开链接点击打开链接參考文献:http://blog.csdn.net/lanxu_yy/article/details/17848219 只是本文准备用超链接的方式连接到对应解答页面 ...
- Linux用户和组的管理
一.概述: 1.Linux下的三类用户: (1).超级用户(root)具有操作系统的一切权限UID值均为0 (2).普通用户具有操作系统有限的权限UID值500~6000 (3).伪用户是为了方便系统 ...
- linux下怎样将sheduler绑定到制定的cpu核上
作者:张昌昌 1.顺序绑定 erl +sbt db 是按从前到后的顺序来绑定调度器的,如: erl +sbt db +S 3含义是启动erlang虚拟机,开启3个调度器,按顺序绑定在0,1.2号核 ...
- Android进程与线程
我们都知道,在操作系统中进程是OS分配资源的最小单位,而线程是执行任务的最小单位.一个进程可以拥有多个线程执行任务,这些线程可以共享该进程分配到的资源.当我们的app启动运行后,在该app没有其他组件 ...
- 第7章 性能和可靠性模式 Server Clustering（服务器群集）
上下文 您正在设计要部署应用程序的基础结构层.运行要求包括无法满足的可用性或性能能力,因为基础结构中存在性能瓶颈或故障单点. 影响因素 设计基础结构时,请考虑下列影响因素: 用户希望在使用应用程序时这 ...
- Python编程Web框架 :Django 从入门到精通
Django是一个高级别的Python Web框架,它鼓励快速开发和干净实用的设计. 现在我们开始学习它. Django学习之 第一章:Django介绍 Django学习之 第二章:Django快速上 ...