目录
Web APIs
Web APIs作用就是使用JavaScript去操作html和浏览器
Web APIs分类：DOM、BOM
DOM（页面文档对象模型）：操作文档，比如对页面元素进行移动、大小、添加删除...
BOM（浏览器对象模型）：操作浏览器，比如页面弹窗，检测窗口宽度，存储数据到浏览器...
DOM
DOM是浏览器提供的一套专门用来操作网页内容的功能，作用是开发网页内容特效和实现用户交互
DOM树：将HTML文档以树状结构直观的表现出来，我们称之为文档树或DOM树，描述网页内容关系的名词，直观的体现了标签与标签之间的关系
DOM对象
DOM对象是浏览器根据html标签生成的JS对象，DOM的核心思想就是把网页内容当做对象来处理
document对象是DOM里提供的一个对象，它提供的属性和方法都是用来访问和操作网页内容的，网页的所有内容都在document里面
查找/获取DOM对象
查找/获取DOM对象就是利用了选择页面中的标签元素
根据CSS选择器来获取DOM元素
选择匹配的第一个元素：document.querySelector(‘css选择器’)
参数：包含一个或多个有效的CSS选择器字符串
返回值：CSS选择器匹配的第一个元素，一个HTMLElement对象，如果未匹配到则返回null
选择匹配的多个元素：document.querySelectorAll(‘css选择器’)
参数：包含一个或多个有效的CSS选择器字符串
返回值：CSS选择器匹配的NodeList（对象集合）
获取一个DOM对象后，可以直接操作修改，但获取多个DOM对象后，不可以直接修改，只能通过遍历的方式依次给里面的元素做修改
用“document.querySelectorAll(‘css选择器’)”得到的是一个伪数组，有长度有索引号的数组，但没有pop()、push()等数组方法
想要得到里面的每一个对象，则需要遍历（for）的方式获得
哪怕只有一个元素，通过“document.querySelectorAll(‘css选择器’)”获取过来的也是一个伪数组
操作元素内容
DOM对象都是根据标签生成的，所以操作标签本质上就是操作DOM对象
如果想要修改标签元素内容，可以使用：
对象.innerText属性
将文本内容添加/更新到任意标签位置，显示纯文本，不解析标签
对象.innerHTML属性
将文本内容添加/更新到任意标签位置，会解析标签
操作元素常用属性
可以通过JavaScript设置/修改标签元素属性
比如通过src更换图片，常见属性比如：href、title、src...
语法：对象.属性 = 值
操作元素样式属性
可以通过JavaScript设置/修改标签元素的样式属性
比如：通过轮播图小圆点自动换颜色样式，点击按钮可以滚动图片...
通过style属性操作CSS语法：对象.style.样式属性 = 值
修改样式通过style属性引出，如果样式属性有“-”连接符，需要转换为小驼峰命名法
通过类名（className）操作CSS语法：对象.className = ‘CSS类名’
className是新值换旧值，如果需要添加一个类，需要保留之前的类名，要一起写在‘’里面
通过classList操作类控制CSS
className容易覆盖以前的类名，可以通过classList方式追加或删除类名
追加一个类语法：对象.classList.add(‘类名’)
删除一个类语法：对象.classList.remove(‘类名’)
切换一个类语法：对象.classList.toggle(‘类名’)
操作表单元素属性
获取：对象.属性名
设置：对象.属性名 = 值
表单中属性添加就有效果，移除就没有效果，一律使用布尔值表示，如果为true，代表添加了该属性，如果为false，代表移除了该属性
776
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
