getAttribute,appendChild,removeChild,replaceChild,insertBefore 自定义函数

来源：互联网发布：mysql create user 编辑：程序博客网时间：2024/06/15 22:08

标题中的三个函数的优化:

1.getAttribute 因getAttribute在IE与Firefox上有会区别,比如class,for上面,获取到的值不一样

2.appendChild只能每次添加一个,不能添加多个

3.removeChild只能每次移除一个,不能移除多个

4.replaceChild,insertAfter(与insertBefore对应)

为了兼容,因此创建此函数:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>test</title> <script language="javascript"> window.onload = function() {var op = document.getElementById('op');var header= document.getElementById('header');var div1 = document.createElement("div");div1.innerHTML="DIV1";var div2 = document.createElement("div");div2.innerHTML="DIV2";var div3 = document.createElement("div");div3.innerHTML="DIV3";//如下为获取节点op的class属性,IE/Firefox均可得到 base,调用函数getAttr()alert(getAttr(op,"class"));         //如下为将div1,div2,div3三个DIV添加到document.body中,调用函数append()append(document.body,div1,div2,div3);         //如下为将div1,div2,div3三个DIV移除从document.body中,调用函数delNode()delNode(div1,div2,div3);//如下,将节点op换成新的div1,op为原节点,div1为新节点,调用函数replaceNode()replaceNode(op,div1);         //如下,将div1节点插入到header节点之后,调用函数insertAfter()insertAfter(header,div1);};function insertAfter(node,newNode) {//将newNode插入到node之后//如果node有下一个节点,newNode插入到node.nextSibling的前面//如果node没有下一个节点,newNode插入到node.parentNode.appendChild的后面var pn = node.parentNode;if (node.nextSibling) {pn.insertBefore(newNode,node.nextSibling);} else {pn.appendChild(newNode);}return newNode;}function replaceNode(replaced,newNode) {replaced.parentNode.replaceChild(newNode,replaced);}function each(arr,fn) {for (var i=0;i<arr.length;i++) {fn(arr[i],i);}}function delNode() {/*for (var i=0;i<arguments.length;i++) {arguments[i].parentNode.removeChild(arguments[i]);}*/each(arguments,function(node){node.parentNode.removeChild(node);});}function append(node) {for (var i=1;i<arguments.length;i++) {node.appendChild(arguments[i]);}return node;}var specialNames={"class":"className","for":"htmlFor"};function getAttr(node,attrName) {var attr = node.getAttribute(attrName);if (attr == null) {if (attrName in specialNames) {attrName = specialNames[attrName];attr = node.getAttribute(attrName);}}return attr}</script> </head> <body><h1 id="header">TEST</h1><p id="op" class="base">第一段</p></body> </html>