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

一.什么是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对象方法：

2.location对象
表示载入窗口的URL(可以理解为就是地址栏里的那段字符串)，还可以解析URL
既是window对象的属性，也是document对象的属性

location对象的属性和方法:

3.screen对象
获取用户屏幕信息，是window对象属性
availHeight:窗口可以使用的屏幕的高度
availWidth:窗口可以使用屏幕的宽度
注意:不是显示器的高和宽，是当前分辨率的高和宽(分辨率的概念)
screen.height:屏幕的高度
screen.width:屏幕的宽度

4. History对象 （了解即可）
History 对象包含用户（在浏览器窗口中）访问过的 URL。
History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

二.DOM：(Document Object Model) 宿主对象模型
1. 什么是DOM？
DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。

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. 查找标签
直接查找

间接查找

4. 节点操作
创建节点：

添加节点：

替换节点：

属性节点：

设置文本节点的值：

attribute操作

获取值操作
语法：节点名.value
适用于标签：input、select、textarea

class的操作

指定CSS操作

JS操作CSS属性的规律：
①对于没有中横线的CSS属性一般直接使用style.属性名即可。如：

②对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可。如

5.事件
常用事件：

onload
onload 属性开发中只给 body元素加。
这个属性的触发 标志着 页面内容被加载完成。
应用场景：当有些事情我们希望页面加载完立刻执行，那么可以使用该事件属性。

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

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