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都可以

