BOM和DOM

一、BOM

BOM是browser object model的缩写，简称浏览器对象模型
2. BOM提供了独立于内容而与浏览器窗口进行交互的对象[o1]
3. 由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window
4. BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性
5. BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C
6. BOM最初是Netscape浏览器标准的一部分

二、DOM

DOM: 文档对象模型
HTML DOM 树

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

a) JavaScript 能够改变页面中的所有 HTML 元素

i. 通过 id: getElementById
ii. 通过标签名: getElementsByTagName ，返回的是一个数组
iii. 通过类名: getElementsByClassName ，返回的是一个数组

b) JavaScript 能够改变页面中的所有 HTML 属性

i. 修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
ii. 如需改变 HTML 元素的属性：document.getElementById(id).attribute=新属性值
iii. 改变了 <img> 元素的 src 属性：

document.getElementById("image").src="landscape.jpg"

c) JavaScript 能够改变页面中的所有 CSS 样式

i. 如需改变 HTML 元素的样式：

document.getElementById(id).style.property=新样式[o2]

d) JavaScript 能够对页面中的所有事件做出反应

i. HTML 事件的例子：
1. 1. 当用户点击鼠标时：onclick
2. 2. 当网页已加载时

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie。

3. 当图像已加载时
4. 当鼠标移动到元素上时：

onmouseover :移入

onmouseout ：移出

5. 当输入字段被改变时：

onchange 事件常结合对输入字段的验证来使用。

<input type="text" id="fname" onchange="upperCase()">[o3]

6. 当提交 HTML 表单时
7. 当用户触发按键时

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。

首先当点击鼠标按钮时，会触发 onmousedown事件；

当释放鼠标按钮时，会触发 onmouseup事件；

最后，当完成鼠标点击时，会触发 onclick事件。

8. 当输入字段获得焦点时: onfocus()获取焦点事件

9. 当输入字段丢失焦点时: onblur()获取焦点事件[o4]

ii. <button type="button"
onclick="document.getElementById('id1').style.color='red'">
点我!</button>

其他：

a) document.write() 可用于直接向 HTML 输出流写内容。

b) 监听事件：addEventListener() 方法

i. 你可以使用 removeEventListener() 方法来移除事件的监听。
1. 1. element.removeEventListener("mousemove", myFunction);
2. ii. addEventListener() 方法用于向指定元素添加事件句柄。
3. iii. addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。[o5]
4. iv. 你可以向一个元素添加多个事件句柄。[o6]
5. v. 你可以向同个元素添加多个同类型的事件句柄，如：两个 "click" 事件[o7] 。
6. vi. 你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。
7. vii. addEventListener() 方法可以更简单的控制事件（冒泡与捕获）[o8] 。
8. viii. 当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强， 在没有控制HTML标记时也可以添加事件监听。
9. ix. 语法：

element.addEventListener(event, function, useCapture);[o9]

第一个参数是事件的类型 (如 "click" 或 "mousedown").

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

x. addEventListener() 方法允许你在 HTML DOM 对象添加事件监听， HTML DOM 对象如： HTML 元素, HTML 文档, window 对象。或者其他支出的事件对象如: xmlHttpRequest 对象。[o10]
xi. 当传递参数值时，使用"匿名函数"调用带参数的函数：[o11]
xii. 事件冒泡或事件捕获？

A.事件传递有两种方式：冒泡与捕获，事件传递定义了元素事件触发的顺序。

B.实例：如果你将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢？

在冒泡中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。

在捕获中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发，然后再触发 <p> 元素的点击事件。

C.addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型：

addEventListener(event, function, useCapture);

默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

document.getElementById("myDiv").addEventListener("click", myFunction, true);

xiii. 跨浏览器解决方法:

var x = document.getElementById("myBtn");

if (x.addEventListener) { // 所有主流浏览器，除了 IE 8 及更早版本

x.addEventListener("click", myFunction);

} else if (x.attachEvent) { // IE 8 及更早版本

x.attachEvent("onclick", myFunction);

}

DOM元素（节点）：即节点的增删改

a) 添加节点：

i. 首先首先创建文本节点：createTextNode
ii. 再创建该元素（元素节点）：createElement
iii. 接着必须向创建该元素节点追加这个文本节点：para.appendChild(node);
iv. 然后向一个已存在的元素追加该元素: appendChild:

element.appendChild(para);

b) 删除节点:[ DOM 需要清楚您需要删除的元素，以及它的父元素。]

i. 首先找到你要删除的节点元素：

var parent=document.getElementById("div1");

ii. 再找到你要删除节点的父元素：

var child=document.getElementById("p1");

常用的解决方案：找到您希望删除的子元素，然后使用其 parentNode 属性来找到父元素。

iii. 开删（从父元素中删除子元素）：removeChild

parent.removeChild(child);

c) 替换

i. 找到要被替换的节点

var liTag = document.getElementById("apple");

ii. 创建替换节点

var textNode = document.createTextNode("平安果");

iii. 开始替换

liTag.replaceChild(textNode,liTag.firstChild);//firstChild指的是ID为apple的第一个孩子，而后面的就不能再被替换。

d) 在指定元素之前插入：insertBefore

e) 在指定元素之后插入：

i. extSibling返回相同节点树层级的下一个节
ii. insertBefore
DOM手册：http://www.runoob.com/jsref/dom-obj-event.html

a) 常用的：

onclick（单击） ondblclick（双击）

onmou wn（按下鼠标） onmouseup（释放鼠标） onclick（完成鼠标点击）

onmousemove（移入） onmouseout（移出）

onkeydown (键盘按键被按下) onkeypress(键盘按键被按下并松开) onkeyup (键盘按键被松开)

onload onunload(用户退出页面。 ( <body> 和 <frameset>))

onfocus onblur

target 返回触发此事件的元素（事件的目标节点）。

type 返回当前 Event 对象表示的事件的名称。

addEventListener() 允许在目标事件中注册监听事件(IE8 = attachEvent())

removeEventListener() 运行一次注册在事件目标上的监听事件(IE8 = detachEvent())

button 返回当事件被触发时，哪个鼠标按钮被点击。

clientX 返回当事件被触发时，鼠标指针的水平坐标。

clientY 返回当事件被触发时，鼠标指针的垂直坐标。

screenX 返回当某个事件被触发时，鼠标指针的水平坐标。

screenY 返回当某个事件被触发时，鼠标指针的垂直坐标。

shiftKey 返回当事件被触发时，"SHIFT" 键是否被按下。

keyCode 返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码。

which 返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码。

onresize(窗口或框架被重新调整大小)

onsearch(用户向搜索域输入文本时触发 ( <input="search">))

onsubmit(表单提交时触发)

onselect

(用户选取文本时触发 ( <input> 和 <textarea>)

oninput(元素获取用户输入时触发)

onreset(表单重置时触发)

onpause 事件在视频/音频（audio/video）暂停时触发。

onplay 事件在视频/音频（audio/video）开始播放时触发。

transitionend 该事件在 CSS 完成过渡后触发。

三、图

[o12]

[o1]

与浏览器窗口交互的一些对象，例如可以移动，调整浏览器大小的window对象，可以用于导航的location对象与history对象，可以获取浏览器，操作系统与用户屏幕信息的navigator与screen对象，可以使用document作为访问HTML文档的入口，管理框架的frames对象等

[o2]

document.getElementById("p2").style.color="blue"; document.getElementById("p2").style.fontFamily="Arial"; document.getElementById("p2").style.fontSize="larger";

[o3]当用户改变输入字段的内容时，会调用 upperCase() 函数。

[o4]

jQuery 事件参考手册实例当输入域失去焦点 (blur) 时改变其颜色: $("input").blur(function(){ $("input").css("background-color","#D6D6FF"); });...

[o5]

addEventListener() 方法允许向同个元素添加多个事件，且不会覆盖已存在的事件：

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

[o6]

你可以向同个元素添加不同类型的事件：

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

[o7]

??一个对象可以有两个以上的点击事件吗？不会发生冲突吗？

[o8]这点还不是很明白

[o9]

element.addEventListener("click", function(){ alert("Hello World!"); });

[o10]

当用户重置窗口大小时添加事件监听：

window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext;
});

[o11]

<body>

<p>实例演示了在使用 addEventListener() 方法时如何传递参数。</p>

<p>点击按钮执行计算。</p>