OOP & DOM


let Dom = Dom || {};
Dom = {
checkValType(val) {
let typeString = Object.prototype.toString.call(val);
switch (typeString) {
case '[object String]':
return 'String';
case '[object Boolean]':
return 'Boolean';
case '[object Function]':
return typeof val === 'symbol' ? 'Symbol' : 'Function';
case '[object Array]':
return 'Array';
case '[object Error]':
return 'Error';
case '[object Date]':
return 'Date';
case '[object RegExp]':
return 'RegExp';
case '[object Object]':
return 'Object';
case '[object Null]':
return 'Null';
case '[object Underfined]':
return 'Underfined';
default:
break;
}
},
setStyle(elem, obj) { //批量设置样式,elem要设置的元素,obj={'height':'5px','color':'red'}等样式集合
for (let key in obj) {
elem.style[key] = obj[key];
}
return this; //返回上下文方便链式调用
},
getStyle(elem, styleName, pseudoElt = null) { //pseudoElt伪元素例如getStyle(ele,'height',':after'),这样就匹配ele伪元素的样式
return (window || document.defaultView).getComputedStyle(elem, pseudoElt)[styleName];
},
addClass(elem, className) {
if (this.checkValType(className) === 'String') { //单个时传入字符串
elem.classList.add(className);
} else if (this.checkValType(className) === 'Array') { //多个时传入数组
elem.classList.add(...className);
}
return this;
},
removeClass(elem, className) {
if (this.checkValType(className) === 'String') { //单个时传入字符串
elem.classList.remove(className);
} else if (this.checkValType(className) === 'Array') { //多个时传入数组
elem.classList.remove(...className);
}
return this;
},
hasClass(elem, className) {
if (this.checkValType(className) === 'String') { //单个时传入字符串
elem.classList.contains(className);
} else if (this.checkValType(className) === 'Array') { //多个时传入数组
elem.classList.contains(...className);
}
return this;
},
toggleClass(elem, className) { //只操作单个class
elem.classList.toggle ? elem.classList.toggle(className) : (this.hasClass(elem, className) ? this.removeClass(elem, className) : this.addClass(elem, className));
return this;
},
siblings(elem){
let matched=[];
let n = (elem.parentNode || {}).firstChild;
for(;n;n= n.nextSibling){
if(n.nodeType===1&&n!==elem){
matched.push(n);
}
}
return matched;
},
sibling(cur,dir){//工具函数
while((cur=cur[dir])&&cur.nodeType!==1){}
return cur;
},
next(elem){
return this.sibling(elem,"nextSibling");
},
prev(elem){
return this.sibling(elem,"previousSibling");
} };

OOP & DOM的更多相关文章

  1. js基础例子dom+原型+oop基础知识记录01

    //oo:概念是计算机中对于现实世界的理解和抽象的方法 //由计算机利用编程技术发展到现在的产物 //面向对象几要素 //对象:由属性和方法组成的集合 //属性:保存数据,存储在对象内存空间中的唯一的 ...

  2. oop的三大特性和传统dom如何渲染

    OOP的三大特性是什么: 封装 :就是将一个类的使用和实现分开,只保留部分接口和方法与外部联系继承:子类自动继承其父级类中的属性和方法,并可以添加新的属性和方法或者对部分属性和方法进行重写.继承增加了 ...

  3. 面向对象的OOA、OOD、OOP

    OOA Object-Oriented Analysis:面向对象分析方法 是在一个系统的开发过程中进行了系统业务调查以后,按照面向对象的思想来分析问题.OOA与结构化分析有较大的区别.OOA所强调的 ...

  4. OOP感想

    OOP是面向对象编程(Object Oriented Programming).集于一身,最终目的是各司其职,让每个职责的只关注自己那块,其他的不管丢给下一个人.比如说,一个页面,对于客户,只要能看到 ...

  5. DOM(四)事件流

    1.冒泡型事件 浏览器的事件模型分两种:捕获型事件和冒泡型事件.由于ie不支持捕获型事件,所以以下主要以冒泡型事件作为讲解.(dubbed bubbling)冒泡型指事件安装最特定的事件到最不特定的事 ...

  6. OOA/OOD/OOP(了解)

    Object-Oriented Analysis:面向对象分析方法 是在一个系统的开发过程中进行了系统业务调查以后,按照面向对象的思想来分析问题.OOA与结构化分析有较大的区别.OOA所强调的是在系统 ...

  7. OOA、OOD、OOP

      复习 OOA.OOD.OOP OOA Object-Oriented Analysis:面向对象分析方法 是在一个系统的开发过程中进行了系统业务调查以后,按照面向对象的思想来分析问题.OOA与结构 ...

  8. 复习面向对象的OOA、OOD、OOP

    复习 OOA.OOD.OOP OOA Object-Oriented Analysis:面向对象分析方法 是在一个系统的开发过程中进行了系统业务调查以后,依照面向对象的思想来分析问题. OOA与结构化 ...

  9. OOA/OOD/OOP(转)

    OOA Object-Oriented Analysis:面向对象分析方法 是在一个系统的开发过程中进行了系统业务调查以后,按照面向对象的思想来分析问题.OOA与结构化分析有较大的区别.OOA所强调的 ...

随机推荐

  1. POJ 2718 Smallest Difference(dfs,剪枝)

    枚举两个排列以及有那些数字,用dfs比较灵活. dfs1是枚举长度短小的那个数字,dfs2会枚举到比较大的数字,然后我们希望低位数字的差尽量大, 后面最优全是0,如果全是0都没有当前ans小的话就剪掉 ...

  2. Redis(5.0.0)持久化AOF和 RDB 结合源码分析

    主要是挖个坑.候补(代码还没看完..) https://github.com/antirez/redis/tree/5.0 一.Redis保存持久化文件 二.Redis启动加载持久化文件 src/se ...

  3. 动态规划专题(五)——斜率优化DP

    前言 斜率优化\(DP\)是难倒我很久的一个算法,我花了很长时间都难以理解.后来,经过无数次的研究加以对一些例题的理解,总算啃下了这根硬骨头. 基本式子 斜率优化\(DP\)的式子略有些复杂,大致可以 ...

  4. Matlab 中实用数据结构之 containers.Map

    概要   熟悉 Python 的都知道字典 Dict 类型数据结构功能的强大,Matlab 中虽然有表结构,但是其列名必须是亦变量名类型的字符串,如果我想用数字开头的字符串作键值,其表结构就无能为力了 ...

  5. Linux环境下使用xampp配置php开发环境

    XAMPP (Apache+MySQL+PHP+PERL)是一个功能强大的建站集成软件包.这个软件包原来的名字是LAMPP,但是为 了避免误 解,最新的几个版本就改名为 XAMPP 了.它可以在Win ...

  6. 问题004:如何在windows中打开命令行,有几种方法?

    第一种方法:按快捷键 Win+R (run),然后运行框中输入cmd. 第二种方法:开始菜单-->运行-->然后运行框中输入cmd. 第三种方法:在附件当中,找命令行选项即可.

  7. 【Python学习之七】面向对象高级编程——使用@property

    参考来自廖雪峰Python教程:https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000/ ...

  8. win 系统下制作U盘安装 linux系统

    win 系统制作U盘安装硬盘镜像用ultraiso_v9.5.3.2901将Centos.iso写进U盘.安装过程全程区分大小写.过低的ultraiso不能正确读取文件.本文所有资料均能在网上免费下载 ...

  9. Python 正则表达式 search vs match

    search()和match()函数都是正则表达式中的匹配函数,二者有何区别呢? 1.match()从string的开始位置进行正则匹配,即从0位置开始匹配,若匹配上则返回一个match对象,否则返回 ...

  10. tcl之list操作-lappend/lsearch/lsort/concat/split/join/