javascript实现 DOM BOM

来源：互联网发布：二式大艇数据编辑：程序博客网时间：2024/05/16 14:50

具体参考学习
csdn:晨港飞燕
http://blog.csdn.net/qq877507054/article/details/51395830

需要对javascript有个大致的了解，编写代码又不至于不知道自己在干什么

DOM（Document Object Model）

DOM Level 1

DOM Level 1 由两个模块组成：DOM core 和 DOM HTML
DOM core 规定的是如何映射基于XML的文档结构，以便简化对文档中任意部分的访问和操作。DOM HTML模块是在 DOM core核心的基础上加以扩展，添加了HTML的对象和方法。

DOM 1 的目标主要是映射文档的结构

DOM Level 2

DOM 2 在 DOM 1基础上扩充，加入新模块
* DOＭ视图 (Views)：跟踪文档
* DOM 事件（Events）：事件处理
* DOM 样式 (Styles): css接口
* DOM 遍历和范围（Traversal and range）：遍历和操作文档树

DOM3

DOM3 又加入了加载和保存文档的方法，对XML规范的支持

DOM事件

DOM同时两种事件模型：冒泡型事件和捕获型事件

冒泡型事件

事件按照从最特定的事件目标到最不特定的事件目标的顺序触发

<body onclick="handleClick()"><div onclick="handleClick()" >Click Me</div></body>

触发的顺序是：div、body、html(IE 6.0和Mozilla 1.0)、document、window(Mozilla 1.0)

捕获型事件

与冒泡事件相反的过程，事件从最不精确的对象开始触发，然后到最精确
上面例子触发的顺序是：document、html、body、div
DOM事件模型最独特的性质是，文本节点也触发事件(在IE中不会)。

事件处理程序

参考马海祥博客
http://www.mahaixiang.cn/js/694.html

HTML事件处理程序
DOM0级事件处理程序
DOM2级事件处理程序

节点层次

Node类型

节点操作：http://renxiangzyq.iteye.com/blog/433762

document类型

document的属性额方法
http://www.cnblogs.com/yansheng/archive/2010/01/25/1656014.html

javascript通过document类型表示文档。在浏览器中，document对象是HTMLDocument(继承自Document类型)的一实例，表示整个HTML页面，通过该对象可以取得与页面相关的信息，而且还能操作页面的外观及底层结构。

BOM(Browser Object Model)

BOM处理浏览器窗口和框架
一些JavaScript扩展也算在BOM对象中

弹出新浏览器窗口功能
移动，缩放和打开浏览器窗口的功能
提供浏览器详细信息的navigator对象
提供浏览器所加载页面的详细的location对象
提供用户显示器分辨率详细信息的screen对象
对cookies的支持
像XMLHttpRequest和IE的ActiveXObject这样的自定义对象

window对象

window对象是全局的，网页上的任何对象，变量都将成为window的属性和方法

var age = 10;function sayAge(){    alert(this.age);    }alert(window.age);sayAge();window.sayAge();</script>

窗口关系及框架

页面中frame都有自己的window对象

window的一些属性和方法

http://blog.sina.com.cn/s/blog_6cc9c79b01013ddo.html

http://blog.csdn.net/hugoandpig/article/details/8139199

间歇性调用和超时调用

javascript是单线程语言，但它允许通过设置超时值和间歇时间来调度代码，前者是在指定的时间过后执行代码，而后者则是每隔指定的时间就执行一次代码。

超时调用使用window.setTimeout()方法

function say(){alert("hello"); }// 设置超时调用var timeoutId = setTimeout(say,1000);// 取消timeoutclearTimeout(timeoutId);

间歇性调用会按照指定间隔时间重复执行代码，直到间歇调用被取消或页面被卸载。setInterval()方法, 如下的代码实现一个简单的计时器

var pnum = document.getElementById("num");var i = pnum.innerHTML;var intervalId;function plus(){    i++;    pnum.innerHTML = i;    if(i==10){        clearInterval(intervalId); // 取消interval        alert("over");    }}// 设置interval调用intervalId = setInterval(plus,1000);

系统对话框

alert(), confirm(), prompt()

0 0