【Debug】你所知道的Elements - DOM---第五天

概览

今天的文章主要会提到笔者在浏览、操作DOM 结构时常用到或觉得不可不知的功能，虽然大部分的功能都很简单或有很多种达成的方式，不过笔者的确因此省了不少时间呢，马上就来看看有什么新奇的玩意儿吧！

阅读文章时建议搭配Demo页面Elements - DOM一起使用，效果更佳。

DOM

$0
有注意到开启Elements面板时，标记的元素后方总会有个== $0吗？

先Inspect一个元素后再到Console面板输入$0，会发现刚刚选中的元素出现在Console中！其实点选某个元素的时候，后方的== $0就说明了这件事，如果再多点几个元素，还可以用$1、$2、$3、$4（到此为止）来拿到前几次选到的元素。
在这里插入图片描述

另外在Console中对元素按下右键，选择Reveal in Elements Panel可以跳到该元素在Elements面板中的位置，对Elements面板的元素按下右键则有Scroll to view可以把视野滚到能看见元素的地方。
在这里插入图片描述
想要在Console面板中用JavaScript操作元素时，== $0就非常方便，另外也可以搭配console.dir($0)来观察元素的各个属性，如果在Console直接输入$0或是console.log($0)只会印出如Elements面板显示的元素本身。

在这里插入图片描述

搜寻

按下Command+F会在下方跳出搜寻列，可以用字串或CSS Selector来找到元素。
在这里插入图片描述

编辑

元素的层级和顺序可用拖曳来改变，另外还可以用Command+C、Command+V来复制贴上，那贴错位置的话怎么办？直觉地按下Command+Z或Command+Shift+Z就可以Undo或Redo了。
在这里插入图片描述
没错，就是这么简单。

贴上元素的时候，会贴在选定元素的最后一个Child，注意贴在等Self-closed元素内依然会出现在DOM结构，但不会显示在页面中。

右键选单

选中一个元素的时候，按下左边的三个点点，或是对元素内按下右键会打开功能选单，以下会列出笔者认为值得一提的几个功能。

为什么强调元素内呢？如果右键是点在Attribute、URL上，选单会有不同的选项，例如在URL上点右键就会有Reveal in Sources panel、Open in new tab等等。
在这里插入图片描述

Hide element

如果有某个元素被遮住了无法选到，可以Inspect覆盖的元素后按下Hide element或直接按键盘的H，反覆做就能看到想要选取的元素，也能从左方的小圆圈看到哪些元素被隐藏了，其效果和CSS的visibility: hidden;相当，看不到也Inspect不到，但不影响原本的排版。
在这里插入图片描述
Now you see me.

Edit as HTML

修改单一个Attribute 或是元素的内文时可以直接双击元素的内文部分开始编辑，尤其在新增元素时特别方便。
在这里插入图片描述

Copy

在爬虫或是自动化测试的时候很方便，可以透过：

Copy Selector — 自动计算出一个CSS Selector
Copy JS Path — 同上，复制为可找到该元素的JavaScript 如 Document.querySelector([CSS Selector])
在这里插入图片描述
由于是自动产生的，并不保证Selector 的效能或长度，不过可以确保会选到该元素。

Expand recursively

展开所有子元素，也可以按住Option或Alt点开有一样的效果，不用一层一层慢慢点，另外笔者常常会用键盘的左右方向键来展开收合元素，也能搭配Option或Alt展开全部。
在这里插入图片描述
Break on
Break on 选项会在关于Sources 面板的文章中提到，敬请期待。

结语
Elements 面板的介绍就到此告一段落，明天会开始进入Console 面板篇。