7.操作节点

来源：互联网发布：新理念网络教学平台编辑：程序博客网时间：2024/06/11 09:39

节点替换

1). replaceChild(): 把一个给定父元素里的一个子节点替换为另外一个子节点
var reference = element.replaceChild(newChild,oldChild);
返回值是一个指向已被替换的那个子节点的引用指针
2). 该节点除了替换功能以外还有移动的功能.
3). 该方法只能完成单向替换, 若需要使用双向替换, 需要自定义函数:

/** * 互换 aNode 和 bNode * @param {Object} aNode * @param {Object} bNode */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);}}}

插入节点

1). insertBefore(): 把一个给定节点插入到一个给定元素节点的给定子节点的前面
var reference = element.insertBefore(newNode,targetNode);
节点 newNode 将被插入到元素节点 element 中并出现在节点 targetNode 的前面. 节点 targetNode 必须是 element 元素的一个子节点。

2). 自定义 insertAfter() 方法

       /** * 将 newChild 插入到 refChild 的后边 * @param {Object} newChild * @param {Object} refChild */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);}}}

删除节点

1). removeChild(): 从一个给定元素里删除一个子节点
var reference = element.removeChild(node);
返回值是一个指向已被删除的子节点的引用指针. 某个节点被 removeChild() 方法删除时, 这个节点所包含的所有子节点将同时被删除.
如果想删除某个节点, 但不知道它的父节点是哪一个, parentNode 属性可以帮忙。

参考代码：

<!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>

0 0