BOM和DOM的见解

最新推荐文章于 2022-05-03 10:30:07 发布

daponi

最新推荐文章于 2022-05-03 10:30:07 发布

阅读量1k

点赞数 2

分类专栏：前端文章标签： BOM和DOM的区别 BOM和DOM的详解 BOM和DOM的联系

本文链接：https://blog.csdn.net/daponi/article/details/94597948

版权

前端专栏收录该内容

19 篇文章 2 订阅

订阅专栏

JavaScript：

javascript 有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器风格迥异。

BOM：主要处理浏览器窗口和框架，不过通常浏览器特定的 JavaScript 扩展都被看做 BOM 的一部分。

BOM是Browser Object Model的缩写，即浏览器对象模型。
BOM没有相关标准。
BOM的最根本对象是window。

这些javascript的扩展包括:出新的浏览器窗口移动、关闭浏览器窗口以及调整窗口大小提供 Web 浏览器详细信息的定位对象提供用户屏幕分辨率详细信息的屏幕对象对 cookie 的支持 IE 扩展了 BOM，加入了 ActiveXObject 类，可以通过 JavaScript 实例化 ActiveX 对象。

从第1点可以看出来：BOM和浏览器关系密切。浏览器的很多东西可以通过JavaScript控制的，例如打开新窗口、打开新选项卡（标签页）、关闭页面，把网页设为主页，或加入收藏夹，等等…这些涉及到的对象就是BOM。

从第2点可以看出来：由于没有标准，不同的浏览器实现同一功能，可以会有不同的实现方式。对于上面说的功能，不同的浏览器的实现功能所需要的JavaScript代码可能不相同。

例如加入收藏夹这么一个功能：
IE浏览器: window.external.AddFavorite(url,title);
FireFox浏览器: window.sidebar.addPanel(title, url, “”);
所以在写这一块的JavaScript代码时，就要考虑浏览器兼容性了。

虽然BOM没有一套标准，但是各个浏览器的常用功能的JavaScript代码还是大同小异的，对于常用的功能实际上已经有默认的标准了。所以不用过于担心浏览器兼容问题，不是每个浏览器都有自己的BOM，也不需要为每个浏览器都学习一套BOM，只是个别浏览器会有新增的功能会在BOM上体现出来。

DOM：是 HTML 和 XML 的应用程序接口（API）。

DOM是Document Object Model的缩写，即文档对象模型。
DOM是W3C的标准。[所有浏览器公共遵守的标准]
在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同]
DOM最根本对象是document（实际上是window.document）。

从第1点可以看出来：DOM和文档有关，这里的文档指的是网页，也就是HTML文档。网页是由服务器发送给客户端浏览器的，无论用什么浏览器，接收到的HTML都是一样的，所以DOM和浏览器无关，它关注的是网页本身的内容。由于和浏览器关系不大，所以标准就好定了。

那么JavaScript的DOM是干什么的呢？

我们知道HTML是由标签组成的，标签套标签。JavaScript可以通过DOM获取到底有哪些标签，标签里面的属性是什么，内容是什么等等…

BOM和DOM的关系：

BOM描述了与浏览器进行交互的方法和接口，DOM描述了处理网页内容的方法和接口。下面大致说一下JavaScript修改浏览器的过程：
javacsript是通过访问BOM（Browser Object Model）对象来访问、控制、修改客户端(浏览器)，由于BOM的window包含了document，window对象的属性和方法是直接可以使用而且被感知的，并且window对象又含有document属性，因此可以直接使用window对象的document属性，通过document属性就可以访问、检索、修改XHTML文档内容与结构。又因为document对象是DOM（Document Object Model）模型的根节点。可以说，BOM包含了DOM(对象)，浏览器提供出来给予访问的是BOM对象，从BOM对象再访问到DOM对象，从而js可以操作浏览器以及浏览器读取到的文档，可能有点乱但下面会给出BOM和DOM关系的思维导图。

其中BOM包含Window对象

Window对象包含属性：document、location、navigator、screen、history、frames Document根节点包含子节点：forms、location、anchors、images、links

从window.document已然可以看出，DOM的最根本的对象是BOM的window对象的子对象。

关系的思维导图：

在这里插入图片描述

window：窗口对象， window对象中的属性称为全局属性，方法称为全局方法，调用时可以省略window。 window中常见的全局方法包括：
alert() 弹出提示框
comfirm() 弹出确认框
prompt() 弹出文本框
parseInt/Float()
isNaN() 判断变量是否是数
window中常见的全局属性包括：

location：位置
location.href 可以获取和修改浏览器的访问地址
location.reload(); 刷新页面
history 历史
history.length 历史页面数量
history.back() 返回上一页面
history.forward() 前往下一页面
history.go(n) n正值前进负值后退
screen 屏幕
screen.width/height 屏幕宽高
screen.availWidth/availHeight 屏幕可用宽高
navigator 导航/帮助
navigator.userAgent 获取浏览器的版本信息
document 文档 DOM

###window里面常用的事件
6. 点击事件： onclick 当点击窗口页面内部任何区域触发
7. 页面加载完成事件： onload 当页面加载完成时触发
8. 页面获取焦点事件：onfocus 当用户返回页面时触发
9. 页面失去焦点事件：onblur 当用户离开页面时触发

window对象方法图：

在这里插入图片描述

BOM思维导向图：

在这里插入图片描述

window对象思维导图:

在这里插入图片描述

认识DOM：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
    <head> 
    	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    	 <title>DOM</title> 
    	</head> 
    	<body> 
    		h2>
    		<a href="http://www.baidu.com">javascript DOM</a>
    	</h2> 
    	<p>对HTML元素进行操作，可添加、改变或移除css样式等</p> 
    	<ul> 
    		<li>Javascript</li> 
    		<li>DOM</li> 
    		<li>CSS</li> 
    	</ul>
    	 </body> 
    	 </html>

将上述代码分解成DOM层次图：

HTML文档可以说由节点构成的集合，DOM节点有:** 1. 元素节点：上图中、、

等都是元素节点，即标签。 2. 文本节点:向用户展示的内容，如

…
中的JavaScript、DOM、CSS等文本。 3. 属性节点:元素属性，如标签的链接属性href=“http://www.baidu.com”。

节点属性节点属性nodeName返回一个字符串，其内容是节点的名字nodeType返回一个整数，这个数值代表给定节点的类型nodeValue返回给定节点的当前值

遍历节点树遍历节点树childNodes返回一个数组，这个数组由给定元素的子节点构成firstChild返回第一个子节点lastChild返回最后一个子节点parentNode返回一个给定节点的父节点nextSibling返回给定节点的下一个子节点previousSibling返回给定节点的上一个子节点

DOM操作DOM操作creatElement(element)创建一个新的元素节点creatTextNode()创建一个包含给定文本的新文本节点appendChild()指定节点的最后一个节点列表后添加一个新的子节insertBefore()将一个给定节点插入到一个给定元素节点的给定子节点的前面removeChild()从一个给定元素中删除子节点replaceChild()把一个给定父元素里的一个子节点替换为另外一个节点

DOM通过创建树来表示文档，描述了处理网页内容的方法和接口，从而使开发者对文档的内容和结构具有空前的控制力，用DOM API可以轻松地删除、添加和替换节点。

DOM基本操作思维图：

其实只要会用window的事件和DOM的方法就可以了

daponi

关注

2
点赞
踩
20

收藏

觉得还不错? 一键收藏
1
评论
BOM和DOM的见解

JavaScript：     javascript 有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器风格迥异。BOM：主要处理浏览器窗口和框架，不过通常浏览器特定的 JavaScript 扩展都被看做 BOM 的一部分。BOM是Browser Object Mod...
复制链接

扫一扫