“去掉那个框框”插件--第二版

2020-12-27 23:58:16 阅读：216 来源： 互联网

标签：插件框框 -- lists item let 数组 boxs name

第二版代码如下----还没实现好点的功能，不过先做出来吧

window.onload=function(){
        // 选择器封装
		function $(name) {
			let result = document.querySelectorAll(name).length > 1 ? [...document.querySelectorAll(name)] : document.querySelector(
				name);
			return result;
		}
		// 对lists数组元素进行判断，如果当前网页存在对应的元素，则将其添加入boxs数组中
		function divAdd(list) {
			for (let item of list) {
				if (item) {
					boxs.push(item);
				}
			}
		}
		// 隐藏功能代码（实际上就只是给div加上个display:none）
		function hidden(item) {
			// 对传入的参数进行长度判断是因为有可能这个参数是个数组，如果是数组的话就对其进行遍历操作
			if(item.length>1){
				for(let i of item){
					i.style.display="none";
				}
			}else{
				item.style.display="none";
			}
		}
		// boxs为存储当前网页中能隐藏的div的集合
		let boxs = [];
		let lists = [$("#HMRichBox"), $("#downdiv"),$(".layui-row")];
		divAdd(lists);
		boxs.map(item=>hidden(item));
}

代码解析：

首先是那个boxs的空数组，之所以声明这么一个数组是为了存放当前网页中存在的需要去除的框框，假如没有这么一个数组来存在，直接将最下面所有需要去除的内容数组进行去除，会有一部分因为该网页并不存在对应的数据导致报错。

在封装的选择器返回选中的对象时，有一个问题，就是控制台报错了，一直显示找不到style属性啥的，像Cannot set property 'display' of undefined

因为document.querySelectorAll(name)所返回的是一个NodeList对象，这个对象挺麻烦的，不能使用array还有object这些的属性方法，导致我的代码一直报错。既然它跟数组看起来挺像的，那我就直接把它转化为数组好了，直接对选择器的返回值使用扩展运算符加[]转换为数组（老子真聪明）。

剩下的就没啥了

全部思路：

首先，先把所有网站中看不顺眼的div的id或者class名传入封装好的$()函数中，将得到的值写入lists中，

再调用divAdd()函数，将lists作为参数传入之后，对该参数进行遍历判断（因为lists是一个数组，所以可以遍历），判断其子元素中是否在当前页面存在，如果存在则将该元素添加入boxs数组中。

最后一步就是对boxs数组的所有子元素进行遍历操作了，我使用的是map()方法，对boxs的每个子元素都调用一次hidden()方法，完事

标签：插件,框框,--,lists,item,let,数组,boxs,name
来源： https://blog.csdn.net/weixin_41654160/article/details/111825705

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

“去掉那个框框”插件--第二版

代码解析：

全部思路：