JavaScript-DOM编程

来源：互联网发布：网络教育是全日制吗编辑：程序博客网时间：2024/06/05 22:33

1. 当整个html文档完全加载成功后触发window.onload事件

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript">    //1.当整个html文档完全加载成功后触发window.onload事件。    //事件触发时，执行后面function里面的函数体window.onload = function(){    //2.获取所有的button节点，并取得第一个元素var btn = document.getElementsByTagName("button")[0];//3.为button的Onclick事件赋值：当点击button时，执行函数体    btn.onclick = function(){//4.弹出helloworldalert("helloworld");}}</script></head><body><button>ClickMe</button></body></html>

2.获取指定的元素节点的方法：

1）document.getElementById("bj");

2）document.getElementsByTagName("li");

3）document.getElementsByName("gender");

4）若HTML元素自身没有定义name属性，则getElementsByName方法对于IE无效，所以该方法使用时需谨慎

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript">//获取指定的元素节点window.onload = function(){//1.获取id为bj的那个节点//在编写HTML文档时，需确保id属性值是唯一的//该方法为document对象的方法var bjNode = document.getElementById("bj");alert(bjNode);//2.获取所有的li节点//使用标签名获取指定节点的集合//该方法为Node接口的方法，即任何一个节点都有这个方法var liNodes = document.getElementsByTagName("li");alert(liNodes.length);//获取指点节点的指定子节点var cityNode = document.getElementById("city");var cityLiNodes = cityNode.getElementsByTagName("li");alert(cityLiNodes.length);//3.根据HTML文档元素的name属性名来获取指定的节点的集合var genderNodes = document.getElementsByName("gender");alert(genderNodes.length);//若HTML元素自身没有定义name属性，则getElementsByName//方法对于IE无效，所以该方法使用时需谨慎var objNodes = document.getElementsByName("BeiJing");alert(objNodes.length);}</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>gender:<input type="radio" name="gender" value="male"/>Male<input type="radio" name="gender" value="female"/>Female</body></html>

3.读写属性节点

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript">//读写属性节点:通过元素节点.的方式来获取属性值和设置属性值window.onload = function(){//属性节点即为某一指定的元素节点的属性。//1.先获取指定的元素节点var nameNode = document.getElementById("name");//2.在读取指定属性的值alert(nameNode.value);//3.设置指定的属性的值nameNode.value = "范范";}</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>name:<input type="text" name="username" id="name" value="fanfan"/></body></html>

4.获取元素节点的子节点

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript">//获取元素节点的子节点window.onload = function(){//1.获取#city节点的所有子节点var cityNode = document.getElementById("city");//2.利用元素节点的childNodes方法可以获取所有指定元素节点的所有子节点alert(cityNode.childNodes.length);//3.获取#city节点的所有li子节点var cityLiNodes = cityNode.getElementsByTagName("li");alert("1111:" + cityLiNodes.length);//4.获取指定节点的第一个子节点和最后一个子节点alert(cityNode.firstChild);alert(cityNode.lastChild);}</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>name:<input type="text" name="username" id="name" value="fanfan"/></body></html>

5.获取文本节点

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript">//获取文本节点window.onload = function(){//文本节点一定是元素节点的子节点//1.获取文本节点所在的元素节点var bjNode = document.getElementById("bj");//2.通过firstChild定位到文本节点var bjTextNode = bjNode.firstChild;//3.通过操作文本节点的nodeValue属性来读写文本节点的值alert(bjTextNode.nodeValue);bjTextNode.nodeValue = "扬州";}</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>name:<input type="text" name="username" id="name" value="fanfan"/></body></html>

6.点击每个li节点，都弹出其文本值

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript">window.onload = function(){//点击每个li节点，都弹出其文本值//1.获取素有的li节点var liNodes = document.getElementsByTagName("li");//2.使用for循环进行遍历，得到每一个li节点for(var i = 0;i < liNodes.length;i++){//3.为每一个li节点添加onclick响应函数liNodes[i].onclick = function(){//4.在响应函数中获取当前节点的文本节点的文本值//5.alert打印//this为正在响应事件的那个节点alert(this.firstChild.nodeValue);//此时i已经是8了，liNodes[8]不指向任何节点//alert(liNodes[i].firstChild.nodeValue);}}}</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>name:<input type="text" name="username" id="name" value="fanfan"/></body></html>

7.点击每个li节点，若li节点的文本值没有^^开头，加上有，则去除

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript">window.onload = function(){//点击每个li节点，若li节点的文本值没有^^开头，加上//有，则去除var liNodes = document.getElementsByTagName("li");for(var i = 0;i < liNodes.length;i++){liNodes[i].onclick = function(){var val = this.firstChild.nodeValue;var reg = /^\^{2}/g;if(reg.test(val)){val = val.replace(reg, "");}else{val = "^^" + val;}this.firstChild.nodeValue = val;}}//1.使用正则表达式判断是否以^^开始//2.调用字符串的replace（reg，str）方法除去指定的字符串/* var str = "^^abc";var reg = /^\^{2}/g;//正则表达式alert(reg.test(str));//truestr = str.replace(reg,"");alert(str);var str2 = "abc";alert(reg.test(str2));//false */}</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>name:<input type="text" name="username" id="name" value="fanfan"/></body></html>

8.关于节点的属性，nodeType，nodeName，nodeValue

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript">//关于节点的属性，nodeType，nodeName，nodeValue//在文档中，任何一个节点的都有着3个属性//而id，name，value是具体节点的属性。window.onload = function(){//1.元素节点的这3个属性var bjNode = document.getElementById("bj");alert(bjNode.nodeType);//元素节点：1alert(bjNode.nodeName);//节点名：lialert(bjNode.nodeValue);//元素节点没有nodeValue属性值：null//2.属性节点var nameAttr = document.getElementById("name")                       .getAttributeNode("name");alert(nameAttr.nodeType);//属性节点：2alert(nameAttr.nodeName);//属性节点的节点名：属性名alert(nameAttr.nodeValue);//属性节点的节nodeValue属性值：username//3.文本节点var textNode = bjNode.firstChild;alert(textNode.nodeType);//文本节点：3alert(textNode.nodeName);//节点名：#textalert(textNode.nodeValue);//文本节点的nodeValue属性值：文本值//nodeType、nodeName是只读的，//而nodeValue是可以被改变的//以上三个属性，只有在文本节点中使用nodeValue读写文本值时使用最多}</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>name:<input type="text" name="username" id="name" value="fanfan"/></body></html>

9.总结

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript">//1、节点分为三种类型，元素节点、属性节点、 文本节点//通常情况下，操作属性节点直接通过“元素节点.属性名”的方式来读写属性值//而不是获取属性节点//2.写JS代码的位置。在title节点后面，写在window.onload = function(){}中，//可以获取到当前文档的所有节点//3.如何获取元素节点//3.1根据id获取//3.2根据标签名获取:该方法并非document对象所独有，任何元素节点//都可以调用该方法，以获取指定的子节点。//3.3根据name属性获取。若HTML元素没有name属性，我们硬添加了一个name属性，//使用getElementsByName,对于IE无法使用//4.获取子节点//4.1childNodes属性,获取指定元素的所有子节点，不大常用//4.2firstChild、lastChild属性：获取元素节点的文本节点（如果一个元素节点只有一个文本子节点）//4.3使用元素节点的getElementsByTagName（“方法名”）；//5.读写文本节点//5.1文本节点一定是元素节点的子节点//5.2步骤：获取文本节点所在的元素节点->利用firstChild获取文本节点//->利用nodeValue来读写文本的属性值//6.节点的属性：所有节点都有的属性(元素节点，属性节点，文本节点)//6.1 nodeType:1,2,3（只读）//6.2 nodeName:返回对应的节点的名字（只读）//6.3 nodeValue：null，属性值，文本值（可读写）//7.属性节点：//7.1 一般情况下不单独获取属性节点，而是通过元素节点.属性名的方式来读写属性值window.onload = function(){ var bjNode = document.getElementById("bj");alert(bjNode);var liNode = document.getElementsByTagName("li");alert(liNode.length);var genderNode = document.getElementsByName("gender");alert(genderNode.length);var cityNode = document.getElementById("city");var cityLiNode = cityNode.getElementsByTagName("li");alert(cityLiNode.length);var lichildNode = cityNode.childNodes;alert(lichildNode.length);  //4 var nameNode = document.getElementsByName("username")[0];alert(nameNode.value);nameNode.value = "饭饭";}</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="fanfan"/></body></html>

10.新创建一个元素节点，并把该节点添加为文档中指定节点的子节点

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript">//新创建一个元素节点，并把该节点添加为文档中指定节点的子节点window.onload = function(){alert(1);//1.document.createElement(elementTagName);//新创建一个元素节点，返回值为指向元素节点的引用var liNode = document.createElement("li");//2.创建“厦门”的文本节点//document.createTextNode("")将创建一个文本节点//参数为文本值，返回为该文本节点的引用var xmText = document.createTextNode("厦门");liNode.appendChild(xmText);var cityNode = document.getElementById("city");//elementNode.appendChild(newChild):为elementNode//新添加newChild子节点，作为最有一个子节点cityNode.appendChild(liNode);}</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="fanfan"/></body></html>

11.点击submit按钮时，检查是否选择type，若没有选择给出提示：“请选择类型”;

检查文本框中是否有输入（可以去除前后空格），若没有输入，则给出提示：“请输入内容”

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript">//需求：点击submit按钮时，检查是否选择type，若没有选择给出提示：“请选择类型”;//    检查文本框中是否有输入（可以去除前后空格），若没有输入，则给出提示：“请输入内容”//若检查都通过，则在相应的ul节点中添加对应的li节点//需求2：使包括新增的li都能响应onclick事件：弹出li的文本值    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.检查类型是否被选中，若没有选择给出提示：“请选择类型”            //4.1选择所有的name="type"的节点            var types = document.getElementsByName("type");            //4.2遍历types，检查其是否有一个type的checked属性存在，就可以说明            //有一个type被选中了:通过if(元素节点.属性名)来判断某一个元素节点是否有该属性            var typeVal = null;            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属性。            var nameEle = document.getElementsByName("name")[0];            var nameVal = nameEle.value;            //6.去除namevalue的前后空格            var reg = /^\s*|\s*$/g;            nameVal = nameVal.replace(reg,"");             alert("--" + nameVal + "--");            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);            //11.为新创建的li添加onclick响应函数            liNode.onclick = function(){showContent(this);}                        //10.把7加为选择的type对应的节点处            document.getElementById(typeVal)            .appendChild(liNode);                        //3.在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>

12.交换节点

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript">window.onload = function(){//var liNodes = document.getElementsByTagName("li");for(var i = 0;i < liNodes.length;i++){//手动为每个li节点添加一个index属性liNodes[i].index = i;liNodes[i].onclick = function(){//alert("onclick");var targetIndex = 0;if(this.index < 4){targetIndex = 4 + this.index;}else{targetIndex = this.index - 4;}//var tempIndex = this.index;this.index = liNodes[targetIndex].index;liNodes[targetIndex].index = tempIndex;//alert(liNodes[targetIndex].firstChild.nodeValue);replaceEach(this, liNodes[targetIndex]);}}//自定义互换两个节点的函数function replaceEach(aNode, bNode){//1.获取aNode，bNode的父节点，使用parentNode属性var aParent = aNode.parentNode;var bParent = bNode.parentNode;//2.克隆aNode或bNodeif(aParent && bParent){var aNode2 = aNode.cloneNode(true);        //克隆aNode的同时，把onclick事件也复制        aNode2.onclick = aNode.onclick;        //index属性        aNode2.index = aNode.index;}//3.分别调用aNode的父节点和bNode的父节点的replaceNode//实现互换bParent.replaceChild(aNode2,bNode);//alert(00);aParent.replaceChild(bNode,aNode)}}</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="fanfan"/></body></html>

13.删除节点

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript">//删除节点window.onload = function(){/* alert("1");var bjNode = document.getElementById("bj");bjNode.parentNode.removeChild(bjNode); *///为每一个li节点添加一个confirm,若确定，则删除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);}}}}</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="fanfan"/></body></html>

14.级联选择

<!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=GB18030"><title>Insert title here</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//var provinces = xmlDoc.getElementsByTagName("province");//alert(provinces.length);var provinceEle = xmlDoc.selectNodes("//province[@name='"+provinceVal+"']");//alert(provinceVal);//4.再得到province节点的所有的city子节点var cityNodes = provinceEle[0].getElementsByTagName("city");//alert(cityNodes.length);//5.遍历cities子节点，得到每一个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文档的函数，只支持iefunction parseXml(fileName){//IE内核的浏览器if(window.ActiveXObject){//创建DOM解析器var doc = new ActiveXObject("Microsoft.XMLDOM");doc.async = "false";//加载XML文档，获取XML文档对象doc.load(fileName);return doc;}}</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="UTF-8"?><china><province name="河北省"><city>石家庄</city><city>邯郸</city><city>唐山</city><city>张家口</city><city>廊坊</city><city>保定</city><city>承德</city></province><province name="辽宁省"><city>沈阳</city><city>大连</city><city>鞍山</city><city>抚顺</city><city>铁岭</city></province><province name="山东省"><city>济南</city><city>青岛</city><city>威海</city><city>烟台</city><city>廊坊</city></province></china>

15.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=GB18030"><title>Insert title here</title><script type="text/javascript">//需求：若checkedALL_2被选中，则name=items的checkbox都被选中//若没有，则name=items的checkbox都取消选中//若name=items的checkbox都选中，则checkedALL_2选中//若name=items的checkbox有任何一个没有被选中，则checkedALL_2不选中//提示：事件加给checkedALL_2，判断是否被选中，//若被选中，获取name=items的checkbox,都选中//若没有选中，获取name=items的checkbox,取消选中//根据是否存在checked属性来判断是否选中，可以使其checked属性=true被选中//checked属性=false取消选中//还需要给每个name=items的checkbox添加相应函数//判断name=items的checkbox是否都被选中//选中的个数若等于总个数，则都被选择，那么使checkedALL_2被选中window.onload = function(){document.getElementById("checkedALL_2").onclick = function(){var flag = this.checked;var items = document.getElementsByName("items");for(var i = 0;i < items.length;i++){items[i].checked = flag;}}var items = document.getElementsByName("items");for(var i = 0;i < items.length;i++){items[i].onclick = function(){//记录被选中的items个数var number = 0;for(var j = 0;j < items.length;j++){if(items[j].checked){number++;}}document.getElementById("checkedALL_2").checked=(items.length == number);}}document.getElementById("CheckedAll").onclick=function(){for(var j = 0;j < items.length;j++){items[j].checked = true;}}document.getElementById("CheckedNo").onclick=function(){for(var j = 0;j < items.length;j++){items[j].checked = false;}}document.getElementById("CheckedRev").onclick=function(){for(var j = 0;j < items.length;j++){items[j].checked = !items[j].checked;}}document.getElementById("Send").onclick=function(){for(var j = 0;j < items.length;j++){//var str = null;if(items[j].checked){alert(items[j].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>

16.employeetable的所有的a节点添加Onclick响应函数

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript">/* * 为#employeetable的所有的a节点添加Onclick响应函数 * 1.弹出confirm：确定要删除xx的信息吗？ * 2.若点击确定，则删除a节点所在的行 * 注意： * 1.a节点是一个超级链接，可以在其onclick事件中通过返回false来取消默认行为 * 2.tr的直接父节点为tbody，而不是table * 3.可以把去除前后空格的代码写成一个trim(str)函数 */ window.onload = function(){var aNodes = document.getElementById("employeetable")     .getElementByTagName("a");for(var i = 0;i < aNodes.length;i++){aNodes[i].onclick = function(){var trNode = this.parentNode.parentNode;var textContent = trNode.getElementsByTagName("td")[0].  firstChild.nodeValue;textContent = trim(textContent);if(confirm("确定要删除"+this.first+"的信息吗"));return false;}}function trim(str){var reg = /^\s*|\s*$/g;return str.replace(reg, "");}}</script></head><body><center></center></body></html>

17.

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript">//插入节点insertBefore()window.onload = function(){//1.#把#rl插入到#bj节点的前面//该方法除了进行插入外，还有移动节点的功能。alert("111");var cityNode = document.getElementById("city");var bjNode = document.getElementById("bj");var rlNode = document.getElementById("rl");//cityNode.insertBefore(rlNode,bjNode);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;if(refNode == lastNode){//2.若是，直接把newNode插入为refNode父节点最后一个子节点parentNode.appendChild(newNode);}else{//3.若不是，则获取refNode的下一个兄弟节点，插入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="fanfan"/></body></html>

0 0