今日内容
1. JavaScript:
1. ECMAScript:
2. BOM:
3. DOM:
1.事件
1、DOM的简单学习：为了满足案例要求
- 功能：控制html文档的内容
- 代码：获取页面标签(元素)对象 Element
- document.getElementById("id值")：通过元素的id获取元素对象
- 操作Element对象：
- 修改属性值：
- 明确获取的对象是哪一个。
- 查看API文档，找其中有哪些属性可以修改。
- 修改标签体内容：
2、事件简单学习
- 功能：某些组件被执行了某些操作后，会触发某些代码的执行。
- 如何绑定事件：
- 直接在html标签上，指定事件的属性（onclick），属性值就是js代码（onclick="alert('我被点了')"）。
- 通过js获取元素对象，指定事件属性，设置一个函数。
BOM
1. 概念：Browser Object Model 浏览器对象模型
* 将浏览器的各个组成部分封装成对象。
2. 组成：
Window: 窗口对象
History：历史记录对象
Location：地址栏对象
Navigator：浏览器对象
Screen：显示器屏幕对象
一、具体BOM对象的学习
1.Window: 窗口对象
1.创建
2.方法
1. 与弹出框有关的方法
alert()：显示带有一段消息和一个确认按钮的警告框。
confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。
* 如果用户点击确定按钮，则方法返回true
* 如果用户点击取消按钮，则方法返回false
prompt()：显示可提示用户输入的对话框。
* 返回值，获取用户输入的值。
2. 与打开和关闭有关的方法
close()：关闭浏览器窗口。
window.close():所以是关闭当前的窗口。
open()：打开一个新的浏览器窗口或查找一个已命名的窗口。
返回值是一个新的window对象
3. 与定时器有关的方法
setTimeout()：在指定的毫秒数后调用函数或计算表达式。
* 返回值：一个唯一标识id。
* 参数：
1. js代码或者方法对象
2. 毫秒值
clearTimeout()：取消由 setTimeout() 方法设置的 timeout。
* 参数是setTimeout()的返回值-----id
setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval()：取消由 setInterval() 设置的 timeout。
3.属性
1.获取其他BOM对象
history
location
Navigator
Screen
2.获取DOM对象
就是经常用的document方法，不过经常省略window.document
4.特点
Window对象不需要创建，可以直接使用。 window.方法名();
window引用可以省略。方法名();
2.Location地址栏对象
-Location对象包含当前的URL的信息（统一资源标识符，路径）。
-Location对象时Window对象的一个部分，可通过window.location属性来访问。
1.创建
1.window.ocation
2.location
2.方法
reload():重新加载当前文档（刷新）
3.属性
href：设置或返回完整的URL.
3.History:历史记录对象
-是当前window窗口访问过的历史记录，不是整个浏览器的访问记录（日常所指）
1.创建（获取）
window.history
history
2.方法
back() 加载history列表中的前一个URL
forward() 加载history列表中的下一个URL
go() 加载history列表中的某个具体页面
3.属性
length 返回当前窗口历史列表中的URL数量
二、DOM：
* 概念：Document Object Model文档对象模型。
将标记语言文档（HTML文档）的各个组成部分封装成对象。可以使用这些对象，对标记
语言进行CRUD的动态操作。
DOM将HTML文档表达为树结构
* W3C DOM标准被分为3个不同的部分
1.核心 DOM:针对任何结构化文档的标准模型
document:文档对象
Element:元素对象
Attribute:属性对象
Text：文本对象
Comment:注释对象
Node:节点对象，其他5个的父对象
2.XML DOM：针对XML文档的标准模型
3.HTML DOM：针对HTML文档的标准模型
1、核心DOM模型
* Document:文档对象
1.创建（获取）：在html dom模型中，可以使用window对象来获取。因为document对象是
window对象的一部分。
window.document
document(window可以省略)
2.方法
获取Element对象
* getElemetnById():根据id属性值获取元素对象。
id属性值一般唯一。
* getElementByTagName():根据标签名称获取标签对象们。
如：一个页面可以定义许多个div标签，那么获取一个div 数组。
返回值是一个元素的数组。
* getElementsByClassName():根据Class属性值获取元素对象们。
返回值是一个数组。
* getElementsByName():根据name属性值获取元素对象们。
返回值是一个数组。
创建其他DOM对象
* createAttribute(name)
* ctreatComment()
* creatElement()
* creatTextNode()
3.属性
* Element:元素对象
1.创建/获取：通过document来获取和创建
2.方法
* removeAttribute():删除属性
* setAttribute():设置属性
3.属性
* Node：结点对象
节点对象代表文档树中的一个单独的节点。
所有的DOM对象都可以被认为是一个节点。
1.方法：
* CRUDdom树：
1.appendChild() 向节点的子节点列表的结尾添加新的子节点。
2.removeChild() 删除（并返回）当前节点的指定子节点。
3.replaceChild() 用新节点替换一个子节点。
2.属性
* parentNode 返回当前节点的父节点。
2、HTML DOM
1.标签体的设置和获取：innerHTML
2.使用HTML元素对象的属性：
3.控制元素样式
* 修改样式方式1:使用元素（标签）的style属性。
style是所有标签都有的属性，style后面再接CSS各种键的名称
div1.style.border = "1px solid red";
font-size：是两个单词连起来的CSS键--->fontSize
div1.style.fontSize = "20px";
* 修改样式方式2：
提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。
```
<style>
/*类选择器*/
.d1{
border: 1px solid red;
width: 100px;
height: 100px;
}
.d2{
border: 1px solid blue;
width: 200px;
height: 200px;
}
</style>
var div2 = document.getElementById("div2");
//修改样式方式2
div2.onclick = function () {
div2.className = "d1";
}
```
3、事件监听机制
1 概念：某些组件被执行了某些操作后，触发某些代码的执行
* 事件：某些操作，如：单机，双击，键盘按下，鼠标移动
* 事件源：组件。如：按钮，文本输入框...
* 监听器：代码。
* 注册监听：将事件，事件源，监听器结合在一起。
当事件源上发生了某个事件，则触发执行某个监听器代码。
2 常见的事件
* 点击事件：
1.onclick:单击事件
2.ondbclick:双击事件
* 焦点事件
1.onblur:失去焦点
一般进行表单校验。
2.onfocus:获得焦点
* 加载事件
1.onload:一张页面或一幅图加载完毕时
* 鼠标事件
1.onmousedown 按下鼠标按钮时触发。
* 定义一个形参来接收event对象。
* event对象的button属性可以获取哪个鼠标按钮键被点击了。
2.onmouseup 释放鼠标按钮时触发.
3.onmousemove 鼠标指针在元素上被移。
4.onmouseout 鼠标指针从某元素离开。
5.onmouseover 当鼠标指针移动到元素上时触发。
* 键盘事件
1.onkeydown 在用户按下按键时触发
2.onkeyup 当用户释放按键时触发。
3.onkeypress 按下冰松开。
* 选中和改变
1.onchange 域的内容被改变。
2.onselect 域的内容被选中。
* 表单事件
1.onsubmit 确认按钮被点击
* 如果校验失败可以阻止表单提交。
* 如果方法返回的是false，表单会被阻止提交。
2.onreset 重置按钮被点击
