目标：
简介：
能够说出 Web APIs 阶段与 JavaScript 语法阶段的关联性
能够说出什么是 API
能够说出什么是 Web API
DOM:
能够说出什么是 DOM
能够获取页面元素
能够给元素注册事件
能够操作 DOM 元素的属性
能够创建元素
能够操作 DOM 节点

DOM
dom(文档对象模型)：
处理文档的接口
可以像操作对象那样，去操作页面（结构、样式、内容）
dom树：
文档：一个页面就是一个文档，DOM中使用document表示（整个页面当做对象）
元素：标签，element表示
节点：所有内容，node表示
获取元素：
因为文档页面是从上往下加载，所以先得有标签，script写到标签下面
console.dir( )  打印我们返回的元素对象 更好的查看里面的属性和方法
ID：
document.getElementById( ‘ID名’ )
参数： Id 是大小写敏感的字符串
返回的是一个元素对象（未获取返回Null）
标签名：
document.getElementsByTagName(' 标签名 ')
参数：字符串
返回值：元素对象的集合  以伪数组的形式存储的
通过遍历获得每个元素对象(动态)，（未获取返回空的伪数组）
element.getElementsByTagName()  可以得到指定元素里面的某些标签
类名：
document.getElementsByClassName( '类名' )   H5新增  IE9+
指定选择器：
document.querySelector( ‘指定选择器“ )     H5新增
返回值：指定选择器的第一个元素对象
切记：里面的选择器需要加符号 .box  #nav

document.querySelectorAll( '指定选择器' )
返回值：指定选择器的所有元素
特殊元素（body, html）:
获取body元素：
document.body
获取html元素：
document.documentElement
事件：
当用户做了某个操作，出现了相应的特效
事件三要素：
事件源（事件被触发的对象）
事件类型（如何触发，什么事件，如鼠标点击、经过）
事件处理程序（通过一个函数赋值的方式完成）
操作元素：
内容:
修改内容：element.innerText = 新内容
不识别html标签，去除标签、空格和换行（非标准）
修改内容：element.innerHTML = 新内容
识别html标签，原封不动的获取标签中间的内容（W3C标准）
获得内容：element.innerText      element.innerHTML
属性：
获得属性值：
element.属性：只能获取标签自带的属性
element.getAttribute('属性')：既能获取标签自带属性，也能获取自定义属性
修改属性值：
element.属性 = 新值
element.setAttribute('属性'，值)：主要针对自定义属性
移除属性：
element.removeAttribute('属性')
案例：不同时间显示不同图片和问候语

表单属性：
type、value、checked、selected、disabled
表单元素中的状态属性【如：disabled、checked】，js用true、false表示状态
事件处理函数的this代表事件源对象
案例：显示密码  （小技巧：借助一个变量来标识文本框的状态）

样式：
element.style            行内样式操作
element.className  类名样式操作  ->  适合样式较多或者功能复杂的情况
会覆盖掉原先的类名。
如果需要保留：element.className = ' 原先的类名  更改的类名 '
案例：控制标签的显示和隐藏
案例：密码框验证信息
案例：循环精灵图
案例：显示隐藏文本框的内容

目标：
简介：
能够说出 Web APIs 阶段与 JavaScript 语法阶段的关联性
能够说出什么是 API
能够说出什么是 Web API
DOM:
能够说出什么是 DOM
能够获取页面元素
能够给元素注册事件
能够操作 DOM 元素的属性
能够创建元素
能够操作 DOM 节点

DOM
dom(文档对象模型)：
处理文档的接口
可以像操作对象那样，去操作页面（结构、样式、内容）
dom树：
文档：一个页面就是一个文档，DOM中使用document表示（整个页面当做对象）
元素：标签，element表示
节点：所有内容，node表示
获取元素：
因为文档页面是从上往下加载，所以先得有标签，script写到标签下面
console.dir( )  打印我们返回的元素对象 更好的查看里面的属性和方法
ID：
document.getElementById( ‘ID名’ )
参数： Id 是大小写敏感的字符串
返回的是一个元素对象（未获取返回Null）
标签名：
document.getElementsByTagName(' 标签名 ')
参数：字符串
返回值：元素对象的集合  以伪数组的形式存储的
通过遍历获得每个元素对象(动态)，（未获取返回空的伪数组）
element.getElementsByTagName()  可以得到指定元素里面的某些标签
类名：
document.getElementsByClassName( '类名' )   H5新增  IE9+
指定选择器：
document.querySelector( ‘指定选择器“ )     H5新增
返回值：指定选择器的第一个元素对象
切记：里面的选择器需要加符号 .box  #nav

document.querySelectorAll( '指定选择器' )
返回值：指定选择器的所有元素
特殊元素（body, html）:
获取body元素：
document.body
获取html元素：
document.documentElement
事件：
当用户做了某个操作，出现了相应的特效
事件三要素：
事件源（事件被触发的对象）
事件类型（如何触发，什么事件，如鼠标点击、经过）
事件处理程序（通过一个函数赋值的方式完成）
操作元素：
内容:
修改内容：element.innerText = 新内容
不识别html标签，去除标签、空格和换行（非标准）
修改内容：element.innerHTML = 新内容
识别html标签，原封不动的获取标签中间的内容（W3C标准）
获得内容：element.innerText      element.innerHTML
属性：
获得属性值：
element.属性：只能获取标签自带的属性
element.getAttribute('属性')：既能获取标签自带属性，也能获取自定义属性
修改属性值：
element.属性 = 新值
element.setAttribute('属性'，值)：主要针对自定义属性
移除属性：
element.removeAttribute('属性')
案例：不同时间显示不同图片和问候语

表单属性：
type、value、checked、selected、disabled
表单元素中的状态属性【如：disabled、checked】，js用true、false表示状态
事件处理函数的this代表事件源对象
案例：显示密码  （小技巧：借助一个变量来标识文本框的状态）

样式：
element.style            行内样式操作
element.className  类名样式操作  ->  适合样式较多或者功能复杂的情况
会覆盖掉原先的类名。
如果需要保留：element.className = ' 原先的类名  更改的类名 '
案例：控制标签的显示和隐藏
案例：密码框验证信息
案例：循环精灵图
案例：显示隐藏文本框的内容