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