BOM与DOM的学习（了解）。
– JS提供了控制页面内容的方法，而要控制页面内容，还需要能够访问页面内容。
– BOM(Browser Object Model)提供了访问浏览器各种功能部件的途径，例如浏览器窗口本身、浏览历史等；而DOM(Document Object Model)提供了访问浏览器中网页文档各元素的途径，包括页面中的超链接、表单等各种HTML元素及其内容。
– BOM与DOM是独立于程序语言和平台的标准，W3C定义了一组标准接口，而这些接口在浏览器中以对象的形式实现。BOM与DOM均由一组对象组成，对象定义了属性和方法。
– BOM与DOM关系非常密切。BOM的window对象中包含一个document属性，该属性是对DOM模型的document对象的引用，代表了当前窗口中网页文档所对应的document对象，通过该属性可以访问网页文档的各种内容。
第一部分：BOM
BOM浏览器对象模型结构图：
BOM模型是对BOM各个对象层次关系的描述。
– 在BOM中，window对象是顶层对象，其它对象均是其子对象；
栗子：
window.alert(); 简写方式 alert(); window.document.write(); 简写方式 document.write()
下面的对象就不一一举例，每个对象都有相对应的属性与方法，详细请参考API。
– history浏览器的浏览历史
– location对象代表当前显示的文档的地址
– Navigator对象提供有关浏览器的各种信息
– screen对象提供显示器屏幕相关的一些信息
– Frames[]为window对象的数组型属性，每一个数组元素对应框架集(frameset)中的一个框架(frame)所对应的窗口。
– Document对象是对DOM的引用，代表了当前浏览器窗口中的网页文档
第二部分：DOM
• DOM的官方定义
– W3C文档对象模型(DOM)是一个使程序和脚本能够动态地访问和更新文档的内容、结构以及样式，并独立于平台和语言的接口。W3C DOM提供了一套用于HTML和XML文档的标准对象，以及访问这些文档的标准接口。
– 文档对象模型(DOM)定义了一种按顺序、层次方式访问文档中各元素的结构化方式，是最流行的用于操作结构化文档HTML和XML的API。
– DOM与具体的编程语言无关，可以在C、JavaScript、ActionScript、Java等语言中实现。
• DOM接口的概念
– 接口是一种描述，而不是具体的实现，在支持DOM的环境中对接口的描述进行实现。浏览器中，接口的实现对应于浏览器中的各种DOM对象，编写程序时，就是使用这些DOM对象。
DOM按照其内容对象大概可分为五类：
1，核心DOM，是用于HTML与XML共用的接口。
• 结构图说明
– Node接口是所有其它接口的顶层接口（最大的父级接口），Node中定义的属性和方法被其他接口继承，也就是说，Node接口中定义了适用于所有节点的属性和方法。
– 在浏览器中，Node接口并不对应于具体的浏览器对象，该接口中定义的属性和方法直接通过具体的节点对象进行调用。例如通过Document类型节点的document对象节点调用。
– 提示：节点对象指节点所对应的浏览器对象。
常用方法：
1），处理属性节点
方法 |
描述 |
getAttribute(name) |
获取属性节点的某一个属性的值 |
setAttribute(name,value) |
创建属性节点，并设置属性的值 |
removeAttribute(name) |
删除属性名为name的属性节点 |
2），创建与操作节点
方法 |
描述 |
createElement(tagName) |
创建标记名tagName的Element节点。Element节点可以包含文本子节点和属性子节点 例如：node_h1=document.createElement(“h1”) |
createTextNode(text) |
创建包含文本text的文本节点，返回得到的节点 如：node_text=document.createTextNode(“hello”) |
appendChild(node) |
向当前节点添加子节点，子节点被添加在子节点列表的尾部。例如：node_h1.appendChild(node_text) |
removeChild(node) |
删除子节点列表中的node节点。 |
insertBefore(new,current) |
在current节点前插入new节点。 parentNode.insertBefore(new,current) |
这个的具体实现代码在上一篇文章中有：地址------https://mp.csdn.net/postedit/80341731。
2，HTMLDOM，HTML专属接口。
• 概述
– 通过前面介绍的核心DOM属性和方法，已经可以实现动态的HTML。但是，使用核心DOM对HTML文档访问和操作比较烦锁，尤其当HTML节点树层次较深时。为些，DOM为HTML文档定义了一些专用的接口，称为HTMLDOM，这些接口使对HTML文档的访问与操作更加方便。
• HTML DOM的新特性
– 每一个HTML标记对应一个相应类型的元素对象(Element Object)，如<img>标记对应一个image对象；
– HTML标记的属性对应于元素对象的一个同名属性。
– 可以直接通过HTML标记的id属性的值访问标记对应的元素对象。
HTML DOM中访问HTML元素方法：
var name = document.getElementById()//通过HTML标签元素的ID访问，获取一个对象，相当于ID选择器（下面的同理）
var name = getElementsByTagName()//这两个可以一次获取多个元素，返回的是一个对象集合
var name = getElementsByName()
3，XMLDOM，XML专属接口。
这个在这儿就不多介绍了。可以在W3Cschool上学习。
4，CssDOM，CSS专属接口。
这个就是一个可以通过DOM对象中的style来控制页面的动态或样式。
var box = document.getElementById(“box”); box.style.color=“#ff0000”; box.style.width=“400px”; box.style.height=“300px”;
– style对象中的属性与CSS样式表中属性是一一对应的，但名称不一样。
– 当属性名为单个单词时，style对象的属性名与样式表中的属性名称是相同的
– 当属性名由多个单词组成时，除第一个单词外，其它单词的首字母大写
– 属性值需要用引号引起来
– 注意：在读取元素样式属性时，style对象只能读取行内样式设置的属性或元素对象设置的属性，对于内嵌样式和外联样式，将返回空值。
5,DOM事件模型，定义DOM所能够响应的事件。
只要用在处理事件，为元素添加事件，使页面的元素事件可以调用事件句柄完成特定的功能。
• 事件与事件句柄
– 用户与HTML页面的交互是通过事件实现的。例如当用户当击按钮时，触发click事件等。事件处理涉及浏览器(定义事件类型和事件句柄)、HTML文档(触发文档的环境)、JavaScript脚本(响应行为)3个方面。
– 事件与事件句柄：当事件发生时，用于对事件进行响应的程序称为事件句柄；当事件发生时，自动调用事件句柄。
Dom事件模型的大体分类：
• 基本事件模型
– 最基本的一些事件处理，事件类型和数量有限，通常非正式地定义为0级DOM的内容。HTML4将其纳入到其标准中。
• DOM2事件模型
– DOM2中定义了事件模型的标准，对基本事件模型进行了扩展，增加了一些新的事件及特性。除IE外，现在的浏览器均对DOM2提供支持。
– 引入了Event事件对象
• IE事件模型
– IE使用自己的事件模型，并不完全兼容DOM2标准。因为IE浏览器被普通使用，所以单独介绍。
– 引入了Event事件对象
基本事件模型定义的各种常用的事件：（）
事件句柄 |
触发时机 |
支持该句柄的HTML元素 |
onblur |
当元素失去焦点时 |
<doby><form>中各元素 |
onfocus |
元素获得焦点时 |
<body><frameset><frame><form> |
onchange |
当元素内容发生改变时 |
<input><select><textarea> |
onload |
文档加载结束时 |
<body><frameset><img> |
onsubmit |
表单提交时 |
<form> |
onreset |
表单重置时 |
<form> |
onresize |
调整窗口大小时 |
<body><frameset> |
onselect |
选中文本时，一般情况下高亮显示 |
<input><textarea> |
onunload |
卸载文档或者框架文档时 |
<body><frameset> |
鼠标与按键的事件：
事件句柄 |
触发时机 |
支持该句柄的HTML元素 |
onclick |
元素被单击时 |
所有显示的元素 |
ondbclick |
元素被双击时 |
所有显示的元素 |
onmousedown |
在当前拥有焦点的元素中按下鼠标按键 |
所有显示的元素 |
onmousemove |
当鼠标在元素上移动时 |
所有显示的元素 |
onmouseout |
当鼠标移出元素时 |
所有显示的元素 |
onmouseover |
当鼠标移动到元素上时 |
所有显示的元素 |
onmouseup |
释放鼠标按钮时 |
所有显示的元素 |
键盘事件 |
||
onkeydown |
按下键盘按键时 |
所有显示的元素 |
onkeypress |
按下键并释放时 |
所有显示的元素 |
onkeyup |
释放按键时 |
所有显示的元素 |
基本事件模型——事件句柄属性：
• HTML事件句柄属性
– 可以通过HTML元素的事件句柄属性设置事件句柄。
– 事件处理代码可以包含任何代码；多行代码，用英文分号‘;’号隔开；
– 也可以将事件处理代码定义为函数，将函数赋予事件句柄属性（将函数赋予事件句柄属性时，不能省略括号）
– 用于响应事件的函数可以有返回值，该值将影响事件的默认动作。
• 元素对象事件句柄属性
– DOM的一个重要特性就是：每个标记的属性对应地存在一个元素对象的属性。同样，HTML标记的事件句柄属性，也对应于元素对象的一个同名事件句柄属性。通过JavaScript脚本设置元素对象的事件句柄属性。
– JS脚本区分大小写，元素对象的事件句柄属性全部小写字母。
• 事件句柄返回值
– 某些事件发生时，浏览器会自动执行默认的动作。而事件句柄的返回值会影响浏览器默认动作的执行。如果事件句柄不返回值，或者返回true，默认动作被执行；如果事件句柄返回false，则默认动作不发生。
比如：onclick或onsubmit
– 栗子：当单击链接时或提交表单时。这个在回调函数中常常使用
<a href="http://www.sina.com.cn" onclick="return confirm('是否打开链接')">新浪网</a>
• Event对象概述
– DOM事件模型的一个重要特性，就是在调用事件响应函数时，会向函数传递一个Event对象，该对象提供事件发生时的相关信息。
– 浏览器每次只能建立一个Event对象，该对象是短暂存在的；
关于DOM2事件模型——Event对象大家可以自行去网上了解一下，这个也就不多介绍了（本人也不是很熟悉）。
js中还有许多的对象实例需要我们自己去动手学习，这篇文章就简单做一下笔记。
