??并不是很實(shí)用警告！警告！??

描述問(wèn)題

? ? 不同于N站，Bilibili在擁有彈幕的時(shí)候同時(shí)擁有評(píng)論區(qū)。在手機(jī)端上，很多人和我一樣會(huì)打開(kāi)視頻就直奔評(píng)論區(qū)，看彈幕√ 看評(píng)論√ 看視頻√ 同時(shí)享受三份的快樂(lè)√
????但是！假如是在電腦上！這件事情就變得有些困難了。

????假如需要看評(píng)論，則需要滾動(dòng)到下方，這時(shí)雖然有一個(gè)mini size的播放器，上面也有彈幕，但是和手機(jī)的體驗(yàn)是截然不同的 !
?( 在手機(jī)上視頻區(qū)域還有 1 / 3?，而minisize的播放占全屏的1 / 10都不到 ! )

????雖然我的至理名言是 “ 又不是不能用 ”?，嗒嘚！為了緩解我發(fā)現(xiàn)我提出的問(wèn)題其實(shí)根本不存在的尷尬！我還是要解決這個(gè)問(wèn)題！

解決方案設(shè)計(jì)

????首先我們分析一下現(xiàn)在要解決的問(wèn)題：
????????·?要看見(jiàn)彈幕、視頻、評(píng)論！
????????· 視頻區(qū)域不能小！同時(shí)能發(fā)彈幕和評(píng)

論！即彈幕評(píng)論功能不能少！

????我們?cè)俜治鲆幌乱曨l播放頁(yè)會(huì)發(fā)現(xiàn)，藍(lán)色部分是視頻部分，黃色部分是彈幕部分。而紅色部分卻是多余部分！那我們把紅色部分替換成評(píng)論區(qū)就行了?。?br/>

開(kāi)始實(shí)現(xiàn)

????首先，我們先打開(kāi)瀏覽器的console控制臺(tái)。這里推薦使用Chrome瀏覽器 (?雖然其實(shí)只要是瀏覽器都可以?F12 打開(kāi)控制臺(tái) )?進(jìn)行操作。

????我們的思路是把 “ 不必要的部分拆除掉，再把評(píng)論區(qū)搬過(guò)去 " 所以我們需要先定位好要拆掉和搬運(yùn)過(guò)去的位置。

????我們先定位一下評(píng)論區(qū)： 在評(píng)論區(qū)任意范圍 右鍵 → 檢查元素 然后就可以看見(jiàn)鼠標(biāo)下面的部分所在樹(shù)節(jié)點(diǎn)，鼠標(biāo)一層層往上層移動(dòng)，會(huì)發(fā)現(xiàn)頁(yè)面反饋被選中的區(qū)域不斷擴(kuò)大，達(dá)到覆蓋整個(gè)評(píng)論區(qū)的時(shí)候，右鍵節(jié)點(diǎn) → Store as global variable?，這時(shí)在console選項(xiàng)就可以看見(jiàn)評(píng)論所在已經(jīng)被賦值成功 ( temp1 ) 啦！

????同理可得，我們?cè)偎褜ひ鸪牡胤?，成功后在console可以看見(jiàn)這亞子的反饋。

????接下來(lái)就是大家都快樂(lè)的代碼時(shí)間了:
????????· 首先是拆除工作，temp2 是需要拆除的地方，但不是拆除的房子。地方和房子是從屬關(guān)系，換句話說(shuō)是父子關(guān)系，我們要除去的是子節(jié)點(diǎn)。故我們寫(xiě)這樣的代碼 :?

??[...temp2.children].map(兒子=>兒子.remove())

????先不考慮語(yǔ)法，這段代碼的意思就是 把 temp2 的 兒子排成一列，然后一個(gè)個(gè)執(zhí)行remove ( 自毀 ) 操作，然后就消失了！畫(huà)面反饋結(jié)果大概是這樣：

????然后是搬入過(guò)程了，這一部分也可以參考移房子不移地的思路(不過(guò)其實(shí)移地也可以的。)，代碼如下 :

[...temp1.children].map(兒子=>temp2.appendChild(兒子))????

????同樣的先不考慮語(yǔ)法，這段代碼的意思就是?把 temp1?的 兒子排成一列，然后一個(gè)個(gè)執(zhí)行appendChild ( 認(rèn)父?) 操作，然后就換地方了！畫(huà)面反饋結(jié)果大概是這樣：

但是還是會(huì)發(fā)現(xiàn)一個(gè)問(wèn)題，滾動(dòng)評(píng)論頁(yè)面也會(huì)滾動(dòng)，所以我們還得改成滾動(dòng)戶型：裝個(gè)電梯

temp2.style.overflow = "scroll";
temp2.style.height = "560px"

????最終效果如下！

效果優(yōu)化

????要用戶進(jìn)行那么多操作實(shí)在是太不人性了，我們可以從console里面發(fā)現(xiàn)，其實(shí)評(píng)論的節(jié)點(diǎn)的 id 就叫?comment ，不重要的節(jié)點(diǎn) id 叫?reco_list。那我們可以直接通過(guò)查詢器來(lái)完成搜尋過(guò)程 :?

let 有用的 = document.getElementById("comment");
let 待拆除 = document.getElementById("reco_list");

同時(shí)我們會(huì)發(fā)現(xiàn)有一個(gè)廣告會(huì)占用一定空間。所以我們也一起拆掉吧！從上面的方法我們可以找到廣告節(jié)點(diǎn)的id為?slide_ad 所以代碼可以這樣寫(xiě) :?

let 廣告?= document.getElementById("slide_ad?");
廣告.remove();

最終代碼

let 有用的 = document.getElementById("comment");
let 待拆除 = document.getElementById("reco_list");
let 廣告 = document.getElementById("slide_ad ");

廣告.remove();
[...待拆除.children].map(兒子=>兒子.remove());
[...有用的.children].map(兒子=>待拆除.appendChild(兒子));

????好的，這樣就可以達(dá)到需要的結(jié)果了呢！每次打開(kāi)視頻復(fù)制粘貼一下就可以了呢！是不是很方便！( 方便：有被冒犯到 )

本次實(shí)例可以發(fā)現(xiàn)以下知識(shí)：

????· 從屬關(guān)系用?. (英文的小數(shù)點(diǎn)符號(hào))?來(lái)引用 比如 父親.兒子 。
????·?remove在編程世界中是銷毀的意思?appendChild 是修改父親(emmm)的意思。
? ? · 可以用??document.getElementById 來(lái)通過(guò) id 找到節(jié)點(diǎn)。
????.... 省略若千條