web APIs学习笔记

1.什么是web APIs

就是用js去操作网页和浏览器

可操作的模型分为DOM（文档对象模型）和BOM（浏览器对象模型）

2.DOM模型

DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API

简单来说DOM就是用js语言来控制HTML网页里的内容   一般用来和用户进行交互

2.1.什么是dom对象

dom对象是根据HTML中标签生成的对象   对象里的属性就是 标签可设置的属性  

dom就是要把标签当做对象来处理  从而进行修改网页的内容 样式来实现交互

而dom里面最大的对象就是document   可以看做整个网页

2.2.如何获取dom对象

常用的方法为通过css选择器来获取dom元素

document.querySelector('css选择器')   获取匹配的第一个元素

document.querySelectorAll('css选择器')   获取匹配的所有元素并用伪数组存下来

伪数组是不能使用pop()等方法的数组  可以用for循环和下标来遍历整个数组

2.3.修改对象内容

innerText  /  innerHTML

innertext用来添加和更新内容  他不识别标签  只当做文字

 innerHTML也用来添加和更新内容  但他识别标签 

2.4.操作对象属性

4.1常用属性

对象.属性 = 值

4.2操作元素样式属性

4.2.1通过style操作元素样式

对象.style.样式属性='值'

4.2.2通过修改类名操作元素样式

对象.className='类名' 替换类名 会替换掉原来的类名  如果是要添加  把之前的类名一块写上

4.2.3通过classList操作元素样式

为了解决className容易覆盖之前的类名  我们可以通过classList方式追加和删除类名

元素.classList.add('类名')//添加元素

元素.classList.remove('类名')//删除元素

元素.classList.toggle('类名')//切换元素（有这个类就删掉，没有就加上）

4.3操作表单属性

text 文本框

text.value  拿到或修改text文本框的文字

checked  复选框

checked.checked=false/true是否勾选复选框

button 按钮

button.disabled=false/true是否禁用按钮 默认false不禁用

2.5定时器

设置倒计时等效果时会使用到此方法

let n = setInterval(要执行的函数,间隔时间(毫秒))；//开启定时器  返回值是number类型 表示定时器的编号  用来关闭定时器

clearInterval(变量名 n )//关闭定时器