文章目录

前言
一、WebAPI
二、DOM
- 1.选中元素
- 2.事件
- 3.获取/修改元素内容
- 4.获取/修改元素属性
- 5.获取/修改表单元素属性
- 6.操作复选框
- 7.获取/修改样式属性
- - ①行内样式
  - ②通过css class 指定的样式
- 8.新增节点
- 9.删除节点
总结

前言

虽然学了一些js的语法,但是仍然无法写出页面的动态效果~~

学习浏览器给js提供的api~
网页时运行在浏览器上的,学习js最大的目的就是为了能够和用户交互,进一步的来操作页面的内容,这些都需要浏览器的api来完成

一、WebAPI

前面学习的 JS 分成三个大的部分

ECMAScript: 基础语法部分
DOM API: 操作页面结构
BOM API: 操作浏览器

WebAPI概念是非常广泛的~
BOM和DOM只是其中的一部分,还有一些操作多媒体的api(视频音频)
还有一些操作画板(可以用来画图) canvas api 等等…

以下主要介绍DOM (操作页面)

二、DOM

DOM 全称为 Document Object Model,文档对象模型
文档就是html,对象指的是js中的对象,文档对象模型(DOM)就是把HTML页面上的每个标签,都对应成js中的一个对象,通过这个对象,就能获取到标签的内容和属性

DOM API 一共很多,我主要介绍其中的一小部分~

1.选中元素

进行后续操作的前提,需要先拿到页面上的某个元素~

如果确实想把多个元素都获取到,可以使用querySelectorAll来完成~~
只不过这里的返回值,是一个数组了~

2.事件

和用户操作密切相关,用户在浏览器上,左键点击鼠标,左键双击鼠标,右键点击鼠标,鼠标移动,按下某个键盘按键,调整浏览器的窗口大小,滚动窗口位置…都属于用户针对浏览器进行的操作,都会由浏览器产生对应的"事件"

事件,是和用户操作相关的,无法确定事件什么时候来!!
针对这些可能的用户操作,能做的事情就是提前的做好准备工作
因此,浏览器就会根据用户操作产生对应的事件~ 再有对应的事件

举个例子:
让div处理一下鼠标点击事件

<div>点这里</div>let div = document.querySelector('div');div.onclick = function() {console.log('哒哒按下了鼠标~');}

click是点击事件,onclick属性就是针对click这个点击事件,提前准备好的事件处理程序~

chrome控制台里会默认把相同的日志给合并成一个~
此时会在前面有个数字,表示出现了几次~

事件,三个核心要素:

事件源 : 事件是那个元素发出来的
事件类型: 点击,移动,按下键盘,调整窗口
事件处理程序:通过哪个函数/代码来进行操作

3.获取/修改元素内容

元素内容:开始标签和结束标签之间夹着的内容~
innerHTML属性来获取/修改标签的元素内容~

还可以通过给这个属性赋值,来起到修改的作用~

这里赋值,不仅仅能够赋值文本,还可以赋值一个html片段

4.获取/修改元素属性

修改的就是开始标签里面写的哪些键值对

这里的属性,不光是可以去进行获取,也可以去进行修改!

此处通过修改 src属性,就可以影响到html界面上,一个图片是如何进行展示的
都是通过类似的方式来进行操作的!!!

alt是 img标签自带的属性~ 没有手动指定,是空字符串,不是undefined

5.获取/修改表单元素属性

像普通的元素(div,img,a,h1...),这些获取属性/修改属性,都非常简单
但是针对表单元素来说,这里涉及到的属性更特殊一点~
此时就单独拎出来说了~

value: input 的值.
disabled: 禁用
checked: 复选框会使用
selected: 下拉框会使用
type: input 的类型(文本, 密码, 按钮, 文件等)

input只能通过input.value来获取到输入框里面的值~
用innerHTML是获取不到的~
因为input标签是单标签,通过innerHTML 获取标签内部的子元素,肯定是没有的!!

JavaScript(WebAPI) (前端）相关推荐

javascript 判断前端是 pc端还是移动端
javascript 判断前端是 pc端还是移动端 <!DOCTYPE html> <html lang="en"> <head>< ...
webApi前端ajax调用后端返回{“readyState“:0,“status“:0,“statusText“:“error“}解决方案
webApi前端ajax调用后端返回{"readyState":0,"status":0,"statusText":"error& ...
《单页Web应用：JavaScript从前端到后端》——1.4 小结
本节书摘来自异步社区<单页Web应用:JavaScript从前端到后端>一书中的第1章,第1.4节,作者:[美]Michael S. Mikowski , Josh C. Powell著, ...
[JavaScript] 多数前端工程师都没注意到的一个关于console.log()的坑
[JavaScript] 多数前端工程师都没注意到的一个关于console.log()的坑请阅读以下代码并猜测结果: function test() {let obj = {}, arr=[]for ...
h5页面如何预览excel文件_如何使用JavaScript实现前端导入和导出excel文件?(H5编辑器实战复盘)...
前言最近笔者终于把H5-Dooring的后台管理系统初步搭建完成, 有了初步的数据采集和数据分析能力, 接下来我们就复盘一下其中涉及的几个知识点,并一一阐述其在Dooring H5可视化编辑器中的解 ...
如何使用JavaScript实现前端导入和导出excel文件(H5编辑器实战复盘)
前言最近笔者终于把H5-Dooring的后台管理系统初步搭建完成, 有了初步的数据采集和数据分析能力, 接下来我们就复盘一下其中涉及的几个知识点,并一一阐述其在Dooring H5可视化编辑器中的解 ...
JavaScript 实现前端下载图片
JavaScript 实现前端下载图片前几天公司的项目有个需求,实现点击下载图片功能,当时我就想着还不简单嘛,当即写下以下代码: const download = document.createEl ...
Security ❀ JavaScript Attacks 前端攻击
文章目录 JavaScript Attacks 前端攻击 1 Low Level 2 Medium Level 3 High Level 4 Impossible Level JavaScript A ...
HTML5期末大作业：管理系统后台网站设计——代理商销售管理系统后台(8页) HTML+CSS+JavaScript web前端设计与开发期末作品/期末大作业
HTML5期末大作业:管理系统后台网站设计--代理商销售管理系统后台(8页) HTML+CSS+JavaScript web前端设计与开发期末作品/期末大作业常见网页设计作业题材有个人. 美食. ...

JavaScript(WebAPI) (前端）