js基础已经了解结束,我们开始学习webapi
一.webpi 了解 web : 网页
api :预先定义的方法,帮我们实现某种特定的功能特征:输入(参数)输出(返回值)
webapi就是浏览器提供给我们用来操作页面的方法
js的组成:1. ECMAScript : js基础课 ,js高级 ,js的标准规范,规范了js的基本语法数据类型
2. DOM操作网页元素的方法
3. BOM 操作浏览器功能的方法
二.DOM 文档对象模型(文档树模型) :整个页面和页面中所有的内容都视为对象
一种操作网页元素的方法
1.几种常见的概念
文档:documentDOM把整个网页=> document
以后想要操作网页 => 操作document即可
还要网页里面的内容都当成对象
节点 : node
网页中所有的内容:标签节点注释节点文本节点属性节点
元素: element标签节点
2.getElementById
通过id获取元素 : document.getElementById ( )
参数是:id名称
返回值:获取到的元素,dom对象
dom对象中的属性和标签中属性是一一对应的,通过修改dom对象中的属性达到修改标签属性的作用
如果没有获取元素,返回null
3.getElementByTagName
通过标签名获取元素
1.参数:字符串标签名称
2.返回值:伪数组
3.方法有2个,document.getElementsByTagName( )
box.getElementsByTagName( )
4.一般情况下遍历的多多个元素:遍历单个元素:arr[0]
4.修改元素的属性
1.标签属性alttitlesrc 等等,可以通过获取的标签对象直接添加
2.样式属性backgroundcolorfontsize
添加class类名
如:在html中增加类型
【编程语言|webAPI 第一天】在DOM中div.className = 'red'
3.文本内容innerText
5.事件
概念:触发-响应的机制js基于事件
三要素 : 事件源给谁注册比如:btn
事件名注册什么比如:click点击事件前面要加on
事件处理函数就是后面的函数 执行啥
代码:btn.onclick = function( ){}
事件处理函数不能立马执行,触发事件的时候执行
6.this
事件中的this,代表注册事件的对象,事件源,指向当前对象
推荐阅读
- web网页模板|如此优秀的JS轮播图,写完老师都沉默了
- 【C】题目|【C语言】题集 of ⑥
- 接口|axios接口报错-参数类型错误解决
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- JavaScript|JavaScript — 初识数组、数组字面量和方法、forEach、数组的遍历
- JavaScript|JavaScript — call()和apply()、Date对象、Math、包装类、字符串的方法
- 前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
- 游戏|2022年如何学习前端前沿技术,破卷而出()
- 分布式|《Python3网络爬虫开发实战(第二版)》内容介绍
- vue|Vue面试常用详细总结