存档2019-04-27

前端进阶必会的网络HTTP协议系列一

作者 在 浏览器, 行业资讯 标签 , , , ,

前面讲的前端三大基石html、css、js学的再好，写出的页面再牛，如果没有人能看到，那无异于孤芳自赏。而互联网的优势和价值在于连接，让更多的人看到，才能让技术产生价值。现实世界中的人相互沟通连接从而构成了丰富多彩的世界，语言是人们相互交流的桥梁。类似的，网络世界中的终端，无论是服务器和还是浏览器，就跟一个一个人一样，终端之间的联接和交流构成了纷繁复杂的互联网世界，终端之间的最重要的语言就是今天要讲的HTTP通信协议。

以上是一种通俗的理解，但我认为本质原理都差不多，下面我们就来盘盘传说中的HTTP。

http

HTTP是啥？

HTTP是英文HyperText Transfer Protocol的缩写，翻译过来就是超文本传输协议。HTTP是目前互联网上应用最为广泛的一种网络协议。HTTP的前两个字HT与HTML的前两两个字以及含义都是一样的，事实上当初设计HTTP目的也就是为了提供一种发布和接收HTML页面的方法。而协议可以简单的认为是沟通双方相互认可和能理解的一个约定（标准）的集合。

HTTP发展历史

相对终端层面的互联网应用以及浏览器版本的快速发展和迭代，http的版本迭代看起来非常克制，从问世到现在将近30年的时间，总共只出现了4个版本，真正产生较大影响力的也就2个版本，目前最新的版本是2.0。

0.9 ——探索

HTTP是1990年出现的，之所以没有将最初始的版本命名为1.0，可能也是因为对当时的人们来说，互联网的一切都是未知，这仅仅是在科技最边缘的一次试探。

1.0 ——问世

有了前面的积累，1996年的五月版本被正式命名为HTTP1.0，并正式对外公布。这是一次成功的探索，因为这个版本的协议标准至今仍被广泛使用。

1.1 ——改进

紧接一年以后，1997年1月公布了HTTP1.1版本，从命名来看，这是对之前版本的一种改进，使其变得更加完善，而且这个仍然是目前主流的HTTP协议版本。

2.0 ——发展

之后随着互联网应用的发展，新的问题和要求不断涌现，目前最新的版本是2015年5月公布的2.0版本，2.0版本在性能和数据传输上更具优势，目前已有少量站点使用，前景可期。

连接

HTTP和TCP/IP

TCP/IP的并没有很明确，有人把计算机终端通信相关联的协议集合起来总称为TCP/IP，也有人认为TCP/IP就是指TCP和IP两种协议，也有其他人认为TCP/IP是在IP协议的通信过程中使用到所有协议族的统称。

不论是那种说法，TCP/IP把通信过程分成4层：应用层、传输层、网络层、链路层 。基于这个四个分层，则形成了从客户端和服务端的一次完整的信息传输过程。这一过程包括找IP，确认、响应处理等阶段，其中涉及到知识后面单独分开介绍。

需要特别说明的是，网络协议不只HTTP一种协，还有如FTP（文件传输协议）、SMTP（简单邮件传输协议） 、SCTP（流控制传输协议）等。

HTTP是一次性的，也就是一种无状态协议，不会保存状态。具体来说，HTTP协议对于完成的请求或者响应都不做持久化处理，用完结结束，要用再重新请求。

目前正火的HTTPS是在HTTP之上加入了SSL/TLS协议，用于数据的加密传输，提高数据的安全性。

本文先在外围大概了解了HTTP，HTTP是现在前端的基础，是必须掌握也是前端进阶必会知识。开启前端网络探索之路，后续陆续更新，欢迎大家指正。

http

Javascript DOM基础操作：样式与事件（下）

作者 在 css, html, Javascript 标签 , , ,

上两篇介绍了DOM的概念以及一些DOM控制HTML标签的查增删改的基础操作，这些是不够的，因为我们的目的是让页面有颜值有灵魂（好看以及有趣的行为），这就需要通过CSS样式和事件的处理来体现,这些DOM基础操作一定要会。


改变CSS样式

HTML 元素的样式是通过style属性和对应的属性值来控制的，DOM允许js可以操控style的属性和属性值，从而来达到改变其样式的目的。当然，改变样式的前提依然是要先获取到目标元素，然后通过点操作符来找到style属性和属性值。

document.getElementById(id).style.property = new style

接下来看一个例子，将h1标签的颜色变成红色：

document.getElementsByTag(“h4”).style.color = “red”;

需要注意的是css中的两字符和js中的减号运算符长得一样，所以为了避免引起奇异，一些带有连字符的css样式要转换成对应的小驼峰命名的名字。比如font-size,background-color应该写成

document.getElementsByTag(“h4”).style.fontSize=”16px”;

document.getElementsByTag(“h4”).style.backgroundColor = “blue”;

当然，我们可以通过控制display 和visible的值来控制元素的显示和掩藏：

document.getElementsByTag(“h4”).style.display = “none”;

document.getElementsByTag(“h4”).style.display = “block”;

通过增加js的逻辑，以及更丰富的CSS3属性，可以打造更加酷炫的页面交互效果。

事件处理

CSS决定页面的颜值，而事件处理决定页面的交互，有趣的灵魂就靠它了。HTML DOM 允许 Javascript 添加和处理多种事件。比如页面加载事件、鼠标点击、鼠标移动、输入字段更改。

给元素添加事件的基本方式是，直接将事件卸载HTML代码中，但是这样低效，而且不符合 内容、样式和行为分隔的原则。用JS DOM的好处显而易见，可以精准的批量添加元素，实现行为和内容的完全分离。这个就要用到添加事件监听器：addEventListener。

addEventListener() 方法用于向指定元素添加事件句柄。用法介绍：

element.addEventListener(event, function, useCapture);

参数1：event，字符串类型，必选，指定事件类型，比如click,change等；

参数2：function，指定要事件触发时执行的函数，或者直接是函数定义本身；

参数3：可选。布尔值，指定事件是否在捕获或冒泡阶段执行。

比如：

document.getElementByClassName(“btn”).addEventListener(‘click’, clickEvent);

这里我们给多有带btn类的元素添加了点击事件（click），在单击这些元素时就是执行 clickEvent方法。

当然还可以给一个元素添加多个不同的事件。如果元素不再需要这个事件，可以通过 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。

总结：三篇从定义，内容结构（HTML）、颜值（CSS样式）、灵魂（事件行为）等三个方面，介绍了一些基础的DOM操作，可以让大家了解其中原理和一些基础的操作，有这个基础，可以扩展更多的具体方法，将十八般武器好好练熟，再具体的项目中，就可以发挥想象力，大展身手了。

一定要会的DOM基础操作（中）

作者 在 html, Javascript, 行业资讯 标签 ,

上一篇我们介绍了什么事DOM以及如何用通过DOM用JS如何查找元素，找到元素之后可就是要对它进行“处理”，这个“处理”就包括三个方面：HTML、CSS、事件。本文先介绍HTML方面的DOM操作。

改变节点包含的内容

innerHTML 属性可用于修改 HTML 元素的内容，这里面的内容可以是纯文本，也可以是一段HTML代码。

document.getElementsByTagName(“div”).innerHTML = “<p style=’color:red’ class=’title’>JS DOM操作 Web前端号</p>”

这里把DIV标签内的所有元素变成了P标签，并且添加了style 和class等属性，但要注意，里面的属性值的引号不能和最外层的形成配对，也就是外面用双引号，里面就得用单引号，外面用单引号，里面就用双引号。

需要注意的是innerHTML非常简单粗暴，他把元素之前的内容全部替换成新的了。

更改节点属性的值

DOM 更改属性的值。比如更改图片标签的资源属性从而达到更换图片的目的：

document.getElementsByTag(“img”).src = “girl.jpg”;

把所有图片标签的src 改为 girl.jpg。

document.getElementsByTag(“ a”).title = “I am link”;

更改所有a标签的title属性为 “I am link”。

创建和添加节点

你最终看到的页面上的元素并非都是原本的HTML代码，甚至完全不是，所以他们很可能都是DOM创建的。比如

var div = document.createElement(‘div’);

var txt= document.createTextNode(“Hello World!”);

div.appendChild(txt);

方法创建一个 div 元素和一个文本节点，并将文本节点插入到div元素内部的最后位置。此时创建的这两个节点仍然只存在js中，并没有在文档中，所以下一步就是要把创建的标签添加到DOM中，假设文档中有个id为“wraper”的div元素，

document.getElementById(“wraper”).appendChild(div);

这样就把js中创建的节点添加到文档中，并且可以看到了。

删除元素

基于当前元素要删除当前元素的话，必须先找到其父元素，并调用其父元素的removeChild()进行删除。比如

var curr= document.querySelector(‘#footer’);

curr.parentNode.removeChild(curr);

注意，如果curr还有兄弟节点的话，这个操作仍然只会删除curr本身。

替换元素

替换可以看作是删除、新建和插入的集成，但是用replaceChild更为快捷：

var curr = document.querySelector(‘#div’);

var newNode = document.createElement(‘div’);

newNode.innerHTML = “新的元素”

div.parentNode.replaceChild(newNode, curr);

第一个参数是新元素，第二个参数是要替换的当前元素。

插入元素

1 兄弟级别插入元素的层面：

当前节点之前插入新节点：insertBefore(新节点,当前节点)，其使用方法是：

当前节点的父节点.insertBefore(新节点,当前节点);

js没有提供元素后插入的方法，这个可以基于insertBefore函数自己写一个，DOM编程艺术书中就写了一个，可以借鉴。

2 父子级别插入元素的层面：

子节点当前节点内部尾部插入子节点：appendChild();，其使用方法是

当前节点.appendChild(新节点);

3 文档级别插入节点的层面：document.write()

还有一个和append有点像，又比较特殊的是document.write()，可以直接写入HTML输出流。

document.write(“<h3>Hello，Web 前端号！</h3><p>开启前端学习之旅！</p>”);

需要注意的是document.write是直接将内容写入页面的内容流，会导致页面全部重绘，原先的HTML也会被删除。

基于当前节点查找其他关系节点

上文中我们提到DOM Document 中的节点之间具有树状的网络关系，网络学告诉我们，网络中的任意两个节点都可以通过路径联系起来。节点与节点之间的关系通常有上中下三层关系，分别用 parent，sibling(nextSibling,priviousSibling) 和 child（包括childNodes,fisrtChild,lastChild）来描述。比较特殊的是根节点<html/> 是唯一一个没有父节点的节点。以当前元素 DIV为例，各种关系可用下图描述：

下面是得到id为wraper的父元素，就是途中最上面的那个parent 节点。

var parent = document.getElementById(“wraper”).parentNode

var brs = document.getElementById(“wraper”).priviousSibling获取的就是图中priviousSibling的节点。

var childs = document.getElementById(“wraper”).childNodes获取的时所有DIV#wraper下的节点构成的数组，childs [0]就是fisrtChild节点，childs [2]就是lastChild节点。

总结：本文介绍了HTML层面的一些基础DOM操作，这是DOM十八般兵刃的一些基本武器，后面将继续介绍DOM对CSS和时间的操作。

坚持就是胜利！

一定要会的DOM基础操作（上）

作者 在 html, Javascript, 行业资讯 标签 , ,

javascript脚本就像剧本，DOM就是导演

Javascript DOM（文档对象模型）是一个允许开发人员控制和管理页面内容、结构和样式的接口。是连接HTML页面和JS代码的桥梁，通过这个桥梁，js可以控制HTML元素，让他们按照自己的脚本动起来，换句话说，js脚本就是剧本。本文先介绍什么是DOM，然后列举一些基础的DOM操作。

一开始各个厂家的浏览器对DOM的支持层度和方法是不一样的，但现在几乎所有的浏览器都内置了对DOM的支持，并对DOM标准有了很好的支持，所以现在人们可以当心大胆地使用脚本了。实际上，任何一种支持DOM API的程序设计语言都可以去处理标记文档，但是在web领域，舍js其谁啊！

什么是 DOM？

Javascript DOM编程艺术上对DOM有一个总体的定义：DOM是一套对文档的内容进行抽象和概念化的方法。

具体来说，DOM的三个字母分别代表的含义是：

D：document的缩写，也就是文档。浏览器打开一个网页的时候，会先打开一个窗口，窗口里呈现的内容就是文档，文档加载完成，浏览器也就创建了与文档对应的文档对象。文档是一切讨论的基础。

O：object的缩写，也就是对象。js中的对象分为三种：用户自定义对象、内建对象、宿主对象。流浪器窗口对应js中的window对象，就是典型的宿主对象。

M：Model的缩写，也就是模型。模型就是对对象的一种描述，DOM把一份文档表示为一棵树。html元素是根元素，head和body是html下的两个节点，以此类推，html文档内容以及相互之间的关系就用树形的形式被描述出来，这个树就是这个文档的模型。

节点（node）表示网络结构中的一个连接点。DOM中文档是由节点构成的集合，只不过在树形网络中，节点只有树枝节点和叶子两种类型节点。DOM中的节点按标记来分，分为元素节点、文本节点、属性节点。元素节点很好理解，就是对应的HTML标签，比如根节点html元素，body元素，div元素、p元素、span元素等。需要注意的是文本节点，是指包含在标签内的被标签分隔的文本是独立的一个文本节点比如<p style=”color:red” class=”title”>文本<span>内容</span>在此</p>，对应的网络节点就是：

查找 HTML 元素

查找元素是处理元素的基础，DOM提供了多种查找元素的方法：

按 ID 获取元素：getElementById()

方法用于通过其 id 获取单个元素。我们来看一个例子：

var AD = document.getElementById(‘banner’);

我们得到 id 为“banner”的元素，并将其保存到变量AD 中。

注意这个方法的getElementById没有s，写成getElementsById是错误的。

按类名获取元素：getElementsByClassName()

用getElementsByClassName()方法获取的是多个对象的组成的元素数组。

var items = document.getElementsByClassName(‘hot’);

这里我们得到所有包含“hot”类的元素，并以数组的形式将它们保存到变量中。这个很好理解，可能有多个元素使用了这个类。

按标签名称获取元素：getElementsByTagName()

ID和类名都是元素的属性，除了这两个其实还可以直接用标签名称来获取元素：

var uls= document.getElementsByTagName(‘ul’);

这里我们获取 HTML 文档中所有的ul元素，并将它以数组的形式保存到变量uls中。

通过Queryselector借助CSS选择器

借助querySelector()方法，可以获取与 CSS选择器匹配的第一个元素。比如通过id、class、tag和其他的 CSS 选择器获取元素。

按 id 获取：

var title = document.querySelector(‘#title’)

按 class 获取：

var title = document.querySelector(‘.title’)

按标签获取：

var title = document.querySelector(‘h1’);

获取更精准的元素：

document.querySelector(“p.title”);

返回传递给 CSS Selector 的第一个元素class中含有title类的p元素。

Queryselectorall

querySelectorAll()方法与querySelector()在使用方法上完全相同，只是它返回的是一个数组，包含所有符合 CSS选择器的元素。

var des = document.querySelectorAll(‘p.des’);

在这个例子中，我们得到所有包含des类的p标签，并将它以数组的形式存储在变量des中。

本文先介绍DOM的概念，以及DOM的查找操作，查找的目的是为了对DOM节点进行进一步的处理，下一节着重介绍如何通过DOM来进行修改操作。

粤ICP备16101691号-1 | by 飞