BOM和DOM的见解

痛定思痛。 2021-12-15 00:27 304阅读 0赞

#### JavaScript： ####

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

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

1.  BOM是Browser Object Model的缩写，即浏览器对象模型。
2.  BOM没有相关标准。
3.  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）。 ######

1.  DOM是Document Object Model的缩写，即文档对象模型。
2.  DOM是W3C的标准。\[所有浏览器公共遵守的标准\]  
    在各自浏览器上的实现;\[表现为不同浏览器定义有差别,实现方式不同\]
3.  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对象的子对象。**

###### 关系的思维导图： ######

![在这里插入图片描述][aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy83MTY2MjM2LWFjOWM4OGU4ZmMwY2IzYzQucG5n]

![在这里插入图片描述][aHR0cHM6Ly9wLnNzbC5xaGltZy5jb20vdDAxODdhZmM5MGQ5ODk4NWU0MS5qcGc]

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

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

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

###### window对象方法图： ######

![在这里插入图片描述][aHR0cHM6Ly9wLnNzbC5xaGltZy5jb20vdDAxZGZhZWRjMGYxNDdhNDE0ZC5qcGc]

###### BOM思维导向图： ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhcG9uaQ_size_16_color_FFFFFF_t_70]

###### window对象思维导图: ######

![在这里插入图片描述][aHR0cHM6Ly9wLnNzbC5xaGltZy5jb20vdDAxNmM2ODRjMmM1MGU2NDY4YS5naWY]

##### 认识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层次图：  
![https://p.ssl.qhimg.com/t017a40571dccf818c3.jpg][https_p.ssl.qhimg.com_t017a40571dccf818c3.jpg]  
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基本操作思维图： ######
    
    ![在这里插入图片描述][aHR0cHM6Ly9wLnNzbC5xaGltZy5jb20vdDAxNzQxMThhZjU3MGYyZTViMS5naWY]
    
    #### 其实只要会用window的事件和DOM的方法就可以了 ####

[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy83MTY2MjM2LWFjOWM4OGU4ZmMwY2IzYzQucG5n]: /images/20211214/4354df508a334a46910d3ace8116370e.png
[aHR0cHM6Ly9wLnNzbC5xaGltZy5jb20vdDAxODdhZmM5MGQ5ODk4NWU0MS5qcGc]: /images/20211214/df339322ef5047458048d907de3bb572.png
[aHR0cHM6Ly9wLnNzbC5xaGltZy5jb20vdDAxZGZhZWRjMGYxNDdhNDE0ZC5qcGc]: /images/20211214/cc155788d344466d914c32879f4b53ba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhcG9uaQ_size_16_color_FFFFFF_t_70]: /images/20211214/5c8e30dbaa944195b9f39cdd6b0edc97.png
[aHR0cHM6Ly9wLnNzbC5xaGltZy5jb20vdDAxNmM2ODRjMmM1MGU2NDY4YS5naWY]: /images/20211214/7db8ed9350244cb181735ffc88a3abda.png
[https_p.ssl.qhimg.com_t017a40571dccf818c3.jpg]: /images/20211214/43981117e6904dd990e668b5dc525a5a.png
[aHR0cHM6Ly9wLnNzbC5xaGltZy5jb20vdDAxNzQxMThhZjU3MGYyZTViMS5naWY]: /images/20211214/38479446df804ddaab998545e2d37631.png