2. it
  3. DOM和BOM区别

DOM和BOM区别

mac2022-06-30  22

DOM:文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。

Bom：浏览器对象模型（Browser Object Model，简称 BOM）提供了独立于内容而与浏览器窗口进行交互的对象。描述了与浏览器进行交互的方法和接口，可以对浏览器窗口进行访问和操作.

1:DOM和BOM的处理对象不同：DOM控制图中虚线范围，BOM控制图中实线范围。

　　　

DOM将文档简报为下图：

 

DOM

DOM 是遵循 W3C（万维网联盟）的标准。 DOM 定义了访问 HTML 和 XML 文档的标准： "W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。" W3C DOM 标准被分为 3 个不同的部分： 核心 DOM - 针对任何结构化文档的标准模型 XML DOM - 针对 XML 文档的标准模型 HTML DOM - 针对 HTML 文档的标准模型

XML DOM

XML DOM 是： [1]  用于 XML 的标准对象模型 用于 XML 的标准编程接口 中立于平台和语言 W3C 标准 XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法（接口）。 换句话说：XML DOM 是用于获取、更改、添加或删除 XML 元素的标准。

HTML DOM

HTML DOM 是： [2]  HTML 的标准对象模型 HTML 的标准编程接口 W3C 标准 HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法（接口）。 换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

DOM的分级

编辑 根据 W3C DOM规范，DOM是 HTML与 XML的应用编程接口（API），DOM将整个页面映射为一个由层次节点组成的文件。有1级、2级、3级共3个级别。

1级DOM

1级DOM在1998年10月份成为W3C的提议，由DOM核心与DOM HTML两个模块组成。DOM核心能映射以XML为基础的文档结构，允许获取和操作文档的任意部分。DOM HTML通过添加HTML专用的对象与函数对DOM核心进行了扩展。

2级DOM

DOM 鉴于1级DOM仅以映射文档结构为目标，DOM 2级面向更为宽广。通过对原有DOM的扩展，2级DOM通过对象接口增加了对鼠标和用户界面事件（DHTML长期支持鼠标与用户界面事件）、范围、遍历（重复执行DOM文档）和层叠样式表（CSS）的支持。同时也对DOM 1的核心进行了扩展，从而可支持XML命名空间。 2级DOM引进了几个新DOM模块来处理新的接口类型： DOM视图：描述跟踪一个文档的各种视图（使用CSS样式设计文档前后）的接口； DOM事件：描述事件接口； DOM样式：描述处理基于CSS样式的接口； DOM遍历与范围：描述遍历和操作文档树的接口；

3级DOM

3级DOM通过引入统一方式载入和保存文档和文档验证方法对DOM进行进一步扩展，DOM3包含一个名为“DOM载入与保存”的新模块，DOM核心扩展后可支持XML1.0的所有内容，包括XML Infoset、 XPath、和XML Base。

0级DOM

当阅读与DOM有关的材料时，可能会遇到参考0级DOM的情况。需要注意的是并没有标准被称为0级DOM，它仅是DOM历史上一个参考点（0级DOM被认为是在Internet Explorer 4.0 与Netscape Navigator4.0支持的最早的DHTML）。

节点

根据 DOM，HTML 文档中的每个成分都是一个节点。 DOM 是这样规定的： 整个文档是一个文档节点 每个 HTML 标签是一个元素节点 包含在 HTML 元素中的文本是文本节点 每一个 HTML 属性是一个属性节点 注释属于注释节点

Node 层次

节点彼此都有等级关系。 HTML 文档中的所有节点组成了一个文档树（或节点树）。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。 下面这个图片表示一个文档树（节点树）： 节点树示意图

文档树

请看下面这个HTML文档： <html> <head> <title>DOM Tutorial</title> </head> <body> <h1>DOM Lesson one</h1> <p>Hello world!</p> </body> </html> 上面所有的节点彼此间都存在 关系。 除文档节点之外的每个节点都有 父节点。举例，<head> 和 <body> 的父节点是 <html> 节点，文本节点 "Hello world!" 的父节点是 <p> 节点。 大部分元素节点都有 子节点。比方说，<head> 节点有一个子节点：<title> 节点。<title> 节点也有一个子节点：文本节点 "DOM Tutorial"。 当节点分享同一个父节点时，它们就是 同辈（同级节点）。比方说，<h1> 和 <p>是同辈，因为它们的父节点均是 <body> 节点。 节点也可以拥有 后代，后代指某个节点的所有子节点，或者这些子节点的子节点，以此类推。比方说，所有的文本节点都是 <html>节点的后代，而第一个文本节点是 <head> 节点的后代。 节点也可以拥有 先辈。先辈是某个节点的父节点，或者父节点的父节点，以此类推。比方说，所有的文本节点都可把 <html> 节点作为先辈节点。

优点和缺点

 

DOM的优势主要表现在：易用性强，使用DOM时，将把所有的XML文档信息都存于内存中，并且遍历简单，支持XPath，增强了易用性。 DOM的缺点主要表现在：效率低，解析速度慢，内存占用量过高，对于大文件来说几乎不可能使用。另外效率低还表现在大量的消耗时间，因为使用DOM进行解析时，将为文档的每个element、attribute、processing-instruction和comment都创建一个对象，这样在DOM机制中所运用的大量对象的创建和销毁无疑会影响其效率。     BOM表如下图：

　（1）window对象：当前浏览器窗体 　　　　　　　　属性： 　　　　　　　　　　status：状态栏(目前浏览器已弃用了）

　　　　　　　　　　opener：即谁打开我的，若在A用open打开B则B的opener就是A

　　　　　　　　　　closed：判断子窗体是否关闭

　　　　　　　　方法： 　　　　　　　　　　alert()  弹出框

　　　　　　　　　　confirm() 带确认,取消弹出框

　　　　　　　　　　setInterval() 每隔多少秒调用一次

　　　　　　　　　　clearInterval() 清除setInterval

　　　　　　　　　　setTimeout() 隔多少秒调用一次

　　　　　　　　　　cleartimeout() 清除setTimeout

　　　　　　　　　　open() 打开一个新的窗口

　　　　　　　　　　　eg :  window.open("other.html"," _blank","width=200,height=300,top=300");   

　　　　　　　　　　console:最常用的就是console.log()浏览器控制台打印 　　　　（2）子对象：doument loation history screen ……

　　　　　　1、 doument  （讲dom已经介绍过它的属性方法 ，有感兴趣的可以翻看dom操作）

　　　　　　2、 loation 跳转位置 　　　　　　　　<meta http-equiv="refresh" content="3; url =http://www.hteis.cn";>      //不加url指3秒刷新一次，加url指3秒跳转 　　　　　　　　window.location.href="popl.html"; 　　　　　　　　location = pop.html 　　　　　　　　location.replace("pop.html") //浏览器不可以后退

　　　　　　3、 history 历史 　　　　　　　　history.back() == history.go(-1)   //返回到前一页 　　　　　　　　history.go(-2) //括号里的参数负几就是返回前几步

　　　　　　　　eg: <a href="javascript:history.back()">返回上一页</a>

　　　　　　　　　　<a href="javascript:history.go(-2)">第一页</a>

　　　　　　4、 screen //屏幕 　　　　　　　　screen.availHeight //屏幕实际高度 　　　　　　　　screen.availWidth //屏幕实际宽度 　　　　　　　　screen.height //屏幕高度 　　　　　　　　screen.width //屏幕宽度　

console.log("屏幕实际高度"+screen.availHeight); console.log("屏幕实际宽度"+screen.availWidth); console.log("屏幕高度"+screen.height); console.log("屏幕宽度"+screen.width);

最后赋一个使用计时器做的小例子，跑马灯和小球运动效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> #one{ width:100px; height: 100px; background-color: red; position: fixed; left:0; top:0; border-radius: 50%; } #two{ width:100px; height:20px; background-color: #0f0; position: fixed; right:10px; top:10px; } html,body{ width:100%; height:100%; } </style> </head> <body> <div id="one"></div> <div id="two">跑起来</div> <script> var x = 0; var y = 0; var xs=10; var ys=10; var left = document.body.clientWidth; var one = document.getElementById("one"); var two = document.getElementById("two"); function move(){ x += xs; y += ys; if(x >= document.body.clientWidth-one.offsetWidth-20 || x < 0){ xs=-1*xs; } if(y >= document.body.clientHeight-one.offsetHeight-20 || y < 0){ ys=-1*ys; } one.style.left = x+"px"; one.style.top = y+"px"; } var dt = setInterval("move()",100); one.onmouseover = function(){ clearInterval(dt) } one.onmouseout = function(){ dt = setInterval("move()",100); } //跑马灯 function leftMove(){ if(left <=100){ left = document.body.clientWidth; } left=left-10; two.style.left = left+"px"; } var dl = setInterval("leftMove()",100); two.onmouseover = function(){ clearInterval(dl); } two.onmouseout = function(){ dl = setInterval("leftMove()",100); } </script> </body> </html>

转载于:https://www.cnblogs.com/24KchUNshuAI/p/9943583.html

最新回复(0)