1. 获取页面所有标签
$$('*')
所有标签的名称:
$$('*').map(e => e.tagName)
2.可跨域的标签
img audio script link video
在HTML5中,一些 HTML 元素提供了对 CORS 的支持, 例如 <audio>、<img>、<link>、<script> 和 <video> 均有一个跨域属性 (crossOrigin property),它允许你配置元素获取数据的 CORS 请求。
3.html新增的data属性
data-vue-ssr-id="4f345cf6:0 6050707d:0 5d044d0a:0 6e83f55d:0 0a1e6e6f:0 02aef0d9:0 3730233b:0 480930db:0 32f4c4bb:0 d643b68a:0 67e2d91b:0 7efcf99f:0 10370d31:0 10370d31:1 10370d31:2 be508d16:0 06bd0539:0 43d23e7b:0 5a264eea:0 15deafe2:0 46f70b58:0 00aa16c3:0 541d413e:0 460ac56d:0 dca22e18:0 5f3fcb4a:0 e4dbf10e:0 f24e6142:0 58b25be2:0 ad967ec6:0 1ec00c16:0 00536104:0 6c565566:0 3c865668:0 c141cbe4:0 6036bd00:0 5844cfa7:0 0e413774:0 1cfc2566:0 4ad7fe66:0 72b3a585:0 b8f88f0c:0 5a4aeea6:0 6e6214b7:0 4a2d9036:0 38a757a6:0 4ee3faba:0 db95e562:0 6e6a782c:0" data-vue-meta="ssr" data-vue-meta="1"
https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Using_data_attributes
在vue中的应用:
https://cn.vuejs.org/v2/guide/comparison.html
4.如何阻止冒泡?
1.标准的W3C 方式:e.stopPropagation(); 这里的stopPropagation是标准的事件对象的一个方法,调用即可(谷歌和火狐支持,IE6/8不支持);
2、非标准的IE方式:window.event.cancelBubble=true; 这里的cancelBubble是 IE事件对象的属性,设为true就可以了(IE特有的,谷歌支持,火狐不支持)
from: https://mp.weixin.qq.com/s/9fNME8VU7VFAABmVM6iBHQ
5.chrome开发者工具使用tip
来源:https://mp.weixin.qq.com/s/7zdPznTXk97tbYGMjLH8Pw
1.查看元素伪类样式
2.临时增删元素class
3.document.body.contentEditable="true" 编辑页面
4.如何查看placeholder样式
5.lighthouse插件,查看页面性能和seo
6.network面板显示更多信息
7.elements->event listeners查看元素绑定的事件
8.全局search代码
9.performance查看页面运行时性能
10.rendering实时监测页面变化