黑马Javascript基础02
Web API
概念
DOM 树
如下图所示，将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树，文档树直观的体现了标签与标签之间的关系。
DOM 节点
节点是文档树的组成部分，每一个节点都是一个 DOM 对象，主要分为元素节点、属性节点、文本节点等。
-
【元素节点】其实就是 HTML 标签，如上图中
head、div、body等都属于元素节点。 -
【属性节点】是指 HTML 标签中的属性，如上图中
a标签的href属性、div标签的class属性。 -
【文本节点】是指 HTML 标签的文字内容，如
title标签中的文字。 -
【根节点】特指
html标签。 -
其它..
document
document 是 JavaScript 内置的专门用于 DOM 的对象，该对象包含了若干的属性和方法，document 是学习 DOM 的核心。
获取DOM对象
-
querySelector 满足条件的第一个元素
-
querySelectorAll 满足条件的元素集合 返回伪数组
-
了解其他方式
-
getElementById
-
getElementsByTagName
-
总结：
-
document.getElementById 专门获取元素类型节点，根据标签的
id属性查找 -
任意 DOM 对象都包含 nodeType 属性，用来检检测节点类型
操作元素内容
通过修改 DOM 的文本内容，动态改变网页的内容。
innerText 将文本内容添加/更新到任意标签位置，文本中包含的标签不会被解析。
innerHTML 将文本内容添加/更新到任意标签位置，文本中包含的标签会被解析。
总结：如果文本内容中包含 html 标签时推荐使用 innerHTML，否则建议使用 innerText 属性。
年会抽奖案例
操作元素属性
有3种方式可以实现对属性的修改：
常用属性修改
直接能过属性名修改，最简洁的语法
控制样式属性
应用【修改样式】，通过修改行内样式 style 属性，实现对样式的动态修改。
通过元素节点获得的 style 属性本身的数据类型也是对象，如 box.style.color、box.style.width 分别用来获取元素节点 CSS 样式的 color 和 width 的值。
任何标签都有 style 属性，通过 style 属性可以动态更改网页标签的样式，如要遇到 css 属性中包含字符 - 时，要将 - 去掉并将其后面的字母改成大写，如 background-color 要写成 box.style.backgroundColor
操作类名(className) 操作CSS
如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。
通过 classList 操作类控制CSS
为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名
随机轮播图案例
操作表单元素属性
表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框
正常的有属性有取值的跟其他的标签属性没有任何区别
获取:DOM对象.属性名
设置:DOM对象.属性名= 新值
自定义属性
标准属性: 标签天生自带的属性 比如class id title等, 可以直接使用点语法操作比如： disabled、checked、selected
自定义属性：
在html5中推出来了专门的data-自定义属性
在标签上一律以data-开头
在DOM对象上一律以dataset对象方式获取
间歇函数
setInterval 是 JavaScript 中内置的函数，它的作用是间隔固定的时间自动重复执行另一个函数，也叫定时器函数。
setInterval（函数名，间隔时间）
函数名：不要（），间隔时间：单位是毫秒
关闭定时器：clearInterval()
倒计时案例
自动轮播图案例
