全過(guò)程筆記在此：

0.介紹

大家好，今天我來(lái)教一下

怎么用js腳本刪除網(wǎng)頁(yè)中的廣告

這里采用自己下好的一個(gè)網(wǎng)站的網(wǎng)頁(yè)搭建起來(lái)作為演示

1.元素選擇

首先調(diào)出開(kāi)發(fā)者控制臺(tái)

一般可以直接通過(guò)右鍵檢查廣告元素來(lái)打開(kāi)

不然也可以點(diǎn)擊F12或者在設(shè)置中打開(kāi)

打開(kāi)之后點(diǎn)擊左下角便可以用鼠標(biāo)選擇頁(yè)面中的元素

2.正確選擇

點(diǎn)擊左上角的按鈕可以選擇廣告

選好之后可以選一下它的父級(jí)

如果父級(jí)包含了廣告全部則選擇父級(jí)

3.手動(dòng)刪除廣告

然后此時(shí)我們可以右鍵選擇“刪除元素”來(lái)刪除

也可以使用鍵盤上的Delete鍵進(jìn)行刪除

然后便可以瘋狂刪除到極致

啊~舒適

4.js腳本刪除

言歸正傳，刷新一下重頭再來(lái)

剛才演示了手動(dòng)刪除方法，如

果你想要讓其自動(dòng)刪除

就需要通過(guò)控制臺(tái)來(lái)用代碼刪除指定元素

我們還是選中一個(gè)廣告元素

可以發(fā)現(xiàn)最后出現(xiàn)了“== $0”的字樣

這代表我們可以在控制臺(tái)利用$0來(lái)引用這個(gè)元素

在控制臺(tái)輸入$0后回車可以發(fā)現(xiàn)和剛才的元素長(zhǎng)得一樣

此時(shí)我們可以用$0.remove()來(lái)刪除元素

這就學(xué)會(huì)了通過(guò)js腳本來(lái)刪除元素

5.自動(dòng)獲取元素

但是我們不能每次都通過(guò)點(diǎn)擊來(lái)獲取元素

還有不需要點(diǎn)便能獲取元素的方法

仔細(xì)觀察我們要?jiǎng)h除的元素，發(fā)現(xiàn)其id="ad1"

此時(shí)我們可以通過(guò)document.getElementById('ad1')

這行代碼來(lái)獲取對(duì)象

document就代表了當(dāng)前的頁(yè)面

所以再連上前面的remove，只需要輸入：

document.getElementById('ad1').remove()

便可以達(dá)到直接通過(guò)js來(lái)刪除元素的效果

6.多個(gè)元素

但此元素有多個(gè)怎么辦？

可以利用一個(gè)更簡(jiǎn)單的方法

我們?cè)谠亟缑嬲业揭獎(jiǎng)h除的元素

右鍵復(fù)制selector，你會(huì)發(fā)現(xiàn)復(fù)制了一個(gè)“#ad1”

此時(shí)我們可以利用document.querySelectorAll('#ad1')

來(lái)獲取所有廣告元素

然后再用一個(gè)循環(huán)語(yǔ)句刪除每個(gè)元素即可

全部代碼如下：

var a=document.querySelectorAll('#ad1');

for(var i=0;i<a.length;i++){

a[i].remove()

}

通過(guò)執(zhí)行這個(gè)代碼發(fā)現(xiàn)可以成功將多個(gè)廣告刪除

7.腳本自動(dòng)執(zhí)行

但是刷新會(huì)發(fā)現(xiàn)廣告還是會(huì)出現(xiàn)

如果想讓廣告不再一直出現(xiàn)我們便

需要讓瀏覽器自動(dòng)執(zhí)行這些代碼

這里可以用聞名已久的

油猴（TamperMonkey）插件來(lái)實(shí)現(xiàn)

edge只要打開(kāi)插件商店搜索便能找到

黑的和紅的都可以

一個(gè)是穩(wěn)定版，一個(gè)是測(cè)試版

8.腳本添加

安裝好之后選擇添加腳本

然后在@match條目填入要運(yùn)行腳本的網(wǎng)站

這里直接寫好了，所以不需要再進(jìn)行修改

name這里可以修改腳本名

然后在后面直接寫入我們的代碼

最后Ctrl+s保存之后再刷新頁(yè)面

刷新頁(yè)面試試看

可以發(fā)現(xiàn)油猴右下角有紅點(diǎn)

說(shuō)明我們的腳本成功運(yùn)行了

廣告也成功刪除了

9.間隔

到這里就基本學(xué)會(huì)了用腳本去廣告的方法

后面是更深入一點(diǎn)的一些內(nèi)容

請(qǐng)自行決定是否繼續(xù)觀看

如果你喜歡我的視頻

歡迎點(diǎn)贊關(guān)注~

10.無(wú)id元素獲取

那么繼續(xù)后續(xù)內(nèi)容

仔細(xì)觀察可以發(fā)現(xiàn)，有些廣告元素

它并沒(méi)有id這個(gè)屬性

此時(shí)不能通過(guò)id來(lái)直接獲取，但是

同樣可以用前面提到的selector來(lái)獲取到

可以發(fā)現(xiàn)這里獲取語(yǔ)句的就比較長(zhǎng)了

因?yàn)樗峭ㄟ^(guò)元素層級(jí)來(lái)獲取的

最后還用nth-child(1)這個(gè)語(yǔ)句來(lái)標(biāo)識(shí)

這是第一個(gè)孩子元素

但其實(shí)我們想刪除的不止第一個(gè)

還有第三個(gè)

但是第二個(gè)元素我們又想保留

此時(shí)我們可以手動(dòng)將nth-child(1)

中的內(nèi)容換成2n+1

此時(shí)代表了選擇第1,3,5……的孩子元素

然后我們就能獲取到和前面一樣的

多個(gè)元素了

所以刪除代碼如下：

var a=document.querySelectorAll('body > div.wrap > div:nth-child(2n+1)');

for(var i=0;i<a.length;i++){

a[i].remove()

}

同樣加入油猴那個(gè)腳本中試試看

完全干凈的頁(yè)面出現(xiàn)了！

11.擴(kuò)展

這樣就可以了，再說(shuō)一些額外的話

這個(gè)方法不僅可以用來(lái)屏蔽廣告

還能屏蔽一些比較煩人的網(wǎng)站登錄

比如v……嗶！

咳咳

另外除了電腦端能用這個(gè)方法外

手機(jī)端支持?jǐn)U展的瀏覽器也可以使用此方法

比如KIWI

不過(guò)kiwi不支持油猴，但暴力猴可以使用

它們功能基本一樣的

只不過(guò)暴力猴好像經(jīng)常不能在

頁(yè)面運(yùn)行結(jié)束時(shí)才運(yùn)行腳本

導(dǎo)致總是有漏網(wǎng)之魚

此時(shí)你可以用代碼讓其加載結(jié)束后運(yùn)行

如下：

window.onload=function(){

//將原來(lái)的代表添加到這里即可

//var element=document.getElementById("login");

//element.remove();

}

12.結(jié)語(yǔ)

好了，以上便是本視頻的全部?jī)?nèi)容了

感謝你能夠看到現(xiàn)在

如果你喜歡我的視頻

歡迎點(diǎn)贊和關(guān)注我

之后會(huì)給大家?guī)?lái)更多有趣有用的內(nèi)容

拜拜~