Web APIs 第一天 DOM获取元素

1.Web APIs介绍

API是为我们程序员提供的一个接口，帮助我们实现某种功能

Web APIs主要针对于浏览器与网页提供的接口，主要针对于浏览器做交互效果 一般都有输入输出，很多都是方法（函数） Web APIs提供操作浏览器（BOM）与网页（DOM）的接口

DOM：页面文档对象模型（操作网页内容，把文档当做对象，里面有属性和方法） BOM：浏览器对象模型

2.DOM树

​ html文档以树状结构的形式展现出来

​ 作用：标签之间的关系保留着

​ 每一个标签就是一个节点（也叫对象），元素的是元素节点，属性的是属性节点，文本的是文本节点

​ document是最大的对象

3.选择单个元素

​ document.querySelector('css选择器'); 选择器有标签选择器、类选择器、id选择器

​ 选择的是单个元素，并且是第一个元素，如果有多个的话就选择第一个

​ 如果没有匹配到，返回null

4.选择多个元素

​ document.querySelectorAll('css选择器');

​ 选择多个元素，返回的是伪数组，下标和length有，方法没有 下标从0开始，和镇数组查询一样

​ 用ALL查询返回的都是伪数组，哪怕只有一个返回的只有一个 获取不到就是一个空数组

​ 遍历的话用for循环遍历

​ 获取body: document.body

​ 获取html：document.documentElement

5.设置元素的内容

​ document.write(); 一般不用，会重写页面信息 加的话只加到</body>的前面

​ 元素.innerText=' '; 只可以修改文本内容

​ 元素.innerHTML=' '; 既可以修改文本内容，也可以识别解析标签

​ 引号不一定要有，字母得加引号

6.设置元素标签本身的样式属性

​ 对象.style.样式属性 = 值；

​ 复合属性要遵循小驼峰命名法，把-删掉，连起来写

​ js操作元素的样式属性是加到行内样式了

7.操作类名设置样式

​ 对象.className = ' '; 元素本身没有，添加一个

​ 对象.classList.add('类名'); 元素本身有，追加一个类名

​ 对象.classList.remove('类名'); 删除类名

​ 对象.classList.toggle('类名'); 切换类名 元素中如果有两个类c1和c2，对象.classList.toggle('c2'); c2会删除增加删除增加

8.设置表单元素

​ 获取表单元素：对象.属性

​ 设置表单元素：对象.属性 = 值；

​ 表单.value = '值';

​ 表单.type = '表单中的type值'；

​ 表单中的disabled、checked，下拉菜单中的selected，都可以获取（console.log(对象.disable)）和设置(对象.disable = true；或 对象.disable = false；) 设置的时候表单标签中要有那个属性

9.定时器

​ 开启定时器(反复性间歇性定时器)：setInterval(函数，间隔时间)； 间隔时间单位是毫秒

​ 不要加括号，加括号就是调用了，返回undefined

​ 定时器标识的本质是数字，打印变量的时候，出来是1,2,3...，不管变量是几

​ 关闭计时器：把开启定时器赋值给一个变量，然后打印变量