基础的DOM操作

完整的JavaScript是由ECMAScript（语法）、Browser Objects（DOM、BOM）(特性)组成的。

1、掌握基本的DOM查找方法。

document.getElementById()
语法：document.getElementById(“id”)
功能：返回对拥有指定id的第一个对象的引用
返回值：DOM对象
说明：id为DOM元素上id属性的值

document.getElementByTagName()
语法：document.getElementByName(“tag”)
功能：返回一个对所有tag标签引用的集合
返回值：数组
说明：tag为要获取的标签名称

2、掌握如何设置DOM元素的样式。

  1. 语法：ele.style.styleName=styleValue


功能：设置ele元素的css样式
说明：1、ele为要设置样式的DOM对象
2、styleName为要设置的样式的名称 注意*不能使用“-”形式，只能使用驼峰形式fontSize
3、styleValue为设置的样式值

3、innerHTML

的使用 语法：innerHTML
功能：返回ele元素开始和结束标签之间的HTML
语法：ele.innerHTML=”html”
功能：设置ele元素开始和结束标签之间的HTML内容为html
第三周的知识点 - 图1
打印的结果为第三周的知识点 - 图2

4、classname

语法：ele.calssname
功能：返回ele元素的class属性
语法：ele.className=”cls”
功能：设置ele元素的class属性为cls
注明：如果元素本身有一个class,会被新的class覆盖掉
第三周的知识点 - 图3
网页打印出来的结果为
第三周的知识点 - 图4

4、获取属性

语法：ele.getAttribute(“attribute”)
功能：返回ele元素的attribute
注明：
1、ele是要操作的dom对象
2、attribute是要获取的html属性（如:id)
3、不能获取class的属性，他会打印出undefind，可以使用className
4、可以获取标签本身自带的，标准的属性，如P标签的 id align 等等
第三周的知识点 - 图5
控制台打印如下

第三周的知识点 - 图6
如果是自己添加的属性，可使用一下方法：
var p=document.getElementById(“text”);
console.log(p.Attribute(“自己加的属性值”); //还能使用class

5、设置属性

语法：ele.setAttribute(“attribute”,value)
功能：在ele元素上设置属性
说明：
1、ele是要操作的dom对象
2、attribute为要设置的属性名称
3、value为设置的attribute属性的值，当你的值是字符串的时候需要加引号

6、删除属性

语法：ele.removeAttribute(“attribute”)
功能：删除元素ele上的attribute属性
说明：
1、ele是要操作的dom对象
2、attribute是要删除的属性名称
第三周的知识点 - 图7
控制台显示align是属性已经被删除
第三周的知识点 - 图8

JavaScript的事件基础

需要掌握的知识点
1、掌握什么是事件
答：事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。
2、掌握HTML事件
答：直接在html元素标签内添加事件，执行脚本。

HTML事件

语法：
功能：在html元素上绑定时间。
说明：执行脚本可以是一个函数的调用。

3、掌握DOM0级事件
4、掌握常用的鼠标与键盘事件
鼠标事件汇总
1、onload：页面加载时触发
2、onclick：鼠标点击时出发
3、onmouserover：鼠标滑过时触发
4、onmouseout：鼠标离开时触发
5、onfoucs：获得焦点时触发
6、onblur：失去焦点时触发
7、onchange：域的内容改变时发生
5、掌握this的指向问题

第三周的知识点 - 图9

使用this,onclick,mouseover,mouseout操作DOM元素，从开始按钮上面滑过按钮边红，从按钮上移除，按钮恢复蓝色第三周的知识点 - 图10

DOM0级事件

1、通过DOM获取HTML元素

2、(获取HTML元素).事件=执行脚本

语法：ele.事件=执行脚本
功能：在DOM对象上绑定事件
说明：执行脚本可以是一个匿名函数，也可以是一个函数的调用。
第三周的知识点 - 图11
语法：DOM元素.事件=function 函数名(){}或者直接DOM元素.事件=函数名；

onload

作用：页面加载时触发
语法：window.onload(){
JS脚本
}
功能：可以让JS脚本写在代码的上方。
说明：如果直接把代码写在上方会报错，内容没加载完就直接加载脚本，会报错；不过把代码写在onload里面就不会报错了；

onfocus事件

功能：当文本框获得光标时，触发绑定事件；
语法：ele.onfocus=function(){};
说明：onfocus事件用于：1、input标签type为text、password
2、textarea标签
第三周的知识点 - 图12
页面上效果，点击输入框，旁边隐藏的div会显示出来
点击前
第三周的知识点 - 图13
点击后
第三周的知识点 - 图14

onblur事件

功能：当文本框失去光标时，触发绑定事件；
语法：ele.onblur=function(){};
说明：onblur事件用于：1、input标签type为text、password
2、textarea标签
第三周的知识点 - 图15

当焦点(鼠标)离开文本框时，页面会弹出对话框
第三周的知识点 - 图16

onchange事件

功能：事件会在域的内容改变时发生。
语法：ele.onblur=function(){};
说明：onblur事件用于：1、以及