webAPI第一天

Web API 基本认知

DOM 是文档对象模型，操作网页内容，可以开发网页内容特效和实现用户交互

浏览器根据标签 自动生成了对应的js对象

可以让我们通过js的方式很很方便来控制页面的标签

BOM

DOM对象（重要）

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

document 对象

是 DOM 里提供的一个对象 所以它提供的属性和方法都是用来访问和操作网页内容的 例：document.write() 网页所有内容都在document里面

DOM 树

将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树 作用：文档树直观的体现了标签与标签之间的关系

获取DOM对象

了解

根据id获取一个dom元素 document.getElementById

根据标签名称获取dom数组 document.getElementsByTagName

根据类名获取dom数组 document.getElementsByClassName

设置文本内容

document.write

只能在body标签中写内容,文本中包含的标签会被解析, 以后很少用！

dom.innerText="你好" 设置标签的文本内容

将文本内容添加/更新到任意标签位置, 文本中包含的标签不会被解析

dom.innerHTML

将文本内容添加/更新到任意标签位置, 能够解析标签

设置标签的文本内容还可以设置设置标签 dom.innerHTML=<a>链接</a>

设置元素的样式

classList 是追加和删除不影响以前类名

dom.style

dom.style.color="red"

dom.className 容易覆盖以前的类名

dom.className="nav"

dom.classList

追加/ 添加 dom.classList.add("类名")

移除/ 删除 dom.classList.remove("类名")

切换 dom.classList.toggle("类名")

设置/修改 表单元素 属性

表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示 如果为true 代表添加了该属性 如果是false 代表移除了该属性 比如： disabled、checked、selected

定时器的内容

开启定时器 1000=1秒

let timeId=setInterval(函数,时间间隔-单位毫秒)

关闭定时器

clearInterva(timeId)