自己动手写了点简单的DOM操作，只是为了更加深刻里面的观念还有浏览器之间的区别
直接上代码
/* basic dom operation * Jackey * 2014-3-28 * ie789 chrome firefox 下测试正常 */ //根据id获取元素 function getById(id) { if (id) { return document.getElementById(id); } return null; } //根据name 获取元素 ie下只有input等表单元素才拥有name,未解决 function getByName(name) { var result = []; var elements = document.getElementsByName(name); for (var i = 0; i < elements.length;i++ ) {//不能用for(var i in elements)因为会把item length 等等属性带出来 if (elements[i].nodeType) { result.push(elements[i]); } } return result; } //兼容 获取name元素 function getByNames(name) { var elements = document.getElementsByTagName("*"); var result = []; for (var i = 0; i < elements.length; i++) { if (elements[i].nodeType == 1 && getAttr(elements[i], "name") == name) { result.push(elements[i]); } } return result; } //根据class获取元素 function getByClassName(className) { if(className) { var elements = document.getElementsByTagName("*"); var result = []; for (var i in elements) { if (elements[i].className == className) { result.push(elements[i]); } } return result; } return null; } //获取样式值 function getCss(obj, styleName) { var realStyle = null; if (obj.currentStyle) realStyle = obj.currentStyle[styleName]; else if (window.getComputedStyle) realStyle = window.getComputedStyle(obj, null)[styleName]; return realStyle; } //设置样式 function setCss(obj,styleName,value) { if (obj) { obj.style[styleName] = value; } } //获取属性 function getAttr(obj, attr) { if (obj) { return obj.getAttribute(attr) ? obj.getAttribute(attr) : null; } } //设置属性 function setAttr(obj, attr, value) { if (obj) { obj.setAttribute(attr,value); } }
测试的页面：
<!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> <title></title> <script src="Jackey.js" type="text/javascript"></script> <style type="text/css"> .father{background-color:yellow; } </style> </head> <body> <div class="father" id="father" mark="mark" style="200px; height:400px;">gfhfh</div> <div name="child" class="div"></div> <input type="text" name="child" class="input"/> <select name="child" class="select"></select> <textarea name="child" class="textarea"></textarea> <textarea name="childs" class="textarea"></textarea> <div class="same">same1</div> <div class="same">same2</div> <div class="same">same3</div> <input class="same" /> </body> <script type="text/javascript"> var father = getById("father"); //getCss测试 var bg = getCss(father, "backgroundColor"); //注意要用backgroundColor var width = getCss(father, "width"); console.log("getCss测试："); console.log("内嵌样式：" + width); console.log("内联样式：" + bg); //ie ：yellow, firefox ，chrome下显示rgb //setCss测试 setCss(father, "width", "400px");//兼容 setCss(father, "color", "white");//兼容 setCss(father, "colorrr", "white");//无报错 setCss(father, "backgroundColor", "red"); //兼容 //getAttr测试 var mark = getAttr(father, "mark"); console.log(mark); //兼容 //setAttr setAttr(father, "mark", "mark1"); //兼容 //getByName测试 ie下拿不到非表单的元素 var names = getByName("child"); var len = names.length; for (var k in names) { console.log("className:"+names[k].className); } //console.log(names[0].className); console.log(len); var t = document.getElementsByName("child"); console.log(t[0].className); //getByClassName 不存在表单和非表单元素的区分 var classs = getByClassName("same"); console.log("classNameTEST:" + classs.length); for(var i in classs){ classs[i].innerHTML = "SAME"; } //getByNames names = getByNames("child"); var len = names.length; for (var k in names) { console.log("className:" + names[k].className); } </script> </html>