JavaScript欲速则不达—DOM

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


本文源链接:http://www.html5jscss.com/javascript-dom.html

转载请注明《JavaScript欲速则不达—DOM》| html5jscss

评论关闭了.