JavaScript封装——封装获取元素的函数

最新推荐文章于 2021-07-29 18:05:48 发布
最新推荐文章于 2021-07-29 18:05:48 发布
阅读量984 收藏 2
点赞数
分类专栏： my js 文章标签： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wing_annuan/article/details/103265998
版权
本文介绍了如何在JavaScript中封装函数以实现通过id、class名或标签名高效地获取DOM元素。详细阐述了三种不同的参数形式：id名、class名和标签名。
摘要由CSDN通过智能技术生成

封装获取元素的函数

函数的实参形式
1、#id 通过id名获取元素
2、.class名 通过class名获取元素
3、ele 通过标签名获取元素

<script>

      function getEle(ele) {
   
        //substr（参数1，参数2）
        //参数1表示开始的索引
        //参数2表示截取个数，如果没有参数2表示从开始位置截取到最后
        var str1 = ele.substr(0,
最低0.47元/天 解锁文章
君绾
关注
专栏目录
JS封装通过className获取元素的函数示例
10-20
封装函数的基本思路是使用`document.querySelectorAll`或者`document.getElementsByClassName`等DOM操作方法来获取目标元素。但是本文中，提供了使用`getElementsByTagName`方法结合数组操作来实现的方法，这种方法...
JS简单实现获取元素的封装操作示例
12-10
本文实例讲述了JS简单实现获取元素的封装操作。分享给大家供大家参考，具体如下： JS封装获取元素 js的获取元素： ID：document.getElementById(); class:document.getElementsByName()[]; Tag:document.getElementsByTagName()[] 现在我们要简单的封装这个 1. 函数写法： function $(id){ return document.getElementById(); } 其他类同 使用方法： $(id) /$(tagname)[0] 2. 对象写法： var Base={ ge
封装元素获取函数
diaopin2662的博客
05-10 317
封装元素获取函数 目的：JS中获取id名，类名，标签名的元素往往使用： document.getElementbyId("idName"); document.getElementsbyTagName("tagName"); document.getElementsbyClassName("className"); 在这里注意到Element在id处使用单数，其他两处是复数。可以理解为i...
封装函数八（获取指定元素的class/id）
_小郑有点困了的博客
08-22 306
封装函数八（获取指定元素的class/id） function query(selector){ // 字符串 indexOf() if(selector.indexOf("#") >-1){ var str = selector.slice(1); // console.log(selector , ‘---->’,str); // 获取指定id的元素 return documen...
JS封装通过className获取元素的函数
NINE-NINE的博客
04-28 1684
JS封装通过className获取元素的函数
封装一个名字为$的函数，用于获取元素
MIng__4791的博客
04-18 1606
封装一个名字为$的函数，用于获取元素，主要能够实现以下功能： 根据id获取元素，如：$(“#container”) 用于获取id名为container的DOM元素。 根据类名获取元素，如：$(“.active”) 用于获取所有class名为active的DOM元素 根据标签名获取元素，如：$(“div”) 用于获取所有标签名为div的DOM元素 根据name属性获取元素，如：$(“name
Javascript封装id、class与元素选择器方法示例
10-20
以上即为文章中介绍的Javascript封装id、class与元素选择器方法的知识点。通过封装，我们可以简化DOM操作，使得代码更加清晰和易于管理。此外，通过示例代码的讲解，能够帮助读者更好地理解封装的实现过程，提升他们...
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
10-15
在实际应用中，这些封装函数可以大大简化JavaScript动画的编写。例如，你可以用它们来创建平滑的页面滚动、元素淡入淡出效果，或是复杂的游戏动画。为了适应不同的场景，你还可以添加更多的参数，比如缓动函数（ease...
自己封装的常用javascript函数分享
10-24
3. 获取DOM元素的封装函数 - `getByClass(oParent, sClass)`：根据给定的父级元素和类名字符串`sClass`，通过正则表达式匹配所有具有该类名的子元素，并返回包含这些子元素的数组。 4. 随机数生成函数 - `rnd(n, ...
通过javascript封装一个getType函数能够获取所有不同的数据类型，例如Symbol，null，object等
weixin_46198981的博客
07-29 790
通过javascript封装一个getType函数能够获取所有不同的数据类型，例如Symbol，null，object等 1、javascript代码 const getType = data => { // 先判断该数据是否是基本数据类型，成立则将其类型返回 if (typeof data !== 'object') return typeof data // 获取该数据的数据类型 const data_type = Object.prototype.toString.call(da
js的常用封装函数库之获取元素的css属性
浮生离梦的博客
05-27 268
js的常用封装函数库之获取元素的css属性： /* * 函数功能： 获取元素的css属性 * obj: 操作的元素 * attr: 查询的css属性 */ function css(obj,attr){ // 兼容IE if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ /...
如何通过封装函数，然后利用className获取元素
weixin_43947715的博客
07-29 382
利用className获取元素 通过className改变子元素的样式，老规矩，这里通过ul li 给大家举例 JavaScript部分 <script type="javascript"> window,onload=function(){ var oUl=document.getElementById('ul1'); //获取ul的元素 var oLi=oUl....
获取元素位置函数
Y_东东的博客
05-28 465
function getRec(ele) { var _t = document.documentElement.clientTop, _l = document.documentElement.clientLeft, rect = ele.getBoundingClientRect(); return { top: rect.to...
js获取元素通用函数
divi
04-27 220
/**  * 通用函数.  * 1、可以通过ID获取元素  * 2、可以通过class获取元素【是个数组】  */ function g(selector) { var method = selector.sub(0, 1) == '.' ? 'getElementByClassName' : 'getElementById'; return document[method](su...
封装一个通过class获取元素的方法--我的JS原生库（1）
weixin_30316097的博客
05-11 145
1 function getByClass(oParent,sClass){ 2 var aEle = oParent.getElementsByTagName('*'); 3 var result = []; 4 var re = new RegExp('\\b' + sClass + '\\b','i'); 5 6 ...
2.2、封装一个获取元素的样式的方法
bin_2659017380的博客
10-03 219
一、设置和获取行内的样式 <div id="box"></div> <script> //设给元素置样式 (注意这设置的是行内样式) var obox = document.getElementById('box') obox.style.width = '200px'; obox.style.height = '200px';...
原生js封装元素运动函数
翾的博客
12-22 1138
首先看看演示效果 代码, 函数参数obj为当前想要变动的元素, changeData为想要变动的种类, 例如, func为元素动作结束后想要处理的函数例如向上面那个演示, 注意: opacity要乘以100, 原因见如下代码var div = document.getElementsByClassName('demo')[0]; startMove(div, {width:200 ,
Dom--获取元素的三种方式
BarryLee的博客
07-10 3743
Dom即document，是指显示网页内容的部分，也就是这一块：有三种方式来获取其中的元素，反别是getElementById, getElementsByTagName, getElementsByName&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;dom-获取...
JavaScript封装弹出层函数
在这个代码示例中，作者创建了一个名为`Hongru`的对象，并定义了一个`$`函数，用于获取页面上的DOM元素，类似于jQuery库中的`$`选择器。`$`函数通过`document.getElementById`实现，这使得我们可以像这样方便地获取...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值