概览
今天的文章主要会提到笔者在浏览、操作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 面板篇。