首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

js获取节点方法的封装

js获取元素节点的常用的方法有:

1、getElementById -- (根据元素id来获取)

2、getElementsByTagName -- (根据标签来获取)

3、getElementsByClassName -- (根据元素class来获取)

除了这三个还有querySelectorAll()和querySelector()等方法。每次使用原生js获取元素都需要写一大串代码才能获取,一次两次还可以,如果是在几百行代码里,重复写这一大串代码,会显得十分繁琐,因此我们可以封装起来。

一、函数式封装

代码:

调用示例:

ps:函数式编程较为简单,在一定程度上减少了代码量

二、对象式编程

1、构造一个函数

2、利用原型链prototype给这个函数添加三个方法

3、调用示例:

控制台打印结果:

ps:可以清楚的看到在这个对象的原型链上添加到三个方法

4、获取节点调用示例:

控制台打印结果:

ps:获取到id为bb的元素节点,其他方法的调用如同。

5、每次调用都需要new一个Base对象,声明一次变量,非常的不方便,可以使用这种方式

ps:每次使用$()都会自动调用一次函数,自动new一个全新的Base对象

三、完整代码

到这里基本上对象式封装完毕,这个只是简单的封装,还可以深入封装,写成类似jq获取元素节点的写法也可以,如何封装成类似jq的写法以后再写。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180801G0H8CS00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券