js DOM 兼容方法
var dom = { 'rspace' : /\s+/g, /** * 检测 浏览器是否支持 HTML5 classList API */ 'hasClassListProperty' : document && Object.prototype.hasOwnProperty.call(document.documentElement,'classList'), /** * [根据 id 获取元素] * @param {[String]} id [id 元素的 id 名称] * @param {[Element]} parent [元素所属的文档对象,默认为当前document] * @return {[Element]} [返回元素] */ 'byId' : function(id, parent){ if ( !parent ) { parent = document; } return parent.getElementById(id); }, /** * [根据 name 获取元素] * @param {[String]} name [元素的 name 属性] * @param {[Element]} parent [元素所属的文档对象,默认为当前文档] * @return {[Element]} [返回元素] */ 'Byname' : function(name, parent) { if ( !parent ) { parent = document; } return parent.getElementsByName(name); }, /** * [根据 tagName 获取元素] * @param {[String]} tagname [元素的 tagname 标签名] * @param {[Element]} parent [元素所属的文档对象,默认为当前document] * @return {[Element]} [返回元素] */ 'ByTag' : function(tagname, parent){ if (!parent) { parent = document; } return parent.getElementsByTagName(tagname); }, /** * [判断节点是否含有某个类名class] * @param {[Element]} node [节点] * @param {[String]} className [class 类名] */ 'hasClass' : function (node, className) { if (!node || !className ) { return false; } return -1 < (' ' + node.className + ' ').indexOf(' ' + className + ' '); }, /** * [根据 className 获取元素] * @param {[String]} className [ 元素的 class 标签名] * @param {[Element]} parent [元素所属的文档对象,默认为当前document] * @param {[String]} tag [元素的 tagname 标签名,默认为 ‘*’ 全部] * @return {[Element]} [返回元素] */ 'ByClass' : function(className, parent, tag){ if (!parent) { parent = document; } if (document.getElementsByClassName) { return parent.getElementsByClassName(className); } else { if (!tag) { tag = '*'; } var elements = this.ByTag(tag, parent); var reslut = []; var len = elements.length; var re = new RegExp('\\b' + className + '\\b'); for (var i = 0; i < len; i++) { if (!elements[i].className) { continue; } if (elements[i].className.match(re)) { reslut.push(elements[i]); } } return reslut; } }, /** * [给节点添加 class] * @param {[Element]} node [节点] * @param {[String]} className [类名] */ 'addClass' : function (node, className) { if ( !node || !className ) { return false; } if ( !node.className ) { node.className = className; } else { var class_list = className.split(dom.rspace); var setClass = node.className; for ( var i = 0 ; i < class_list.length ; i++ ) { if ( setClass.indexOf(class_list[i]) < 0) { setClass += ' ' +class_list[i]; } } node.className = setClass; } }, /** * [给元素移除 class] * @param {[Element]} node [节点] * @param {[String]} className [类名] */ 'removeClass' : function (node, className) { if ( !node || !className ) { return false; } var class_list = className.split(dom.rspace); var setClass = node.className; for ( var i = 0 ; i < class_list.length ; i++ ) { var elem = class_list[i]; node.className = node.className.replace(new RegExp('(?:^|\\s)' + elem + '(?:\\s|$)'), ' '); } node.className = node.className.replace(new RegExp(/^\s*|\s*$/g),''); }, /** * [修改样式] * @param {[type]} target [node 需要修改样式的节点] * @param {[type]} style [string 样式表达式,形如:'margin:5px;color:#fff;'] */ 'parseStyle': function(target, style){ if(!target) { return; } var styles = style.split(';'); for (var i = 0; i < styles.length; i++) { var rule = styles[i].split[':']; if (rule[0] && rule[1]) { target.style[rule[0]] = rule[1]; } } }, /** * [description] 创建节点并且对齐进行一系列操作 * @param {[type]} type 创建的节点类型 * @param {[type]} content 设置创建的节点内的内容 * @param {[type]} attrib 设置创建的节点内的属性 * @param {[type]} nodes 目标节点 * @param {[type]} mode 两个参数 replace or append * @param {[type]} remove_content 布尔值 是否先清空目标节点 */ 'element': function(type, content, attrib, nodes, mode, remove_content) { var tag = document.createElement(type); nodes = typeof nodes != 'object'? (nodes? [nodes] : []) : (nodes.length? nodes : [nodes]); attrib = attrib? attrib : {}; mode = mode == 'replace'? 'replace' : 'append'; var content = typeof content != 'object' && content? document.createTextNode(content) : content; for (var name in attrib) { if (name == 'class') { tag.className = attrib[name]; } else if (name == 'style') { this.parseStyle(tag, attrib[name]); } else { tag.setAttribute(name, attrib[name]); } } if (content) { tag.appendChild(content); } if (nodes.length == 0) { return tag; } for (var i = 0; i < nodes.length; i++) { var node = typeof nodes[i] == 'string'? this.byId(nodes[i]) : nodes[i]; if (!node) { continue; } if (remove_content) { this.empty(node); } if (mode == 'replace') { node.parentNode.replaceChild(tag.cloneNode(true), node); } else { node.appendChild(tag.cloneNode(true)); } } return tag; }, /** * [description] 往指定节点你塞入内容 * @param {[type]} target 目标节点 * @param {[type]} content 可以是字符串或者节点 * @param {[type]} empty 为true时,会先清空该节点;空则不会 * @return node */ 'content': function (target, content, empty){ if (!target) { return; } if (empty) { this.empty(target) } content = typeof content != 'object'? this.text(content) : content; target.appendChild(content); }, /* * [description] 对 原生js createTextNode 包装 */ 'text': function (content){ return document.createTextNode(content); }, /* * 将指定节点清空 */ 'empty': function(target){ if (!target) { return; } while (target.firstChild) { this.remove(target.firstChild); } }, /** * [description] 对 原生js replaceChild 包装 */ 'replace': function(node, target){ try { target.parentNode.replaceChild(node, target); return false; } catch (e) { return false; } }, /** * [description] 对 原生js removeChild 包装 */ 'remove': function(target){ if (!target) { return false; } target.parentNode.removeChild(target); }, /** * [description] 对 原生js insertBefore 方法 包装 */ 'before': function(node, target){ node.parentNode.insertBefore(node, target); }, /** * [description] 模拟 insertAfter 方法 */ 'after': function(node, target){ target.parentNode.insertBefore(node, target.nextSibling); }, /** * 以第一个子元素塞入节点 */ 'first': function(node, target) { if (target.firstChild) { this.before(node, target.firstChild); } else { target.appendChild(node); } }, /** * 克隆目标节点 */ 'clone': function(target, recursive) { return target.cloneNode(recursive); }, /** * 创建一个文档片段 */ 'fragment': function() { return document.createDocumentFragment(); }, /** * 返回目标元素的所有样式 * * @param node el */ 'currentStyle': function(target) { if (!document.defaultView && !document.body.currentStyle) { return false; } var style = target.currentStyle? target.currentStyle : document.defaultView.getComputedStyle(target,''); var s = {}; if (!style) { return null; } if (style.item) { for (var i = 0; i < style.length; i++) { var prop = style.item(i); s[prop] = style.getPropertyValue(prop); } } else { for (var o in style) { s[o] = style[o]; } } return s; }, /** * [description] 向指定元素添加 html * @param {[type]} html html代码 */ 'parseHTML': function(html, target) { var tmp = this.element('div'); tmp.innerHTML = html; var nodes = tmp.childNodes, clone; for (var i = 0, node = null; node = nodes[i]; i++) { clone = this.clone(node, true); target.appendChild(clone); } return (nodes.length > 0); } }