javascript实现 DOM BOM

最新推荐文章于 2024-10-11 21:15:00 发布

master-dragon

最新推荐文章于 2024-10-11 21:15:00 发布

阅读量314

点赞数

分类专栏： # css-js

css-js 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了DOM（文档对象模型）的不同级别及其组成部分，包括DOM Level1、DOM Level2和DOM Level3的主要特性。此外，还讲解了DOM事件模型的工作原理，以及BOM（浏览器对象模型）的基本概念和关键功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

具体参考学习
csdn:晨港飞燕
http://blog.youkuaiyun.com/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.youkuaiyun.com/hugoandpig/article/details/8139199

间歇性调用和超时调用

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

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

function say(){
alert("hello"); 
}
// 设置超时调用
var timeoutId = setTimeout(say,1000);
// 取消timeout
clearTimeout(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()