js取a标签值赋值给另外一个a标签？

JavaScript017

js取a标签值赋值给另外一个a标签？,第1张

首先获取到numlist标签下a标签的href，然后赋值给类名为pull-left的a标签。

var numlist = document.getElementsByClassName("numList")[0]

var list = numlist.getElementsByTagName("li")[0]

var aObj = list.getElementsByTagName("a")[0]

var text = aObj.getAttribute("href")

var pull = document.getElementsByClassName("pull-left")[0]

pull.setAttribute("href", text)

大概是这样，如果有问题我可以测试一下。

websocket 是一种网络通信协议，一般用来进行实时通信会使用到

websocket 协议和 http 协议类似，http 协议有一个缺陷，只能由客户方端发起请求，服务端根据请求 url 和传过去的参数返回对应结果

websocket 是双向通信的，只要 websocket 连接建立起来，可以由客户端给服务端发送数据，也可以由服务端主动给客户端发送数据

websocket 适用场景：聊天室

websocket 相关简介，可以看 阮老师的文章

nodejs 可以通过 nodejs-websocket 来实现创建一个 websocket 的服务

nodejs-websocket 用法

文档地址： https://www.npmjs.com/package/nodejs-websocket

node 创建的 websocket 服务，主要包含三个概念

可以通过 server.on('event', (res) =>{console.log(res)}) 调用

这次使用 websocket 实现一个基本的聊天室功能，个人感觉还比较简单，只是中间会出现一些由于链接异常断开，导致后端服务抛出异常挂掉的情况

记住前端关闭页面或者刷新页面时，先把连接关掉，每次进入页面时创建连接，然后后端将由于异常关闭导致的出错 try/catch 一下，避免抛出异常，阻塞进程

websocket 对于实现聊天室这样的功能，真的很方便，其实还能扩展到多人合作或者网络游戏等功能

在前后端分离的开发模式中，数据需要通过 http 请求异步从服务器端获取，也就是前端开发需要依赖后端接口，如果不能时时保证数据获取通畅，就会造成开发阻塞。这时前端需要一种方式可以来模拟数据请求，从而更多的掌握主动权独立开发项目， mockjs 可以以无侵入的方式拦截 ajax 请求，通过模拟服务器端响应来返回数据

JSRUN

Mockjs 语法规范由数据模板定义规范和数据占位符定义规范组成，在官网的 示例文档 中提供了丰富的模板定义方法，可点击查看

Mockjs 实现的原理是对 XHR 对象的拦截，属于 js 拦截，并没有通过浏览器发出请求，所以一般会碰到以下问题。

为了处理以上问题，引入集成了 mockjs 的 mock server工具 easy-mock ，注册并登录 easy-mock 官网后，会有一个演示项目提供参考，参考演示项目可以轻松创建自己的项目，如下图

创建项目后可以基于当前项目创建请求接口，如下图，创建一个 url 为 \user 的 get 请求，会生成接口为 https://www.easy-mock.com/mock/5b97a508b158375129f1b724/hello/user 的完整地址，点击 用户列表 可查看返回数据，由于 easy-mock 内部集成了 mockjs ，所以在生成数据时可以采用mockjs数据模板来生成，把基础用法中的数据生成模板粘贴过来，可以生成相同数据

浏览器限制跨域访问，所以要访问到接口数据，还需要解决跨域问题，通过 Nginx 解决跨域我在另外一片文章有讨论过，点击可以可查，下面主要介绍下通过 webpack-dev-server 设置代理

假设本地请求的根路径为 http://localhost:8080 ，通过 ajax 请求 用户列表 的完整接口为 http://localhost:8080/proxy/user ， webpack-dev-server 通过代理方式将请求转发到我们在 easy-mock 中定义的接口 https://www.easy-mock.com/mock/5b97a508b158375129f1b724/hello/proxy/user ，此时接口地址中多了个代理标志 /proxy , 通过配置参数 pathRewrite: {'^/proxy': ' '} 将 /proxy 去掉即可。