关于原生JS获取class,ID等属性的一些封装
一、传统上获取是通过document.getElementById获取元素的ID属性,通过总结与学习总结一下获取元素class以及id属性的一些封装;
1.创建构造函数,这里面不需要多解释什么;(主要本人也是菜鸟一枚);
2.既然有了构造函数,那么我们只需要实例化进行使用,这里面我就不去描述了,直接进行JS库的封装;
下面是获取ID的方法:
Ps:这里面应该不用介绍,通过判断返回指定的值;
3.ID是独一无二的所以使用起来比较不灵活,class类可以是多个或者重复使用,但是传统的JS并没有获取class这个方法,需要自己动手去封装使用,下面我讲封装获取class的方法;
PS:通过上面的定义的就可以正确获取到相应class的元素的集合;
最后---哈哈哈,别问我为什么,可能我也不会,好用就要分享;
关于原生JS获取class,ID等属性的一些封装的更多相关文章
- 原生js获取宽高与jquery获取宽高的方法的关系
说明:1.因为获取高度的情况跟获取宽度的情况一样,所以以下只说获取宽度的情况. 2.以下所说的所有方法与属性所返回的值都是不带单位的. 3.为了方便说明,以下情况采用缩写表示: obj -> ...
- 原生JS的使用,包括jquery和原生JS获取节点、jquery和原生JS修改属性的比较
一.前言 相比于JS这条直达终点.满是荆棘的小路,jquery无疑是康庄大道了,足够的简洁.易用给了它辉煌的地位.然而,毕竟是绕着道的插件,当小路走着走着变成大路的时候,曾经的大路也就失去了他自身的优 ...
- 原生js获取display属性注意事项
原生js获取diaplay属性需要在标签上写行间样式style='display:none/block;' <div style="display:block;">&l ...
- 原生js获取鼠标坐标方法全面讲解-zmq
原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:eve ...
- 原生JS获取DOM 节点到浏览器顶部的距离或者左侧的距离
关于js获取dom 节点到浏览器顶/左部的距离,Jquery里面有封装好的offset().top/offset().left,只到父级的顶/左部距离position().top/position() ...
- 关于Echarts的原生js获取DOM元素与动态加载DOM元素的冲突问题
1.前言: 最近在做的看板项目,因为需要循环加载后台数据,并且用Echarts做数据呈现,所以jQuery和angular等库统统靠边站,Echarts用的是原生js获取DOM元素,至于诸多不兼容等深 ...
- 原生js获取元素的样式信息
工作中经常会需要获取DOM元素的样式,之前都是通过jquery的css()方法,现在总结一下通过原生js获取元素样式的方法. obj.style js var _width = obj.style.w ...
- 兼容各版本浏览器,封装原生Js获取ClassName
web前端开发工作中常常会用到获取元素的className,用jQuery的$(".class")方法也可以获取className,但是有时候牵扯到数据而影响的加载顺序的原因会获取 ...
- js 获取和设置css3 属性值的实现方法
众多周知 CSS3 增加了很多属性,在读写的时候就没有原先那么方便了. 如:<div style="left:100px"></div> 只考虑行间样式的话 ...
随机推荐
- <Android 基础(十四)> selector
介绍 A StateListDrawable is a drawable object defined in XML that uses a several different images to r ...
- Excel 解析 (大文件读取)BingExcel
最近在整理一个excel读取与写出的orm框架.使用的saxreader方式,支持百万级别的excel读取. 并且在通常使用中提供了监听的读取方式.如感兴趣的朋友可以稍微了解下 ,项目地址https: ...
- Node.js-npm安装包目录修改
请借我一个哭的表情....=.= 等我发现的时候为时已晚~所有安装的包都去了C盘,而强迫症的我想卸载了之前所有的包再重新下一遍!!! 切记!安装好npm后,记得修改: 原始路径: 修改后的路径(如果没 ...
- May 6th 2017 Week 18th Saturday
A great ship asks deep water. 巨轮寻深水而航行. A great ship needs deep water so as to get enough buoyancy t ...
- PHP @ at 记号的作用
看PHP的代码,总有些行前边有@符号,一直不知道是什么意思. 例如dede5.7 @$ni=imagecreatetruecolor($ftoW,$ftoH); 今天用到了,就记一下吧.其实它 ...
- 官方发布PHP语法规范
PHP语言已经存在了超过20年,显然是世界上最流行的编程语言之一.PHP绝对是互联网服务器端web编程的通用语. 虽然有广泛的user-documentation,PHP语言总是错过语言规范.这并不是 ...
- c# 语法 字符串内插
结果截屏 参考文章 https://www.cnblogs.com/csproj/p/Interpolated_Strings.html c# 6.0语法 https://www.cnblogs.co ...
- 通过redis实现的一个抢红包流程,仅做模拟【上】
建议结合下一篇一起看 下一篇 数据结构+基础设施 数据结构 这里通过spring-data-jpa+mysql实现DB部分的处理,其中有lombok的参与 @MappedSuperclass @Dat ...
- 开发者不容错过的10款免费JavaScript游戏引擎
摘要:使用HTML5.JavaScript可以帮助开发者开发出各种与众不同的游戏及游戏特效,比如3D动画.Canvas等.本文介绍10款被广泛使用的基于HTML5的JavaScript游戏引擎. 在G ...
- Onboard,迷人的引导页样式制作库
简介 Onboard主要用于引导页制作,源码写的相当规范,值得参考. 项目主页: https://github.com/mamaral/Onboard 实例下载: https://github.com ...