JS-进阶-JS DOM常用的节点操作

本章节主要介绍下JS DOM常用的节点操作

1：创建节点： 创建元素节点：var liNode = document.createElement("li"); 创建属性节点：现需要创建一个元素节点，在通过.的方式为其属性赋值 var aNode = document.createElement("a"); aNode.href = "deleteEmp?id=xxx"; 创建文本节点：var xmText = document.createTextNode("中京"); 新创建的节点不会自动加入到文档树的人任何位置需要调用节点的appendChild()方法2：加入节点：appendChild(newChild);var liNode = document.createElement("li");var content = document.createTextNode(textValue);liNode.appendChild(content);document.getElementById(typeVal).appendChild(liNode);3:删除节点var reference = element.removeChild();返回值是一个指向已被删除的子节点的引用指针;某个节点被removeChild();方法删除时，这个节点包含的所有子节点全部被删除；如果想删除某个节点，但又不知道父节点是哪个，可以使用parentNode属性；4：节点替换var reference = replaceNode(newNode,oldNode);把一个元素的子节点替换为另一个元素的子节点，返回值是一个指向已被替换的那个子节点的引用指针；2，该节点除了替换以外，还有替换功能；3：该函数只能完成单向替换，若要使用双向替换，需要自定义函数；典型实现：var bjNode = document.getElementById("bj");var appleNode = document.getElementById("apple");replaceNode(bjNode,appleNode);节点互换：    function replaceNode(Node00 , Node01){var aParent = Node00.parentNode;var bParent = Node01.parentNode;if(aParent&&bParent){var cloneNewNode00 = Node00.cloneNode(true);bParent.replaceChild(cloneNewNode00,Node01);aParent.replaceChild(Node01,Node00);}}5：插入节点：inserBefore(newNode,oldNode);1：newNode是文档中的节点，也具有移动节点的功能；代码：var cityNode = document.getElementById("city");var xjNode = document.getElementById("xj");var appleNode = document.getElementById("apple");cityNode.insertBefore(appleNode, bjNode);2：自己实现insertAfter(newNode,oldNode);将新节点插入到老节点的后边；function insertAfter(newNode,refNode){var parentNode = refNode.parentNode;if(parentNode){var lastNode = parentNode.lastChild;if(refNode==lastNode){parentNode.appendChild(newNode);}else{var nextNode = refNode.nextSibling;parentNode.insertBefore(newNode,nextNode);}}}6：innerHtml属性，浏览器几乎都支持该属性，但不是Dom标准的组成部分，innerHtml属性可以用来读，写给定元素的HTMl内容；var cityNode = document.getElementById("city");var gameNode = document.getElementById("game");alert(cityNode.innerHTML);var tempInnerHtml = cityNode.innerHTML;cityNode.innerHTML = gameNode.innerHTML;gameNode.innerHTML = tempInnerHtml;