BOM和DOM

BOM和DOM

一、BOM

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

二、DOM

1. DOM: 文档对象模型
2. HTML DOM 树

  

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

onmouseover :移入

onmouseout ：移出

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

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

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

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

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

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

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

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

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

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

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

1. 其他：

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

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

1.                              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").

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

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

1.                             x.           addEventListener() 方法允许你在 HTML DOM 对象添加事件监听， HTML DOM 对象如： HTML 元素, HTML 文档, window 对象。或者其他支出的事件对象如: xmlHttpRequest 对象。[o10] 
2.                            xi.           当传递参数值时，使用"匿名函数"调用带参数的函数：[o11] 
3.                           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);

1.                         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);

}

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

a)       添加节点：

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

element.appendChild(para);

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

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

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

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

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

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

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

parent.removeChild(child);

c)       替换

1.                              i.           找到要被替换的节点

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

1.                             ii.           创建替换节点

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

1.                           iii.           开始替换

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

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

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

1.                              i.           extSibling返回相同节点树层级的下一个节
2.                             ii.           insertBefore
3. 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>

<button id="myBtn">点我</button>

<p id="demo"></p>

<script>

var p1 = 5;

var p2 = 7;

document.getElementById("myBtn").addEventListener("click", function() {

    myFunction(p1, p2);

});

function myFunction(a, b) {

    var result = a * b;

    document.getElementById("demo").innerHTML = result;

}

</script>

</body>

 [o12]

window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的，也可以称为window的子对象

由于window是顶层对象，因此调用它的子对象时可以不显示的指明window对象。

例如下面两行代码是一样的：

document.write("www.dreamdu.com");

window.document.write("www.dreamdu.com");