Web APIs
DOM / BOM
API是一些预定义的函数，无需访问源码和理解内部工作机制。
Web API是浏览器提供的一套操作浏览器功能和页面元素的API。
做交互效果，如：alert

DOM
文档对象模型document object mode。是W3C组织提供的处理可扩展标记语言的标准编程接口
作用：改变网页的结构、内容和样式。

DOM树
文档                一个页面，document
元素                所有标签，element
节点                所有内容（标签、属性、文本、注释...），node


因为页面从上往下加载，所以先必须需有标签，script写到标签下面。
console.dir( );

获取元素
根据ID获取        document.getElementById(id);
id必须是大小写敏感的字符串(' ')；
返回的是一个元素对象。

根据标签名获取
返回的结果是伪数组，数组的每个元素就是每个标签名对象；
如果没有获取到元素，返回的是一个空的伪数组；
获取的到的元素是动态的。

★获取指定标签的元素对象:
element.getElementsByTagName(' ')                element是父元素对象。

根据html5新增方法获取
有兼容性问题，IE9以下版本不能用
1.根据类名获取元素        getElementsByClassName(' ');
2.返回指定选择器第一个元素对象        document.querySelector(' ');

3.返回指定选择器所有元素对象        document.querySelectorAll(' ');

获取不到时显示为null
★element.querySelector(' ');                element.querySelectorAll(' ');

返回body元素对象        document.body
返回html元素对象        document.documentElement

事件
事件是javescript侦测到的行为        触发→响应 机制
事件源对象：获取事件源
事件类型：如何触发？
事件处理程序：函数赋值
btn.onclick = function( ){ };


修改元素内容
element.innerText

element.innerHTML        W3C标准
区别：element.innerText不能识别HTML标签，过滤标签并且去除空格和换行；        element.innerHTML识别HTML标签，保留空格和换行。

修改元素属性

表单里面的值是通过value属性来修改的~
表单元素的状态属性设置，javascript中用true或false来表示状态。

修改元素样式
里面属性采取驼峰命名法
js修改的样式属性会生成行内样式，权重比较高

1.element.style        适用于样式比较少或功能简单的时候

淘宝二维码显示 / 隐藏案例 （结构：close-btn在box里）


2.element.className        适用于样式复杂功能较多的时候
预先写好一个class样式，不引用，需要时再引用新样式

图示覆盖原先的样式，如需保留原先的样式，则：
this.className = 'before change';
密码框验证信息案例

循环精灵图案例

显示和隐藏文本框内容案例

排他算法案例

百度换肤案例

表格换色案例


操作元素属性        拓展
element.属性;                只能获取内置属性
element.getAttribute('属性');                还可以获取自定义属性

element.属性='值';                设置内置属性
element.setAttribute('属性','值');                可以设置自定义属性

element.removeAttribute('属性');                移除属性

Web APIs
DOM / BOM
API是一些预定义的函数，无需访问源码和理解内部工作机制。
Web API是浏览器提供的一套操作浏览器功能和页面元素的API。
做交互效果，如：alert

DOM
文档对象模型document object mode。是W3C组织提供的处理可扩展标记语言的标准编程接口
作用：改变网页的结构、内容和样式。

DOM树
文档                一个页面，document
元素                所有标签，element
节点                所有内容（标签、属性、文本、注释...），node


因为页面从上往下加载，所以先必须需有标签，script写到标签下面。
console.dir( );

获取元素
根据ID获取        document.getElementById(id);
id必须是大小写敏感的字符串(' ')；
返回的是一个元素对象。

根据标签名获取
返回的结果是伪数组，数组的每个元素就是每个标签名对象；
如果没有获取到元素，返回的是一个空的伪数组；
获取的到的元素是动态的。

★获取指定标签的元素对象:
element.getElementsByTagName(' ')                element是父元素对象。

根据html5新增方法获取
有兼容性问题，IE9以下版本不能用
1.根据类名获取元素        getElementsByClassName(' ');
2.返回指定选择器第一个元素对象        document.querySelector(' ');

3.返回指定选择器所有元素对象        document.querySelectorAll(' ');

获取不到时显示为null
★element.querySelector(' ');                element.querySelectorAll(' ');

返回body元素对象        document.body
返回html元素对象        document.documentElement

事件
事件是javescript侦测到的行为        触发→响应 机制
事件源对象：获取事件源
事件类型：如何触发？
事件处理程序：函数赋值
btn.onclick = function( ){ };


修改元素内容
element.innerText

element.innerHTML        W3C标准
区别：element.innerText不能识别HTML标签，过滤标签并且去除空格和换行；        element.innerHTML识别HTML标签，保留空格和换行。

修改元素属性

表单里面的值是通过value属性来修改的~
表单元素的状态属性设置，javascript中用true或false来表示状态。

修改元素样式
里面属性采取驼峰命名法
js修改的样式属性会生成行内样式，权重比较高

1.element.style        适用于样式比较少或功能简单的时候

淘宝二维码显示 / 隐藏案例 （结构：close-btn在box里）


2.element.className        适用于样式复杂功能较多的时候
预先写好一个class样式，不引用，需要时再引用新样式

图示覆盖原先的样式，如需保留原先的样式，则：
this.className = 'before change';
密码框验证信息案例

循环精灵图案例

显示和隐藏文本框内容案例

排他算法案例

百度换肤案例

表格换色案例


操作元素属性        拓展
element.属性;                只能获取内置属性
element.getAttribute('属性');                还可以获取自定义属性

element.属性='值';                设置内置属性
element.setAttribute('属性','值');                可以设置自定义属性

element.removeAttribute('属性');                移除属性