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);
}
}