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

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

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