BOM和DOM简介
BOM，Browser Object Model ,浏览器对象模型。
BOM主要提供了访问和操作浏览器各组件的方式。
浏览器组件：
window(浏览器窗口)
location(地址栏)
history(浏览历史)
screen(显示器屏幕)
navigator(浏览器软件)
document(网页)
DOM，Document Object Model，文档对象模型。
DOM主要提供了访问和操作HTML标记的方式。
HTML标记：
图片标记
表格标记
表单标记
body、html标记
……
BOM和DOM不是JS的内容。它们是W3C制定的规范。但是，BOM和DOM在浏览器中以对象的形式得以实现。
换句话说：BOM和DOM都是由一组对象构成。
W3C是制作互联网标准的一个国际化的组织，如：XHTML、CSS、JavaScript、AJAX等。
BOM对象结构图
各对象之间是有层级关系的，那么各对象之间如何访问呢？
window.document.write(“OK”)
window.document.body.bgColor = “#FF0000”;
window对象是所有其它对象的最顶层对象，因此，可以省略。
document.write(“OK”);
document.body.bgColor = “#FF0000”;
window.alert(“OK”); ——> alert(“OK”);
window.prompt(“请输入一个分数”)； ——> prompt(“请输入一个分数”);
- Window对象属性和方法
name：指浏览器窗口的名字或框架的名字。这个名字是给标记的target属性来用的。
设置窗口的名字：window.name = “newWin”
获取窗口的名字：document.write(name);
top：代表最顶层窗口。如：window.top
parent：代表父级窗口，主要用于框架。
self：代表当前窗口，主要用于框架中。
innerWidth：指浏览器窗口的内宽(不含菜单栏、工具栏、地址栏、状态栏)，该属性Firefox支持。
在IE下，使用 document.documentElement.clientWidth 来代替 window.innerWidth
innerHeight：指浏览器窗品的内高(不含菜单栏、工具栏、地址栏、状态栏)，该属性Firefox支持。
在IE下，使用 document.documentElement.clientHeight 来代替 window.innerHeight
document.documentElement 就是标记对象
document.body 就是 标记对象
window对象方法
alert()：弹出一个警告对话框。
prompt()：弹出一个输入对话框。
confirm()：弹出一个确认对话框。如果单击“确定按钮”返回true，如果单击“取消”返回false。
close()：关闭窗口
print()：打印窗口
open()方法
功能：打开一个新的浏览器窗口。
语法：var winObj = window.open([url][,name][,options]);
说明：参数可有可无。如果没有指定参数，则打开一个选项卡式的窗口(大小是最大大化)。
参数：
url：准备在新窗口中显示哪个文件。url可以为空字符串，表示显示一个空的页面。
name：新窗口的名字，该名字给标记的target属性来用。
options：窗口的规格。
width：新窗口的宽度
height：新窗口的高度
left：新窗口距离屏幕左边的距离
top：新窗口距离屏幕上边的距离
menubar：是否显示菜单栏，取值：yes、no
toolbar：是否显示工具栏。
location：是否显示地址栏。
status：是否显示状态栏。
scrollbars：是否显示滚动条，不能省略s字母。
返回值：返回一个window对象的变量，可以通过该名称跟踪该窗口。winObj具备window对象的所有属性和方法。
onload事件：当网页加载完成，指标记的所有内容全部加载完成，才触发该事件(条件)。通过onload事件属性，去调用JS的函数。onload属性只有标记才有。
onclick事件：当单击时，去调用JS代码。所有HTML标记都具有该事件属性。
- 延时器方法——setTimeout()
setTimeout()
功能：设置一个延时器，换句话说：时间一到，就执行JS代码一次。
语法：var timer = window.setTimeout(code,millisec)
参数：
code：是任何合法的JS代码，一般情况下是JS函数。该函数要放在引号中。
举例：window.setTimeout(“close()” , 2000)
举例：window.setTimeout(init, 2000); //传函数地址，因此不需要加括号。如果加括号，是将函数的执行结果传到方法中。
millisec：毫秒值。1秒=1000毫秒
返回值：返回一个延时器的id变量，这个id变量给clearTimeout()用来清除。
clearTimeout()
功能：清除延时器id变量
语法：window.clearTimeout(timer)
参数：timer就是由setTimeout()设置的延时器的id变量。
setInterval()
功能：设置一个定时器。定时器，重复不断的执行JS代码(周期性)。
语法： var timer = window.setInterval(code , millisec)
参数：
code：是任何合法的JS代码，一般情况下是JS函数。该函数要放在引号中。
举例：window.setInterval(“init()” , 2000)
举例：window.setInterval(init, 2000); //传函数地址，因此不需要加括号。如果加括号，是将函数的执行结果传到方法中。
millisec：毫秒值。1秒=1000毫秒
返回值：返回一个定时器的id变量，这个id变量给clearInterval()用来清除。
clearInterval()
功能：清除定时器id变量
语法：window.clearInterval(timer)
参数：timer就是由setInterval()设置的定时器的id变量。
- screen屏幕对象
Width：屏幕的宽度，只读属性。
Height：屏幕的高度，只读属性。
availWidth：屏幕的有效宽度，不含任务栏。只读属性。
availHeight：屏幕的有效高度，不含任务栏。只读属性。
- navigator对象
appName：浏览器软件名称，主要用来判断客户使用的是什么核心的浏览器。
如果是IE浏览器的话，返回值为：Microsoft Internet Explorer
如果是Firefox浏览器的话，返回值为：Netscape
appVersion：浏览器软件的核心版本号。
systemLanguage：系统语言
userLanguage：用户语言
platform：平台
- location 地址栏对象
href：获取地址栏中完整的地址。可以实现JS的网页跳转。location.href = “http://www.sina.com.cn”;
host：主机名
hostname：主机名
pathname：文件路径及文件名
search：查询字符串。
protocol：协议，如：http://、ftp://
hash：锚点名称。如：#top
reload([true])：刷新网页。true参数表示强制刷新
注意：所有的属性，重新赋值后，网页将自动刷新。
history对象
length：历史记录的个数
go(n)：同时可以实现“前进”和“后退。”
i. history.go(0) 刷新网页
ii. history.go(-1) 后退
iii. history.go(1) 前进一步
iv. history.go(3) 前进三步
forward()：相当于浏览器的“前进”按钮
back()：相当于浏览器的“后退”按钮
- DOM
DOM ， Document Object Model ，文档对象模型。我们可以把网页中的所有“东西”看成是“对象”。
DOM是W3C制定的网页标准或规则，而这个标准，在浏览器中，以“对象”的形式得以实现。
DOM的官方定义：DOM可以使脚本，动态的访问或操作，网页的内容、网页外观、网页结构。
DOM的分类
核心DOM：提供了同时操作HTML文档和XML文档的公共的属性和方法。
HTML DOM：针对HTML文档提供的专用的属性方法。
XML DOM：针对XML文档提供的专用的属性和方法。(就业班讲)
CSS DOM：提供了操作CSS的属性和方法。
Event DOM：事件对象模型。如：onclick、 onload等。
HTML节点树
节点关系
根节点，一个HTML文档只有一个根，它就是HTML节点。
子节点：某一个节点的下级节点。
父节点：某一个节点的上级节点。
兄弟节点：两个子节点同属于一个父节点。
DOM中节点类型
document文档节点，代表整个网页，不代表任何HTML标记。但它是html节点的父节点。
element元素节点，指任何HTML标记。每一个HTML标记就称一个“元素节点”。它可以有文本节点和属性节点。
attribute属性节点。指HTML标记的属性。
text节点。是节点树的最底节点。
核心DOM中的公共的属性和方法
提示：核心DOM中查找节点(标记)，都是从根节点开始的(html节点)。
1、节点访问
nodeName：节点名称。
nodeValue：节点的值。只有文本节点才有值，元素节点没有值。nodeValue的值只能是“纯文本”，不能含有任何的HTML标记或CSS属性。
firstChild：第1个子节点。
lastChild：最后1个子节点。
childNodes：子节点列表，是一个数组。
parentNode：父节点。
查找标记的方法
document.firstChild
document.documentElement
查找标记的方法
document.firstChild.lastChild
document.body
为什么，document.body.firstChild 找不到节点？
核心DOM的属性和方法，主要是针对HTML4.0开发的。
在Firefox下，会把空格或换行，当成文本节点。
HTML4.0是有没有DTD类型定义的。
2、对节点的属性操作
setAttribute(name,value)：给某个节点添加一个属性。
getAttribute(name)：获取某个节点属性的值。
removeAttribute(name)：删除某个节点的属性。
3、节点的创建
document.createElement(tagName)：创建一个指定的HTML标记，一个节点
tagName：是指不带尖括号的HTML标记名称。
举例：var imgObj = document.createElement(“img”)
parentNode.appendChild(childNode)：将创建的节点，追加到某个父节点下。
parentNode代表父节点，父节点必须存在。
childNode代表子节点。
举例：document.body.appendChild(imgObj)
parentNode.removeChild(childNode)：删除某个父节点下的子节点。
parentNode代表父节点。
childNode代表要删除的子节点。
举例：document.body.removeChild(imgObj)
- HTML DOM简介和新特性
1、简介
核心DOM中，提供的属性和方法，已经可以操作网页了。为什么还要有HTMLDOM呢？
如果在核心DOM中，网页中节点层级很深时，访问这个节点时将十分麻烦。
那么，HTMLDOM中就提供了通过id直接找节点的方法，而不用再HTML根节点开始。
2、HTML DOM的新特性
每一个HTML标记，都对应一个元素对象。如：![]()
对应一个图片对象
每一个HTML标记的属性，与对应的元素对象的属性，一一对应。
HTML DOM访问HTML元素的方法(最常用)
1、getElementById()
功能：查找网页中指定id的元素对象。
语法：var obj = document.getElementById(id)
参数：id是指网页中标记的id属性的值。
返回值：返回一个元素对象。
举例：var imgObj = document.getElementById(“img01”)
2、getElementsByTagName(tagName)
功能：查找指定的HTML标记，返回一个数组。
语法：var arrObj = parentNode.getElementsByTagName(tagName)
参数：tagName是要查找的标记名称，不带尖括号。
返回值：返回一个数组。如果只有一个节点，也返回一个数组。
举例：var arrObj = ulObj.getElementsByTagName(“li”)
tagName：标签名称，与核心DOM中nodeName一样。
className：CSS类的样式。
id：同HTML标记id属性一样。
title：同HTML标记的title属性一样。
style：同HTML标记的style属性一样。
innerHTML：包含HTML标记中的所有的内容，包括HTML标记等。
以上元素对象属性的应用，详细看文件。
offsetWidth：元素对象的可见宽度，不带px单位。
offsetHeight：元素对象的可见高度，不带px单位。
scrollWidth：元素对象的总宽度，包括滚动条中的内容，不带px单位。
scrollHeight：元素对象的总高度，包括滚动条中的内容，不带px单位。
scrollTop：指内容向上滚动上去了多少距离(有滚动条时才有效)，默认值为0
scrollLeft：指内容向左滚动过去了多少距离(有滚动条时才有效)。
onscroll：当拖动滚动条时，调用JS函数。
CSS DOM动态样式
使用JS操作CSS中的各属性。
JS只能操作或修改行内样式。如：imgObj.style.border = “1px solid red”
对于类样式，通过className来赋值。如：imgObj.className = “imgClass”
style对象
每个HTML标记，都有一个style属性。但这个style属性又是一个style对象。
那么，这个style对象的属性有哪些？style对象的属性，与CSS中的属性，一一对应。
因此，style对象用来代替CSS。
如：imgObj.style.border = “1px solid red”;
style对象属性与CSS属性的转换
1） 如果是一个单词，style对象属性，与CSS属性一样。
2） 如果是多个单词，第1单词全小写，后面每个单词首字母大写，并去掉中划线。
i. divObj.style.backgroundColor = “red”;
ii. divObj.style.backgroundImage = “url(images/bg.gfi)”;
iii. divObj.style.fontSize = “18px”;
Event DOM：事件DOM
1、事件简介
事件主要实现“用户与网页的交互”。
当事件发生时，去执行JS功能代码。
当点击图片时(onClick)，将图片放大两倍(JS代码)。
当网页加载完成时(onLoad)，弹出一个小窗口。
当鼠标放到滚动文本上时(onMouseOver)，文本停止滚动。
当向下拖动滚动条时(onscroll)，文本向上滚动。
……
2、常用事件
onload：当网页加载完成时。只能给用。
onclick：当点击时，所有标记都适用。
onscroll：当拖动滚动条时
onmouseover：当鼠标放上时
onmouseout：当鼠标移开时
onsubmit：当提交表单时
onreset：当重置表单时
onfocus：当获得焦点时，把光标定位到文本框中。
onblur：当失去焦点时，把光标从文本框中移开。
onchange：当下拉列表内容改变时。用在下拉列表、上传文件。
onselect：当选中文本时。
onresize：当改变窗口大小时，发生的事件。
……
3、事件句柄属性
HTML标记，都有相应的事件属性。
每一个HTML标记，都对应一个元素对象。元素对象也具有相应的事件属性。
但是，元素对象的事件属性应该是全小写。
事件属性后面调用的一般是JS函数，通过JS函数来完成相应的功能。
Event对象简介
当事件发生时，向调用函数，传递一个event参数，这个event参数是一个事件对象。
该event对象中记录了当前事件发生的环境信息。如：单击时的坐标、事件类型等。
注意：这个event对象是“短暂”存在的，新的事件发生，新的event对象产生，原来的event对象消失了。
DOM中Event对象
1、DOM中引入Event对象(DOM浏览器就是标准浏览器)
（1）通过HTML标记的事件属性来传递event对象
在DOM中，event对象是作为事件调用函数时的参数，传递给函数的。
该event参数，是系统固定写法，全小写，不能加引号，它就是event对象参数。
function getXY(e){
alert(e.clientX+ "-"+e.clientY);
}
（2）使用元素对象的事件属性来传递event对象
window.onload = function(){
var imgObj = document.getElementById("img1");
imgObj.onclick = getXY; //传地址,不带括号
}
2、DOM中Event对象属性
type：当前的事件类型
clientX和clientY：距离窗口左边和上边的距离
pageX和pageY：距离网页左边和上边的距离
screenX和screenY：距离屏幕左边和上边的距离
IE中Event对象
IE中的event对象，是window对象的一个属性，可以通过window对象调用，而不需要传参数。如：window.event
IE中Event对象属性
type：事件的类型
clientX和clientY：距离窗口左边和上边的距离。
x和y：距离网页左边和上边的距离
screenX和screenY：距离屏幕左边和上边的距离
- form 对象
一个