“去掉那個框框”外掛--第二版

lockloke發表於2020-12-27

第二版程式碼如下----還沒實現好點的功能,不過先做出來吧

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()方法,完事

相關文章