一.基本认知

WebAPI(Application Programming Interface 应用程序接口)

作用:使用JS操作HTML和浏览器

分类:DOM(文档对象模型)和BOM(浏览器对象模型)

DOM

DOM呈现以及与任意HTML/XML文档交互的API 是浏览器提供的一套专门用来操作网页内容的功能 开发网页内容特效和用户实现交互

DOM树

将HTML文档以树状结构直观地表现出来 直观地体现了标签与标签之间的关系

DOM对象

浏览器根据HTML标签生成的JS对象 所有的标签属性都可以在这个对象上找到 修改这个对象的属性会自动映射到标签上

核心思想:把网页内容当做对象处理

二.获取DOM对象

document.querySelector(”) 获取匹配的第一个元素

document.querySelectorAll(”) 获取NodeList对象集合

是一个伪数组！！！ 有长度,索引号的数组 但是没有pop() push()等方法

二.操作元素属性

1.对象.style.样式属性=”

(如果属性有连接符 需要转化为小驼峰命名法)

2.元素.className=’类名’

直接使用className赋值会覆盖之前的类名

3.classList操作类控制CSS

元素.classList.add(‘类名’)

元素.classList.remove(‘类名’)

元素.classList.toggle(‘类名’) //切换 有就删掉 没有就加上

加上active属性

toggle active属性 原本有active属性 现在消除掉（切换）

三.操作表单元素属性

并不多说什么

四.操作元素内容

将文本内容更新/添加到任意位置标签

1.元素.innerText 显示纯文本不解析标签

2.元素.innerHTML会解析标签

例:随机抽奖案例

五.定时器间歇函数

能够使用定时器函数重复执行代码 可以开启和关闭定时器

setInterval(函数名,时间间隔(ms))

开启后:

关闭后:

六.自定义属性

并不多说什么

这些就是DOM获取元素-修改属性的基本内容 要结合一些案例再巩固提高……