一、前言
因为一个很小的项目或者说几个页面却要搭上Jquery，当然很不值，gzip下，好歹也有小几十K。为了能够方便的操作Dom，我们需要写很多兼容性的原生JS。就在我看leaflet的源码的时候，我觉得它的DomUtil写的还是不错的。
二、具体的代码分析
首先，我们定义一个类，var DomUtil = { functionName: function(){ } }; 以下均已字面量的形式表示。
（1）get: 获取一个元素
get: function (id) { return
typeof id === 'string' ? document.getElementById(id) : id; }
很简单吧，只是粗略的返回是元素或者传进来的参数。
（2）getStyle:获取元素的样式
getStyle: function (el, style) {
//IE: currentStyle
//firefox: defaultView
var value = el.style[style] (el.currentStyle && el.currentStyle[style]);
if ((!value value === 'auto') && document.defaultView) {
var css = document.defaultView.getComputedStyle(el, null);
value = css ? css[style] : null;
}
return value === 'auto' ? null : value;
}
（3）create：创建一个元素（可以将其放入父元素）
//创建一个元素（可以将其放入父元素） create: function (tagName, className, container) { var el = document.createElement(tagName); el.className = className; //是否存在父容器 if (container) { container.appendChild(el); }
return el; }
（4）remove：移除元素
//移除元素 //先获取父元素，然后父元素移除子元素 remove: function (el) { var parent = el.parentNode; if (parent) { parent.removeChild(el); } }
（5）empty：清空元素内部子元素
//清空元素内部子元素 empty: function (el) { while (el.firstChild) { el.removeChild(el.firstChild); } }
（6）toFront：将元素取出放在队尾或者说是叠加层的最上面，就像加饼一样，一层一层往上放，但是如果引用的是同一个元素，则在父容器中有且仅存在一个元素。
//置于顶上
toFront: function (el) {
el.parentNode.appendChild(el);
}
（6）toBack：置于队首或者叠加层底部。
//置于底部
toBack: function (el) {
var parent = el.parentNode;
//insertBefore：insertBefore(newchild,refchild)
parent.insertBefore(el, parent.firstChild);
}
（7）hasClass：是否有CSS样式
//返回class集合
getClass: function (el) {
return el.className.baseVal === undefined ? el.className : el.className.baseVal;
}
className.baseVal是获取SVG的一个方法，className是获取带空格类名的集合。
//是否有CSS类
hasClass: function (el, name) {
//先判断是否支持了classList，classList包含了has、add、remove等方法
if (el.classList !== undefined) {
return el.classList.contains(name);
}
var className = L.DomUtil.getClass(el);
return className.length > 0 && new RegExp('(^\\s)' + name + '(\\s$)').test(className);
}
上面代码第8行，用正则test测试字符串是否含有此模式。
（8）addClass：增加类样式
//设置class setClass: function (el, name) { if (el.className.baseVal === undefined) { el.className = name; } else { // in case of SVG element el.className.baseVal = name; } }
//增加类串
addClass: function (el, name) {
if (el.classList !== undefined) {
var classes = L.Util.splitWords(name);
for (var i = 0, len = classes.length; i < len; i++) {
//调用classList的add
el.classList.add(classes[i]);
}
} else if (!L.DomUtil.hasClass(el, name)) {
var className = L.DomUtil.getClass(el);
//setClass,覆盖之前的类串
L.DomUtil.setClass(el, (className ? className + ' ' : '') + name);
}
}
（9）removeClass：移除class
//移除class removeClass: function (el, name) { if (el.classList !== undefined) { el.classList.remove(name); } else { //以字符串的形式替换 L.DomUtil.setClass(el, L.Util.trim((' ' + L.DomUtil.getClass(el) + ' ').replace(' ' + name + ' ', ' '))); } }
（10）设置透明度
//设置透明度
setOpacity: function (el, value) {
//如果存在opactity的属性
if ('opacity' in el.style) {
el.style.opacity = value;
} else if ('filter' in el.style) {//存在filter
var filter = false,
filterName = 'DXImageTransform.Microsoft.Alpha';
// filters collection throws an error if we try to retrieve a filter that doesn't exist
try {
filter = el.filters.item(filterName);
} catch (e) {
// don't set opacity to 1 if we haven't already set an opacity,
// it isn't needed and breaks transparent pngs.
if (value === 1) { return; }
}
value = Math.round(value * 100);
if (filter) {
filter.Enabled = (value !== 100);
filter.Opacity = value;
} else {
el.style.filter += ' progid:' + filterName + '(opacity=' + value + ')';
}
}
}
以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索el
， function
， js json el
， 元素
， name
， value
， classname
， js获取元素classname
， leaflet
， 移除name
移除CSS类
js dom操作、angularjs操作dom元素、angularjs dom操作、vuejs操作dom项目例子、vue.js dom操作，以便于您获取更多的相关知识。