【每日十分钟前端】基础篇21，为什么HTTPS更安全(SSL原理)、单行/多行文本溢出的省略样式、DOM常见的操作有哪些

1、[HTML]为什么HTTPS更安全(SSL原理)：对称加密、非对称加密、摘要、数字签名、数字证书。
2、[CSS]单行/多行文本溢出的省略样式。
3、[JS]DOM常见的操作有哪些？

---

1、[HTML]为什么HTTPS更安全(SSL原理)：

对称加密：协商密钥对数据加密
非对称加密：有一对配对的密码和钥匙
摘要：解决信息完整性问题
数字签名：解决发送方身份认证问题
数字证书：确认公钥来源

对称加密

加密和解密使用的密钥相同，是对称的。
只要保证密钥的安全，那么整个通信过程就可以说是具有有机密性。

缺点： 最开始另一方是没有密钥的，第一次通信需要发送密钥，此时会有被截获篡改的风险。

非对称加密

密钥不同：公钥与私钥。
公钥可以给任何人，私钥需要保密。

私钥加密只有对应公钥解密，反过来，公钥加密也只能用私钥解密

缺点： 速度慢

混合加密

对称加密+非对称加密，ssl使用这个。
先用非对称加密确认会话安全，再用对称加密进行会话。
过程：
（1）第一次通信的时候服务端发送公钥；
（2）客户端收到后，对一组随机数（会话密钥）进行加密，并发送给服务端；
（3）服务端用私钥这组随机数（会话密钥）进行解密；
（4）之后就用这个会话密钥进行通信。（对称加密）。

摘要

即哈希值，用于验证数据的完整性和唯一性。
不管原始数据是什么样的，得到的哈希函数都是固定的，但无法通过摘要还原到原始数据。

摘要算法

也叫散列函数、哈希函数。
过程不可逆，把任意长度的数据转化为固定长度生成独一无二的“摘要”字符串。可以原文等价，用于数据校验。

过程：
（1）客户端发送“正文”和正文对应的“摘要”
（2）服务端收到后计算“正文”的摘要得到“摘要2”
（3）对比“摘要”与“摘要2”，如果相等，则“正文”完整可信，没有被篡改。

数字签名

能证明消息确实是由发送方签名并发出来的。
只有真正的发送方才有这把私钥，上面说了私钥是保存在服务端自己这里的，不会对外发送。
原理： 用私钥加密，公钥解密。
过程：
（1）服务端发送“正文”和“数字签名”（私钥加密过的“摘要”）。
（2）客户端收到后公钥解密出“数字签名”，得到“摘要2”。
（3）对比“摘要”与“摘要2”，如果相等，则“正文”完整可信，没有被篡改。

补充：

对称/非对称加密为单方面用公钥或是私钥加密行为，加入了数字签名实现了公钥和私钥结合起来使用，相当于双重加密。

CA数字证书认证机构/数字证书

第三方机构。
谁都可以生成公钥私钥对，CA能证明这个公钥归属于真的服务器。
（对服务器的公钥多了一层加密过程）

补充：中间人攻击：
如果黑客生成了公钥私钥对冒充服务器。

过程：
（1）前置：CA持有自己的私钥，保管服务端公钥，浏览器事先内嵌“CA的公钥”（其实也是一个证书）。
（2）服务器向CA申请“公钥”，通过后CA用自己的私钥对“公钥”和一些相关信息（颁发者、有效时间等）一起打包加密，生成“数字签名”，“数字签名”和“公钥绑一起”就是“数字证书”。
（3）服务器进行通信的时候，发送这份“数字证书”。
（4）客户端接收以后首先用浏览器自带的CA的公钥解密校验“数字证书”（CA的公钥校验证书中的签名），然后证书中得到服务器的公钥，确定公钥所属后就是上述的步骤了。

2、[CSS]单行/多行文本溢出的省略样式。

单行文本溢出省略

p{
    width:300px;
    line-height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

white-space:nowrap作用是设置文本不换行，是overflow:hidden和text-overflow：ellipsis生效的基础
text-overflow:ellipsis;作用是文本溢出时显示省略标记，只有在设置了overflow:hidden和white-space:nowrap才能够生效的。

补充：
(a)、overflow：元素溢出时所需的行为

• visible 默认值。内容不会被修剪，会呈现在元素框之外。
• hidden 内容会被修剪，并且其余内容是不可见的。
• scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
• auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
• inherit 规定应该从父元素继承 overflow 属性的值。

(b)、text-overflow: 确定如何提示用户存在隐藏的溢出内容

• clip 剪切文本。
• ellipsis 显示省略符号 … 来代表被修剪的文本。
• string 使用给定的字符串来代表被修剪的文本。
• initial 设置为属性默认值。
• inherit 从父元素继承该属性值。

©、white-space：指定元素内的空白怎样处理

• normal 默认。空白会被浏览器忽略。
• pre 空白会被浏览器保留。其行为方式类似HTML中的<pre>标签。
• nowrap 文本不会换行，文本会在在同一行上继续，直到遇到<br>标签为止。
• pre-wrap 保留空白符序列，但是正常地进行换行。
• pre-line 合并空白符序列，但是保留换行符。
• inherit 规定应该从父元素继承 white-space 属性的值。

多行文本溢出省略

（1）

 p {
    width: 300px;
    overflow: hidden;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

-webkit-line-clamp:2可以用来把块容器中的内容限制为指定的行数，只有与display:-webkit-box/-webkit-inline-box;和-webkit-box-orient:vertical结合使用才能实现效果。
display:-webkit-box;将对象作为弹性伸缩盒子模型显示（流体布局）。
-webkit-box-orient:vertical设置或检索伸缩盒对象的子元素的排列方式：从上到下垂直排列子元素。

在大部分情况下，也需要设置overflow:hidden 否则，里面的内容不会被裁减。

（2）用伪元素
用伪元素定位到行尾位置，遮盖文字显示“…”，多余文字用overflow: hidden;隐藏多余文字。

p {
    width: 300px;
    position: relative;
    line-height: 20px;
    height: 40px;
    overflow: hidden;
}
p::after {
    content: "...";
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 0 20px 0 10px;
    background-color: #fff;
}

ps：注意行尾的“…”位置，“…”位置是固定的，即使文本不足两行。

[JS]DOM常见的操作有哪些？

DOM节点：元素节点（div、li、p）、文本节点（<p>文本内容</p>中的“文本内容”）、属性节点（<p color="red">``</p>中的color=“red”）
DOM的常见操作：

• 创建节点
• 添加节点
• 删除节点
• 更改节点
• 查询节点

创建节点：

createElement
创建一个新元素。

const pElement = document.createElement('p')

createTextNode
创建一个文本节点。

const pElement = document.createElement('p')
const txt=document.createTextNode("Hello World");
pElement.appendChild(txt)
document.body.appendChild(pElement);

createDocumentFragment
创建一个虚拟节点。

//HTML:
<div>
    <p>111</p>
    <p>222</p>
</div>
//JS:
const dFragment=document.createDocumentFragment();
dFragment.appendChild(document.getElementsByTagName("p")[0]);
dFragment.childNodes[0].childNodes[0].nodeValue="Milk";
document.getElementsByTagName("div")[0].appendChild(dFragment);

createAttribute
创建属性节点，可以是自定义属性。

//HTML:
<p>内容</p>
//JS:
var pElement=document.getElementsByTagName("p")[0];
var property=document.createAttribute("style");
property.value="color: skyblue";
pElement.setAttributeNode(property);

获取节点：

querySelector
返回匹配指定CSS选择器元素的第一个子元素（选中首个），没有匹配的时候返回null。
接收所有类型的参数：“.classNmae”、“#idName”、“elementName”等。

querySelectorAll
选中符合要求的所有参数
返回一个包含节点子树内所有与之相匹配的Element节点列表，如果没有相匹配的，则返[]

更新节点：

innerHTML
设置或返回元素的HTML(表格行的开始和结束标签之间)

innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。

innerText、textContent
设置或返回指定节点及其所有子节点的文本内容。
自动对字符串进行HTML编码，保证无法设置任何HTML标签。

两者的区别在于：读取属性时，innerText不返回隐藏元素的文本，而textContent返回所有文本。

style
DOM节点的style属性对应所有的CSS，可以直接获取或设置。
遇到‘-’需要转化为驼峰命名。

添加节点：

innerHTML
设置或返回元素的HTML内容（内部HTML）。
会替换掉原来所有的子节点。

appendChild
向节点添加最后一个子节点。

// HTML:
<div class="main">
    <p>aaa</p>
    <p>bbb</p>
</div>

// JavaScript
let p = document.createElement('p')
p.innerHTML = "add"
let main = document.querySelector('.main');
main.appendChild(p);

insertBefore
将节点作为子节点插入，就在您指定的现有子节点之前。
与appendChild类似，只是insertBefore在前面添加，appendChild在后面添加

parentElement.insertBefore(newElement, referenceElement)

setAttribute
指定的属性添加到元素中，并为其指定值。
如果指定的属性已经存在，则只设置/更改该值。

const div = document.getElementById('id')
div.setAttribute('class', 'white');//第一个参数属性名，第二个参数属性值

div.setAttribute('style', 'color: red');

删除节点：

removeChild
删除节点，删除后的节点虽然不再文档内，但是还在内存中，可以在以后将删除的子元素插入到元素中。
返回值为返回被删除的节点，如果节点不存在则返回 null