Javascript详解二
来源：互联网 发布：禁止网络共享 编辑：程序博客网 时间：2024/06/02 02:17
上一篇文章链接：Javascript详解一
节点的替换:
1). replaceChild(): 把一个给定父元素里的一个子节点替换为另外一个子节点
var reference = element.replaceChild(newChild,oldChild);
返回值是一个指向已被替换的那个子节点的引用指针
2). 该节点除了替换功能以外还有移动的功能.
3). 该方法只能完成单向替换, 若需要使用双向替换, 需要自定义函数:
function replaceEach(aNode, bNode){ if(aNode == bNode){ return; } var aParentNode = aNode.parentNode; //若 aNode 有父节点 if(aParentNode){ var bParentNode = bNode.parentNode; //若 bNode 有父节点 if(bParentNode){ var tempNode = aNode.cloneNode(true); bParentNode.replaceChild(tempNode, bNode); aParentNode.replaceChild(bNode, aNode); } } }
代码示例：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <script type="text/javascript"> //测试replaceChild方法 window.onload = function() { //自定义互换两个节点函数 function replaceEach(aNode,bNode) { //1.获取a和b的父节点,使用parentNode属性 var apNode = aNode.parentNode; var bpNode = bNode.parentNode; if(apNode&&apNode){ //2.克隆a节点 var aNode2 = aNode.cloneNode(true); //3.两次互换 bpNode.replaceChild(aNode2,bNode); apNode.replaceChild(bNode,aNode); } } var bjNode = document.getElementById("bj"); var rlNode = document.getElementById("rl"); replaceEach(bjNode,rlNode); /*普通方法实现节点互换 var cityNode = document.getElementById("city"); //实现bjNode节点和rlNode节点的互换 var gameNode = document.getElementById("game"); //克隆bjNode节点 var bjNode2 = bjNode.cloneNode(true); gameNode.replaceChild(bjNode2, rlNode); cityNode.replaceChild(rlNode,bjNode); */ } </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> </body></html> 删除节点:
removeChild(): 从一个给定元素里删除一个子节点
var reference = element.removeChild(node);返回值是一个指向已被删除的子节点的引用指针. 某个节点被 removeChild() 方法删除时, 这个节点所包含的所有子节点将同时被删除.
如果想删除某个节点, 但不知道它的父节点是哪一个, parentNode 属性可以帮忙。
代码示例：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <script type="text/javascript"> //测试 removeChild() 方法: 删除节点 window.onload = function(){ /* alert("1"); var bjNode = document.getElementById("bj"); bjNode.parentNode.removeChild(bjNode); */ /*为每个 li 节点添加一个 confirm(确认对话框): 确定要删除 *xx 的信息吗? 若确定, 则删除 */ var liNodes = document.getElementsByTagName("li"); for(var i = 0; i < liNodes.length; i++){ liNodes[i].onclick = function(){ var flag = confirm("确定要删除" + this.firstChild.nodeValue + "的信息吗?"); if(flag){ this.parentNode.removeChild(this); } } } //var flag = confirm("确定要删除吗?"); //alert(flag); } </script> </head> <body> <p>你喜欢哪个城市?</p> <ul id="city"><li id="bj" name="BeiJing">北京</li> <li>上海</li> <li>东京</li> <li>首尔</li> </ul> <p>你喜欢哪款单机游戏?</p> <ul id="game"> <li id="rl">红警</li> <li>实况</li> <li>极品飞车</li> <li>魔兽</li> </ul> </body></html> 插入节点:
1). insertBefore(): 把一个给定节点插入到一个给定元素节点的给定子节点的前面
var reference = element.insertBefore(newNode,targetNode);
节点 newNode 将被插入到元素节点 element 中并出现在节点 targetNode 的前面. 节点 targetNode 必须是 element 元素的一个子节点。
2). 自定义 insertAfter() 方法
function insertAfter(newChild, refChild){ var refParentNode = refChild.parentNode; //判断 refChild 是否存在父节点 if(refParentNode){ //判断 refChild 节点是否为其父节点的最后一个子节点 if(refChild == refParentNode.lastChild){ refParentNode.appendChild(newChild); }else{ refParentNode.insertBefore(newChild, refChild.nextSibling);
代码示例：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <script type="text/javascript"> //测试 insertBefore() 插入节点 //该方法除了进行插入外, 还有移动节点的功能. window.onload = function(){ alert("abc"); //1. 把 #rl 插入到 #bj 节点的前面 var cityNode = document.getElementById("city"); var bjNode = document.getElementById("bj"); var rlNode = document.getElementById("rl"); //cityNode.insertBefore(rlNode, bjNode); //var refNode = document.getElementById("se"); var refNode = document.getElementById("dj"); insertAfter(rlNode, refNode); } //把 newNode 插入到 refNode 的后面 function insertAfter(newNode, refNode){ //1. 测试 refNode 是否为其父节点的最后一个子节点 var parentNode = refNode.parentNode; if(parentNode){ var lastNode = parentNode.lastChild; //2. 若是: 直接把 newNode 插入为 refNode 父节点的最后一个子节点. if(refNode == lastNode){ parentNode.appendChild(newNode); } /*3. 若不是: 获取 refNode 的下一个兄弟节点, 然后插入到其下一个兄弟节点的前面.*/ else{ var nextNode = refNode.nextSibling; parentNode.insertBefore(newNode, nextNode); } } } </script> </head> <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>实况</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> innerHTML属性
浏览器几乎都支持该属性, 但不是 DOM 标准的组成部分. innerHTML 属性可以用来读, 写某给定元素里的 HTML 内容
代码示例：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <script type="text/javascript"> //测试 innerHTML 属性 window.onload = function(){ var cityNode = document.getElementById("city"); alert(cityNode.innerHTML); //互换 #city 节点和 #game 节点中的内容. var tempHTML = cityNode.innerHTML; var gameNode = document.getElementById("game"); cityNode.innerHTML = gameNode.innerHTML; gameNode.innerHTML = tempHTML; } </script> </head> <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>实况</li> <li>极品飞车</li> <li>魔兽</li> </ul> </body></html> 运用示例
1.点击每个li节点都弹出文本值
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><script type="text/javascript"> //点击每个li节点都弹出文本值 window.onload = function() {//1.获取所有li节点 var liNode = document.getElementsByTagName("li"); //2.使用for循环进行遍历 for(var i = 0 ; i <liNode.length; i++) //3.为每个li节点添加onclick响应函数 liNode[i].onclick = function() { //4.在响应函数中获取当前节点的文本节点的文本值 //this为正在响应事件的那个节点 var textNode = this.firstChild.nodeValue; //5.打印响应 alert(textNode); } } </script></head><body> <p>你喜欢哪个城市?</p> <ul id="city"> <li id="bj" name="BeiJing">北京</li> <li>北京</li> <li>上海</li> <li>东京</li> <li>首尔</li> </ul> <p>你喜欢哪款单机游戏?</p> <ul id="game"> <li id="rl">红警</li> <li>实况</li> <li>极品飞车</li> <li>魔兽</li> </ul></body></html>
2.点击每个li节点，若li节点的文本值没有^^开头，加上^^,如果有则删除。
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><script type="text/javascript"> //点击每个li节点，若li节点的文本值没有^^开头，加上 //有则删除 window.onload = function() { /* //1.使用正则表达式判断是否以^^开头 //2.调用字符串的replace(reg,str)去除^^开头 var str = "^^abc"; var reg = /^\^{2}/g; alert(reg.test(str)); //返回true alert(str.replace(reg, ""); var str2 = "abc"; alert(reg.test(str2)); //返回flase */ var liNodes = document.getElementsByTagName("li"); // /^表示以什么开始 // /g表示全局 // \^{2}表示^^ var reg = /^\^{2}/g; for(var i = 0; i<liNodes.length; i++){ liNodes[i].onclick = function() { var str = this.firstChild.nodeValue; if(reg.test(str)) str = str.replace(reg, ""); else str = "^^"+str; this.firstChild.nodeValue = str; } } } </script></head><body> <p>你喜欢哪个城市?</p> <ul id="city"> <li id="bj" name="BeiJing">北京</li> <li>^^北京</li> <li>上海</li> <li>东京</li> <li>首尔</li> </ul> <p>你喜欢哪款单机游戏?</p> <ul id="game"> <li id="rl">红警</li> <li>实况</li> <li>极品飞车</li> <li>魔兽</li> </ul></body></html>
3.需求1: 点击 submit 按钮时, 检查是否选择 type, 若没有选择给出提示: “请选择类型”; 检查文本框中是否有输入(可以去除前后空格), 若没有输入,则给出提示:请输入内容”;若检查都通过, 则在相应的 ul 节点中添加对应的 li 节点
需求2: 使包括新增的 li 都能响应 onclick 事件: 弹出 li 的文本值.
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title> <script type="text/javascript"> window.onload = function(){ function showContent(liNode){ alert("^_^" + liNode.firstChild.nodeValue); } var liNodes = document.getElementsByTagName("li"); for(var i = 0; i < liNodes.length; i++){ liNodes[i].onclick = function(){ showContent(this); } } //1. 获取 #submit 对应的按钮 submitBtn var submit = document.getElementById("submit"); //2. 为 submitBtn 添加 onclick 响应函数 submit.onclick = function(){ //4. 检查是否选择 type, 若没有选择给出提示: "请选择类型" //4.1 选择所有的 name="type" 的节点 types var types = document.getElementsByName("type"); var typeVal = null; /*4.2 遍历 types, 检查其是否有一个 type 的 checked 属性存在, 就可说明有一个 type 被选中了: 通过 if(元素节点.属性名) 来判断 某一个元素节点是否有该属性.*/ for(var i = 0; i < types.length; i++){ if(types[i].checked){ typeVal = types[i].value; break; } } /*4.3 若没有任何一个 type 被选中, 则弹出: "请选择类型". 响应方法结束: */ //return false if (typeVal == null){ alert("请选择类型"); return false; } //5. 获取 name="name" 的文本值: 通过 value 属性: nameVal var nameEle = document.getElementsByName("name")[0]; var nameVal = nameEle.value; // 去除 nameVal 的前后空格. var reg = /^\s*|\s*/g; nameVal = nameVal.replace(reg,""); //使 name 的文本框也去除前后空格. nameEle.value = nameVal; /*6. 把 nameVal 和 "" 进行比较, 若是 "" 说明只出入了空格, 弹出 "请输入内容"方法结束: return false*/ if(nameVal == ""){ alert("请输入内容"); return false; } //7. 创建 li 节点 var liNode = document.createElement("li"); //8. 利用 nameVal 创建文本节点 var content = document.createTextNode(nameVal); //9. 把 8 加为 7 的子节点 liNode.appendChild(content); //10. 把 7 加为选择的 type 对应的 ul 的子节点 document.getElementById(typeVal).appendChild(liNode); //11. 为新创建的 li 添加 onclick 响应函数 liNode.onclick = function(){ showContent(this); } /*在 onclick 响应函数的结尾处添加 return false, 就可以取消提交按钮的默认行为.*/ return false; } } </script></head><body> <p>你喜欢哪个城市?</p> <ul id="city"> <li id="bj">北京</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> <form action="dom-7.html" name="myform"> <input type="radio" name="type" value="city">城市 <input type="radio" name="type" value="game">游戏 name: <input type="text" name="name"/> <input type="submit" value="Submit" id="submit"/> </form></body></html>
4.需求: 为所有的 li 节点添加 onclick 响应函数；实现 ：city 子节点和 game 子节点对应位置的元素的互换
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <script type="text/javascript"> //需求: 为所有的 li 节点添加 onclick 响应函数 //实现 city 子节点和 game 子节点对应位置的元素的互换 window.onload = function(){ //自定义互换两个节点的函数 function replaceEach(aNode, bNode){ //1. 获取 aNode 和 bNode 的父节点. 使用 parentNode 属性 var aParent = aNode.parentNode; var bParent = bNode.parentNode; if(aParent && bParent){ //2. 克隆 aNode 或 bNode var aNode2 = aNode.cloneNode(true); //克隆 aNode 的同时, 把 onclick 事件也复制. aNode2.onclick = aNode.onclick; //克隆 aNode 的同时, 把 index 事件也复制. aNode2.index = aNode.index; /*3. 分别调用 aNode 的父节点和 bNode 的父节点的 *replaceChild() *方法实现节点的互换 */ bParent.replaceChild(aNode2, bNode); aParent.replaceChild(bNode, aNode); } } //1. 获取所有的 li 节点 var liNodes = document.getElementsByTagName("li"); //2. 为每一个 li 节点添加 Onclick 响应函数 for(var i = 0; i < liNodes.length; i++){ //手动为每个 li 节点添加一个 index 属性 liNodes[i].index = i; liNodes[i].onclick = function(){ //alert("index: " + this.index); //3. 找到和当前节点对应的那个 li 节点 var targetIndex = 0; if(this.index < 4){ targetIndex = 4 + this.index; }else{ targetIndex = this.index - 4; } //交换 index 属性. var tempIndex = this.index; this.index = liNodes[targetIndex].index; liNodes[targetIndex].index = tempIndex; //4. 互换. replaceEach(this, liNodes[targetIndex]); } } } </script> </head> <body> <p>你喜欢哪个城市?</p> <ul id="city"><li id="bj" name="BeiJing">北京</li> <li>上海</li> <li>东京</li> <li>首尔</li> </ul> <p>你喜欢哪款单机游戏?</p> <ul id="game"> <li id="rl">红警</li> <li>实况</li> <li>极品飞车</li> <li>魔兽</li> </ul> </body></html> 0 0
- Javascript详解二
- JavaScript继承详解（二）
- JavaScript继承详解（二）
- JavaScript继承详解（二）
- JavaScript 各种参数 详解(二)
- JavaScript继承详解（二）
- JavaScript继承详解（二）
- JavaScript继承详解（二）
- JavaScript继承详解（二）
- JavaScript继承详解（二）
- JavaScript继承详解（二）
- JavaScript继承详解（二）
- JavaScript继承详解（二）
- JavaScript继承详解（二）
- JavaScript继承详解（二）
- JavaScript继承详解（二）
- Javascript prototype详解（二）
- JavaScript之JS Window详解<二>
- java中类和接口
- 数据结构与算法学习
- 初入spring源码--整体框架
- 一些好的博客
- DHTML说明
- Javascript详解二
- EAS BOS webservice安全性
- 模仿音乐播放器带进度的播放暂停按钮
- nyoj 208 Supermarket(贪心)
- java学习之路 之 Java常用类-字符串（String）类及练习题
- BZOJ3143 [Hnoi2013]游走
- Socket连接与HTTP连接
- laravel5.2 性能优化 上线优化
- 2016年下半年技术规划
