你不知道的前端冷知识

一、outerHTML、outerText

我们平常大多数使用的是innerHTML，outerHTML是什么？

下面我们来看一下对比：

# html
<div id="box">
    <p>come here</P>
</div>

# js
let box = document.getElementById('box')

innerHTML

返回 box 对象子元素 html 代码

let inner = box.innerHTML // "<p>come here</p>"

outerHTML

返回 box 自身 html 代码

let outer = box.innerHTML 

// 结果
// "<div id="box">
//     <p>come here</p>
// </div>"

innerText、outerText

innerText、outerText在获取内容的时候没有区别，都是获取box内的文本内容，但是在赋值的时候，innerText是替换掉 box 子元素内容，outerText则是替换掉box自身

box.innerText = '123';
box // <div id="box">123</div>

box.outerText = '123';
// 整个box被替换为 '123'
let box = document.getElementById('box') // null

二、cloneNode 拷贝节点

cloneNode(Boolean) 拷贝节点，参数是 true 时表示拷贝元素以及元素下的所有子节点，参数 false 表示只拷贝当前元素，不拷贝子元素

<div id="box">
    <p>come here</P>
</div>

参数为 true

参数为 false

三、addEventListener

addEventLister(event,func[,useCaptur]) 第三个参数除了传递 boolean值，还可以传递一个对象，参数如下：

el.addEventListener(event, func, {  
  capture: false,  
  once: true,  
  passive: false  
});  

• capture： Boolean值，true表示在捕获阶段执行，false表示在冒泡阶段执行，默认false
• once：  Boolean值，true表示事件句柄只调用一次
• passive： Boolean值， true 表示事件句柄永远不会调用 preventDefault，即使它被包含在函数体中

四、vh、vw

vh ：当前可视区域高度的1%
vw ：当前可视区域宽度的1%
vmin ：vh、vw中较小的值
vmax ：vh、vw中较大的值

注意：百分比针对父元素的大小，vh针对可视区域的大小

五、ch、ex

ch ：数字0的宽度
ex ：小写字符x的高度
font-family改变时，这两个值也会改变

六、角度单位

单位	描述
deg	度，一个圆是360度
grad	梯度，一个圆是400梯度
turn	圈，一个圆是一圈
rad	弧度，一个圆是2π

换算：90deg = 100grad = 0.25turn ≈ 1.570796326794897rad