BOM（浏览器对象模型）和DOM(宿主对象模型)

古城微笑少年丶 2022-03-06 12:10 389阅读 0赞

**一.什么是BOM（浏览器对象模型)**  
BOM（Browser Object Model）是指浏览器对象模型，可以对浏览器窗口进行访问和操作。使用 BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。  
浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。

**1. window对象**  
window对象是客户端JavaScript最高层对象之一，由于window对象是其它大部分对象的共同祖先，在调用window对象的方法和属性时，可以省略window对象的引用。例如：window.document.write()可以简写成：document.write()。

*  所有浏览器都支持 window 对象。它表示浏览器窗口；
 *  概念上讲：一个html文档对应一个window对象；
 *  功能上讲：控制浏览器窗口的；
 *  使用上讲：window对象不需要创建对象，直接使用即可；
 *  所有 JavaScript全局对象、函数以及变量均自动成为 window 对象的成员;
 *  全局变量是 window 对象的属性;
 *  全局函数是 window 对象的方法

**window对象方法：**  
![在这里插入图片描述][20190318204842873.png]  
**2.location对象**  
表示载入窗口的URL(可以理解为就是地址栏里的那段字符串)，还可以解析URL  
既是window对象的属性，也是document对象的属性  
![在这里插入图片描述][20190318203041346.png]  
**location对象的属性和方法:**  
![在这里插入图片描述][20190318203112271.png]  
**3.screen对象**  
获取用户屏幕信息，是window对象属性  
availHeight:窗口可以使用的屏幕的高度  
availWidth:窗口可以使用屏幕的宽度  
注意:不是显示器的高和宽，是当前分辨率的高和宽(分辨率的概念)  
screen.height:屏幕的高度  
screen.width:屏幕的宽度

**4. History对象 （了解即可）**  
History 对象包含用户（在浏览器窗口中）访问过的 URL。  
History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。  
![在这里插入图片描述][20190318205234651.png]

**二.DOM：(Document Object Model) 宿主对象模型**  
**1. 什么是DOM？**  
DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。  
![在这里插入图片描述][20190318203206907.png]  
DOM下，HTML文档各个节点被视为各种类型的Node对象。每个Node对象都有自己的属性和方法，利用这些属性和方法可以遍历整个文档树。  
然后可以对这些node节点对象进行各种操作，如增删改查等等。  
**2. DOM节点**  
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点(NODE)：

*  整个文档是一个文档节点（document对象）
 *  每个 HTML 元素是元素节点（element 对象） HTML
 *  元素内的文本是文本节点（text对象） 每个 HTML 属性是属性节点（attribute对象）
 *  注释是注释节点（comment对象）

节点（自身）属性：

*  attributes - 节点（元素）的属性节点
 *  nodeType – 节点类型
 *  nodeValue – 节点值
 *  nodeName –节点名称
 *  innerHTML - 节点（元素）的文本值（记住这个就可以了）

导航属性：

*  parentNode - 节点（元素）的父节点 （一般用这个）
 *  firstChild – 节点下第一个子元素
 *  lastChild – 节点下最后一个子元素
 *  childNodes - 节点（元素）的子节点

JavaScript 可以通过DOM创建动态的 HTML：

*  JavaScript 能够改变页面中的所有 HTML 元素
 *  JavaScript 能够改变页面中的所有 HTML 属性
 *  JavaScript 能够改变页面中的所有 CSS 样式
 *  JavaScript 能够对页面中的所有事件做出反应

**3. 查找标签**  
直接查找  
![在这里插入图片描述][20190318222321366.png]  
间接查找  
![在这里插入图片描述][20190318222351987.png]  
**4. 节点操作**  
**创建节点：**  
![在这里插入图片描述][20190318222444935.png]  
**添加节点：**  
![在这里插入图片描述][20190318222518263.png]  
替换节点：  
![在这里插入图片描述][20190318222611219.png]  
**属性节点：**  
![在这里插入图片描述][20190318222640793.png]  
**设置文本节点的值：**  
![在这里插入图片描述][20190318222708379.png]  
**attribute操作**  
![在这里插入图片描述][20190318222753374.png]  
**获取值操作**  
语法：节点名.value  
适用于标签：input、select、textarea  
![在这里插入图片描述][20190318222834379.png]  
**class的操作**  
![在这里插入图片描述][20190318222908980.png]  
**指定CSS操作**  
![在这里插入图片描述][20190318223025634.png]  
JS操作CSS属性的规律：  
①对于没有中横线的CSS属性一般直接使用style.属性名即可。如：  
![在这里插入图片描述][20190318223102864.png]  
②对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可。如  
![在这里插入图片描述][20190318223132463.png]  
**5.事件**  
常用事件：  
![在这里插入图片描述][20190318223238119.png]  
**onload**  
onload 属性开发中只给 body元素加。  
这个属性的触发 标志着 页面内容被加载完成。  
应用场景：当有些事情我们希望页面加载完立刻执行，那么可以使用该事件属性。

**onsubmit**  
当表单在提交时触发，该属性也只能给 form 元素使用；应用场景：在表单提交前验证用户输入是否正确，如果验证失败，在该方法中我们应该阻止表单的提交。

**Event 对象**  
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。  
事件通常与函数结合使用，函数不会在事件发生前被执行！event对象在事件发生时系统已经创建好了，并且会在事件函数被调用时传给事件函数，我们获得仅仅需要接收一下即可。

[20190318204842873.png]: /images/20220303/0f4bb284bff94159a9246c14d744da91.png?
[20190318203041346.png]: /images/20220303/51a6de539d314da595d7fd0861200c30.png
[20190318203112271.png]: /images/20220303/7f7e3b96cc6d43eda5ceff7e94413e68.png?
[20190318205234651.png]: /images/20220303/db450ed8ab1944b29ca982aae2307be5.png
[20190318203206907.png]: /images/20220303/9c3b7e4385c8447faee2782317b32497.png?
[20190318222321366.png]: /images/20220303/4fc80b2538fe4521a8b4ee679788c5a1.png
[20190318222351987.png]: /images/20220303/fe827c91ab2b4fc4bce37e9c68cd285d.png?
[20190318222444935.png]: /images/20220303/dcc62c41b9f04ae7b7009cebd19336b6.png
[20190318222518263.png]: /images/20220303/fdbe85652a434d52b56cedba45cb1c68.png?
[20190318222611219.png]: /images/20220303/a83454523ca94b04bda4892b86e3c8d1.png
[20190318222640793.png]: /images/20220303/0b80072040e646769a5959703cd030d1.png
[20190318222708379.png]: /images/20220303/ae30122c395d44d6a4f9f430e9470039.png
[20190318222753374.png]: /images/20220303/ae5faa96f07e4de98993e7b8b8a713ef.png
[20190318222834379.png]: /images/20220303/c82817af49ac4b1d9c96d226bb79de33.png
[20190318222908980.png]: /images/20220303/9a070f54610c45e6beeaf2c0da29a9c4.png
[20190318223025634.png]: /images/20220303/51a38ba26bb9461b8011ff3ebc7be72f.png
[20190318223102864.png]: /images/20220303/08bb3a7c439d42aa8bce29a290c39ba9.png
[20190318223132463.png]: /images/20220303/bca93e8c1f5d4d4bbfd22bbf4e715d4f.png
[20190318223238119.png]: /images/20220303/07e606d89bc841bebb1e04ed2e2f1ec3.png?