JS-api（一）

目录：

（1）api-环境准备

（2）api-搭建前端服务器

（3）api-查找页面元素

（4）api-修改页面元素

---

（1）api-环境准备

js的API：使用一个案例，来讲js原生的api，前端开发也需要自己的服务器，像后端开发需要tomcat一样，前端的服务器是基于Node.js开发的，所以需要装一个Node.js运行环境，因为Node.js版本非常的多，更新分厂快，有的代码在有的Node.js版本上能运行，升级的就不能运行了，因此，我们装一个Node的版本管理器，它的额好处是可以安装多个NOde的版本，可以方便的而且换另外一个Node的版本

 

Node.js的路径有空格更换目录 

 

 

 

改变node、npm的下载镜像：

 可以查看下载的node版本：建议使用LTS的版本

 使用命令下载：

下载命令： 

 会下载到：nvm文件夹

将来切换哪个版本nodejs这个目录的快捷方式，指向切换的版本上面下载的那个

查看安装的版本：

切换本版：node.js

查看：切换了版本： 

 

 

 把这个路径加到系统的Path环境变量中：

 指定之后才能使用：node和npm命令：

（2）api-搭建前端服务器

 

先创建一个文件夹：

 打开终端：

 

使用名命令搭建前端的服务器：express：前端服务器  --save-dev：在开发环境中存在

  

 执行完之后生成：

package.json就想java中的pom一样，加的依赖放到这里 

 

 node_modules：具体的js包存在这里，express也会依赖其他相关的包，他把其他相关的包也下载下来啦

  启动express服务器，需要编写一个js代码来启动，不像tomcat一样，

在package.json里面添加一点代码，type=module，之后才能进行导包，使用import语法进行导包，否则只能使用旧的语法require导包。

 创建main.js：启动express服务器：

 

打开终端： 使用node.js运行这段js代码：

这个时候可以使用浏览器访问：显示的是这样的，因为没有做静态资源，服务资源，只是一个服务器空壳，没有做映射

 

 设置监听静态资源目录：设置当前目录

 创建一个html：

 

 

这个时候可以访问:

 

 

（3）api-查找页面元素

架构：前后端分离，前端一个服务器，后端一个服务器： 

数据是动态从后端获取的 

 

 

 

删除两条数据：

 

 

 

 

 

api的查找： 

根基选择器查找：

 根据类选择器：匹配到多个只返回第一个：

 要查找多个使用：返回节点的集合

 document是文档范围，还可以缩小范围查找元素：

 根据id查找：

（4）api-修改页面元素

 获取元素内容：innnerHTML

还可以修改：

 

textContent： 

 

 上面连个获取和修改都能进行，主要区别是:修改的内容的

inerHtml：可以对文本里面的html标签进行解析

textContent：如果出现html标签，不会进行解析

 

 

 如果想要清空标签捏的内容，innerHTML和textContent都可以