DOM学习笔记（五）

来源：互联网发布：vr应用领域数据科学编辑：程序博客网时间：2024/06/05 22:39

1、案例一

<!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">//需求: 为所有的 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 或 bNodevar aNode2 = aNode.cloneNode(true);//克隆 aNode 的同时, 把 onclick 事件也复制. aNode2.onclick = aNode.onclick;//克隆 aNode 的同时, 把 onclick 事件也复制. 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">北京</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>

2、案例2

<!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">/* * 为 #employeetable 的所有的 a 节点添加 Onclick 响应函数: * 1. 弹出确认对话框: 确定要删除 xx 的信息吗? xx 为当前 a 节点所在的 td 所在的 tr 的 * 第一个 td 子节点的文本值, 且要去除前后空格. * 2. 若点击 "确认" , 则删除 a 节点的所在的 行 * * 注意: * 1. a 节点是一个超级链接, 可以在其 onclick 事件中通过返回 false, 来取消默认行为 * 2. tr 的直接父节点为 tbody, 而不是 table * 3. 可以把去除前后空格的代码写成一个 trim(str) 函数.  * * 为 #addEmpButton 添加 onclick 响应函数: * 1. 获取 #name, #email, #salary 的文本框的值 * 2. 利用 1 获取的文本值创建 3 个 td 节点, 在创建一个 tr 节点. 并把以上的 3 个 td *    节点价位 tr 节点的子节点    <tr><td>Tom</td><td>tom@tom.com</td><td>5000</td></tr> * 3. 在创建一个 td 节点: <td><a href="deleteEmp?id=xxx">Delete</a></td>  * 4. 把 3 创建的 td 也加为 tr 的子节点.  * 5. 再把 tr 加为 #employeetable 的 tbody 子节点的子节点. * 6. 为新创建的 tr 的 a 子节点添加 Onclick 响应函数, 使其也具备删除的功能.  * * */  window.onload = function(){  function removeTr(aNoe){  var trNode = aNoe.parentNode.parentNode;  var textContent = trNode.getElementsByTagName("td")[0]                         .firstChild.nodeValue; textContent = trim(textContent);  var flag = confirm("确定要删除" + textContent + "的信息吗?"); if(flag){ trNode.parentNode.removeChild(trNode); }  return false; }  var aNodes = document.getElementById("employeetable")                      .getElementsByTagName("a"); for(var i = 0; i < aNodes.length; i++){ aNodes[i].onclick = function(){ removeTr(this);  return false; } }  document.getElementById("addEmpButton").onclick = function(){  var nameVal = document.getElementById("name").value; var emailVal = document.getElementById("email").value; var salaryVal = document.getElementById("salary").value;  var nameTd = document.createElement("td"); nameTd.appendChild(document.createTextNode(nameVal)); var emailTd = document.createElement("td"); emailTd.appendChild(document.createTextNode(emailVal));  var salaryTd = document.createElement("td"); salaryTd.appendChild(document.createTextNode(salaryVal));  var tr = document.createElement("tr");  tr.appendChild(nameTd); tr.appendChild(emailTd); tr.appendChild(salaryTd);  alert("aa");  //<td><a href="deleteEmp?id=xxx">Delete</a></td> var aNode = document.createElement("a"); aNode.href = "deleteEmp?id=xxx"; aNode.appendChild(document.createTextNode("Delete")); var aTd = document.createElement("td"); aTd.appendChild(aNode);  tr.appendChild(aTd);  aNode.onclick = function(){ removeTr(this);  return false; }  document.getElementById("employeetable")         .getElementsByTagName("tbody")[0]         .appendChild(tr);  //value: 用于获取 html 表单元素的值 //alert(this.value); // //nodeValue: 用于获取文本节点的文本值.  //alert(this.nodeValue); //null  }  function trim(str){ var reg = /^\s*|\s*$/g; return str.replace(reg, ""); }  }</script></head><body><center><br> <br> 添加新员工 <br> <br> name: <input type="text"name="name" id="name" />   email: <input type="text"name="email" id="email" />   salary: <input type="text"name="salary" id="salary" /> <br> <br><button id="addEmpButton" value="abc">Submit</button><br> <br><hr><br> <br><table id="employeetable" border="1" cellpadding="5" cellspacing=0><tbody><tr><th>Name</th><th>Email</th><th>Salary</th><th> </th></tr><tr><td>Tom</td><td>tom@tom.com</td><td>5000</td><td><a href="deleteEmp?id=001">Delete</a></td></tr><tr><td>Jerry</td><td>jerry@sohu.com</td><td>8000</td><td><a href="deleteEmp?id=002">Delete</a></td></tr><tr><td>Bob</td><td>bob@tom.com</td><td>10000</td><td><a href="deleteEmp?id=003">Delete</a></td></tr></tbody></table></center></body></html>

3、案例3

<!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(){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 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(){for(var i = 0; i < items.length; i++){items[i].checked = !items[i].checked;}}document.getElementById("send").onclick = function(){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 /> <inputtype="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="全　选" /> <inputtype="button" id="CheckedNo" value="全不选" /> <input type="button"id="CheckedRev" value="反　选" /> <input type="button" id="send"value="提　交" /></form></body></html>

0 0