js基础已经了解结束,我们开始学习webapi
一.webpi 了解
web : 网页
api :预先定义的方法,帮我们实现某种特定的功能 特征:输入(参数) 输出(返回值)
webapi就是浏览器提供给我们用来操作页面的方法
js的组成: 1. ECMAScript : js基础课 ,js高级 , js的标准规范,规范了js的基本语法数据类型
2. DOM 操作网页元素的方法
3. BOM 操作浏览器功能的方法
二.DOM
文档对象模型(文档树模型) :整个页面和页面中所有的内容都视为对象
一种操作网页元素的方法
1.几种常见的概念
文档: document DOM把整个网页 => 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.标签属性 alt title src 等等,可以通过获取的标签对象直接添加
2.样式属性 background color fontsize
添加class类名
如:在html中增加类型 <div class ='red'></div>
在DOM中 div.className = 'red'
3.文本内容 innerText
5.事件
概念:触发-响应的机制 js基于事件
三要素 : 事件源 给谁注册 比如:btn
事件名 注册什么 比如:click点击事件 前面要加on
事件处理函数 就是后面的函数 执行啥
代码: btn.onclick = function( ){ }
事件处理函数不能立马执行, 触发事件的时候执行
6.this
事件中的this , 代表注册事件的对象,事件源 ,指向当前对象