【在B站身体上学JS】怎么在看视频的时候同时享受三份快乐呢 # S01E01
🚧并不是很实用警告！警告！🚧
描述问题
不同于N站，Bilibili在拥有弹幕的时候同时拥有评论区。在手机端上，很多人和我一样会打开视频就直奔评论区，看弹幕√ 看评论√ 看视频√ 同时享受三份的快乐√
但是！假如是在电脑上！这件事情就变得有些困难了。
假如需要看评论，则需要滚动到下方，这时虽然有一个mini size的播放器，上面也有弹幕，但是和手机的体验是截然不同的 !
( 在手机上视频区域还有 1 / 3 ，而minisize的播放占全屏的1 / 10都不到 ! )
虽然我的至理名言是 “ 又不是不能用 ” ，嗒嘚！为了缓解我发现我提出的问题其实根本不存在的尴尬！我还是要解决这个问题！
解决方案设计
首先我们分析一下现在要解决的问题：
· 要看见弹幕、视频、评论！
· 视频区域不能小！同时能发弹幕和评
论！即弹幕评论功能不能少！
我们再分析一下视频播放页会发现，蓝色部分是视频部分，黄色部分是弹幕部分。而红色部分却是多余部分！那我们把红色部分替换成评论区就行了！！
开始实现
首先，我们先打开浏览器的console控制台。这里推荐使用Chrome浏览器 ( 虽然其实只要是浏览器都可以 F12 打开控制台 ) 进行操作。
我们的思路是把 “ 不必要的部分拆除掉，再把评论区搬过去 " 所以我们需要先定位好要拆掉和搬运过去的位置。
我们先定位一下评论区： 在评论区任意范围 右键 → 检查元素 然后就可以看见鼠标下面的部分所在树节点，鼠标一层层往上层移动，会发现页面反馈被选中的区域不断扩大，达到覆盖整个评论区的时候，右键节点 → Store as global variable ，这时在console选项就可以看见评论所在已经被赋值成功 ( temp1 ) 啦！
同理可得，我们再搜寻要拆除的地方，成功后在console可以看见这亚子的反馈。
接下来就是大家都快乐的代码时间了:
· 首先是拆除工作，temp2 是需要拆除的地方，但不是拆除的房子。地方和房子是从属关系，换句话说是父子关系，我们要除去的是子节点。故我们写这样的代码 :
[...temp2.children].map(儿子=>儿子.remove())
先不考虑语法，这段代码的意思就是 把 temp2 的 儿子排成一列，然后一个个执行remove ( 自毁 ) 操作，然后就消失了！画面反馈结果大概是这样：
然后是搬入过程了，这一部分也可以参考移房子不移地的思路(不过其实移地也可以的。)，代码如下 :
[...temp1.children].map(儿子=>temp2.appendChild(儿子))
同样的先不考虑语法，这段代码的意思就是 把 temp1 的 儿子排成一列，然后一个个执行appendChild ( 认父 ) 操作，然后就换地方了！画面反馈结果大概是这样：
但是还是会发现一个问题，滚动评论页面也会滚动，所以我们还得改成滚动户型：装个电梯
temp2.style.overflow = "scroll";
temp2.style.height = "560px"
最终效果如下！
效果优化
要用户进行那么多操作实在是太不人性了，我们可以从console里面发现，其实评论的节点的 id 就叫 comment ，不重要的节点 id 叫 reco_list。那我们可以直接通过查询器来完成搜寻过程 :
let 有用的 = document.getElementById("comment");
let 待拆除 = document.getElementById("reco_list");
同时我们会发现有一个广告会占用一定空间。所以我们也一起拆掉吧！从上面的方法我们可以找到广告节点的id为 slide_ad 所以代码可以这样写 :
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(儿子));
好的，这样就可以达到需要的结果了呢！每次打开视频复制粘贴一下就可以了呢！是不是很方便！( 方便：有被冒犯到 )
本次实例可以发现以下知识：
· 从属关系用 . (英文的小数点符号) 来引用 比如 父亲.儿子 。
· remove在编程世界中是销毁的意思 appendChild 是修改父亲(emmm)的意思。
· 可以用 document.getElementById 来通过 id 找到节点。
.... 省略若千条
