原生JS实现的DOM操作笔记(草稿整理)

原生JS实现的DOM一系列操作参考:

  • 原生JavaScript封装DOM库
  • siblings: 原生JS-查找相邻的元素-siblings方法的实现
  • addClass,removeClass,hasClass,toggleClass:原生js添加删除class
  • 原生js添加删除class

代码如下:

var dom = {
/** 功能说明:匹配元素是否含有指定class
* @param el 指定的DOM元素
* @param className 匹配的class名
* */
hasClass:function(el,className){
return el.className.match(new RegExp('(\\s|^)'   className   '(\\s|$)')); 
},
/** 功能说明:给指定DOM元素添加class
* @param el 指定的DOM元素
* @param className 添加的class名
* */
addClass:function(el,className){
if(!this.hasClass(el,className)){
el.className  = " "   className;
}
return el;
},
/** 功能说明:给指定DOM元素移除class
* @param el 指定的DOM元素
* @param className 移除的class名
* */
removeClass:function(el,className){
if(this.hasClass(el,className)){
var reg = new RegExp('(\\s|^)'   className  '(\\s|$)');
el.className = el.className.replace(reg,' ')
}
return el;
},
/** 功能说明:给指定的DOM元素添加或者删除class
* @param el 指定的DOM元素
* @parm className 添加或删除的class名
* */
toggleClass:function(el,className){
if(this.hasClass(el,className)){
this.removeClass(el,className);
}else{
this.addClass(el,className);
}
return el;
},
/** 功能说明:获取当前元素的兄弟节点
* @param el 当前DOM元素
* */
siblings:function(el){
var matched = []; //存放兄弟节点
var n = (el.parentNode || {}).firstChild;
for(; n; n = n.nextSibling){
if(n.nodeType === 1 && n !== el){
matched.push(n);
}
}
return matched;
}
};

 


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/366124.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

简单的Gradle Java插件自定义

正如我在“ 用Gradle构建Java的初步了解”一文中所展示的那样,当人们使用Java插件并将文件和目录放置在该插件期望的位置时, Gradle尤其适用于构建Java应用程序的基础知识(惯例-基于项目的布局 )。 但是,并非总是有一种…

k8s 重点

这几个月参与了几场面试,设计了多道面试题,觉得可以综合考察应聘人对 kubernetes的掌握情况。在这里分享下,供应聘人自查以及其他面试官参考。 这些面试题的设计初衷并不是考察 kubernetes 的使用。这种笔者认为较为流于表面,因为…

python中print的用法_python中print用法

print用法 参考文档: https://blog.csdn.net/sinat_28576553/article/details/81154912 目录 一、print()函数概述 二、变量的输出 三、数据的格式化输出 3.1 %字符 3.2 最小字段宽度和精度 3.3 转换标志 3.4 格式字符归纳 四、换行与防止换行 一、print()函数概述 …

java 播放.pcm文件,java播发PCM文件

java播放PCM文件import java.io.File;import java.io.FileInputStream;import java.io.FileNotFoundException;import java.io.IOException;import java.io.InputStream;import javax.sound.sampled.AudioFormat;import javax.sound.sampled.AudioSystem;import javax.sound.sa…

02 re模块

# re的工作是在python中执行正则表达式 import re# # find # result re.findall("\d", "baby的电话号是: 185123456789") # print(result) # # it re.finditer("\d", "baby123456789的电话号是: 185123456789") # for el in it: # …

网页中二维码识别规则

识别规则 这里采用的逻辑是截屏识别,当客户端发现用户在网页的img标签内进行长按操作时,会立刻截屏并且启动二维码识别算法。所以这里用于二维码识别的图片是截屏,而不是之前有人提到的img标签中的图片。 为什么要用截屏,这也是…

使用Mockito测试Spring组件

我认为,能够对弹簧组件进行单元测试而无需使用临时测试配置加载完整的弹簧上下文,这是一个很大的优势,因为它干净,易于维护,编写速度更快,更改平滑。 实现此目标的一种方法是使用Mockito并告诉他用Mocks &…

python数字转换_Python实现中文数字转换为阿拉伯数字的方法示例

本文实例讲述了Python实现中文数字转换为阿拉伯数字的方法。分享给大家供大家参考,具体如下: 一、需求 今天写了三千二百行代码。 今天写了3200行代码。 两行意思相同,只是表达方式不太能够,统一掉。 二、原理 数字的特征是 数字 …

LeetCode第14题:最长公共前缀

题目描述 编写一个函数来查找字符串数组中的最长公共前缀。 如果不存在公共前缀,返回空字符串 ""。 示例 1: 输入: ["flower","flow","flight"] 输出: "fl" 示例 2: 输入: ["dog","racecar"…

臭名昭著的sun.misc.Unsafe解释

Java虚拟机的最大竞争对手可能是托管C#等语言的Microsoft CLR 。 CLR允许编写不安全的代码作为低级编程的入口,这在JVM上很难实现。 如果您需要Java中的此类高级功能,则可能会被迫使用JNI ,这需要您了解一些C并Swift导致代码紧密耦…

主从复制

五 主从复制 Replication(重要!!!!!!) 5.1、介绍 基于主库二进制日志实时恢复到备库。 5.2、原理 5.2.1 主从复制的前提 (1)两台或两台以上数据库实例 (2)主库…

手机号正则表达 php,php 手机号码正则表达试程序代码_PHP教程

代码如下function funcMtel($str)//手机号码正则表达试{return (preg_match(“/(?:13d{1}|15[03689])d{8}$/”,$str))?true:false;}测试18678785887返回为false原因分析,查看了发现上面正则只能验证以13,15开头的,自然18开头的是不可以用的修改后代码如…

python输出格式控制_Python3.x那些事儿:[50]多种多样的输出格式

目前有两种方式来格式化输出格式,第一种就是自己动手来进行字符串的操作,虽然麻烦,但是都能实现。第二种方式就是使用str.format()函数。 string模块包含了一个Template类,这个类提供了把值替换成字符串的方法。 python提供把任意…

暑假第十五测

题解: 第一题: 20%枚举长度和每个子串,O(len)判断,随机情况复杂度可过 40%同样枚举长度,然后两个指针卡出区间,O(1)[或O(26)//可能可过?]判断 50%既然知道了40%的做法那…

扩展Spring Batch –步骤分区

在之前的几篇文章中,我们已经讨论了如何启动和运行Spring Batch。 现在,我们将开始讨论可用于扩展Spring Batch的一些策略。 本文将重点介绍如何对步骤进行分区,以使该步骤具有多个线程,每个线程并行处理一块数据。 如果您有大量…

zabbix磁盘的自动发现与磁盘指标监控

由于最近项目上需要对服务器监控进行规范化监控,再磁盘这块有几种方式 1.如果每台设备的磁盘是一样的 比如都有vda,vdb两块磁盘那么可以采用 1.1 每台客户端写脚本,服务端每台设备去加上监控项(------最次的手段-------------) 1.…

[代码笔记]VUE路由根据返回状态判断添加响应拦截器

//返回状态判断(添加响应拦截器)Axios.interceptors.response.use(res > {//对响应数据做些事if (res.data && !res.data.success) {Message({// 饿了么的消息弹窗组件,类似toastshowClose: true,message: res.data.error.message.message? res.data.error.messag…

php前台用户权限开通,vue实现网站前台的权限管理

本文主要介绍了基于vue实现网站前台的权限管理(前后端分离实践),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。Javascript做为当下的热门语言,用途很广泛&#xff0c…

一种替代的多生产者方法

最近在InfoQ上,Aliasei Papou发表了一篇关于他的一些实验的文章 ,该实验在线程之间进行了高性能的消息交换。 本文中有许多示例,但我将重点介绍多生产者案例。 文章显示的一种优化方法是,如果您知道初始化时拥有的生产者数量&…

maven连接国内仓库

<mirrors> <!-- 阿里云仓库 --> <mirror> <id>alimaven</id> <mirrorOf>central</mirrorOf> <name>aliyun maven</name> <url>http://maven.aliyun.c…