DOM BOM
Posted 190luo
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DOM BOM相关的知识，希望对你有一定的参考价值。
1.Javascript组成
JavaScript的实现包括以下3个部分：
1）核心（ECMAScript）：描述了JS的语法和基本对象。
2）文档对象模型 （DOM）：处理网页内容的方法和接口
3）浏览器对象模型（BOM）：与浏览器交互的方法和接口
ECMAScript扩展知识：
① ECMAScript是一个标准，JS只是它的一个实现，其他实现包括ActionScript。
② “ECMAScript可以为不同种类的宿主环境提供核心的脚本编程能力……”，即ECMAScript不与具体的宿主环境相绑定，如JS的宿主环境是浏览器，AS的宿主环境是Flash。
③ECMAScript描述了以下内容：语法、类型、语句、关键字、保留字、运算符、对象。
javascript 有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器风格迥异。
1. DOM 是 W3C的标准；[所有浏览器公共遵守的标准]
2. BOM 是 各个浏览器厂商根据 DOM
在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同]
3. window 是 BOM对象，而非js对象；
DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）。
BOM 主要处理浏览器窗口和框架，不过通常浏览器特定的 JavaScript 扩展都被看做 BOM 的一部分。这些扩展包括：
弹出新的浏览器窗口
移动、关闭浏览器窗口以及调整窗口大小
提供 Web 浏览器详细信息的定位对象
提供用户屏幕分辨率详细信息的屏幕对象
对 cookie 的支持
IE 扩展了 BOM，加入了ActiveXObject类，可以通过JavaScript实例化ActiveX对象
javacsript是通过访问BOM（Browser Object Model）对象来访问、控制、修改客户端(浏览器)，由于BOM的window包含了document，window对象的属性和方法是直接可以使用而且被感知的，因此可以直接使用window对象的document属性，通过document属性就可以访问、检索、修改XHTML文档内容与结构。因为document对象又是DOM（Document Object Model）模型的根节点。可以说，BOM包含了DOM(对象)，浏览器提供出来给予访问的是BOM对象，从BOM对象再访问到DOM对象，从而js可以操作浏览器以及浏览器读取到的文档。其中
DOM包含：window
Window对象包含属性：document、location、navigator、screen、history、frames
Document根节点包含子节点：forms、location、anchors、images、links
从window.document已然可以看出，DOM的最根本的对象是BOM的window对象的子对象。
区别：DOM描述了处理网页内容的方法和接口，BOM描述了与浏览器进行交互的方法和接口
1.1 DOM, DOCUMENT, BOM, WINDOW 区别
DOM 全称是 Document Object Model，也就是文档对象模型。是针对XML的基于树的API。描述了处理网页内容的方法和接口，是HTML和XML的API，DOM把整个页面规划成由节点层级构成的文档。针对XHTML和HTML的DOM。这个DOM定义了一个HTMLDocument和HTMLElement做为这种实现的基础,就是说为了能以编程的方法操作这个 HTML 的内容（比如添加某些元素、修改元素的内容、删除某些元素），我们把这个 HTML 看做一个对象树（DOM树），它本身和里面的所有东西比如 <div></div> 这些标签都看做一个对象，每个对象都叫做一个节点（node），节点可以理解为 DOM 中所有 Object 的父类。
DOM 有什么用？就是为了操作 HTML 中的元素，比如说我们要通过 JS 把这个网页的标题改了，直接这样就可以了：
document.title = ‘how to make love‘;
这个 API 使得在网页被下载到浏览器之后改变网页的内容成为可能。
document
当浏览器下载到一个网页，通常是 HTML，这个 HTML 就叫 document（当然，这也是 DOM 树中的一个 node），从上图可以看到，document 通常是整个 DOM 树的根节点。这个 document 包含了标题（document.title）、URL（document.URL）等属性，可以直接在 JS 中访问到。
在一个浏览器窗口中可能有多个 document，例如，通过 iframe 加载的页面，每一个都是一个 document。
在 JS 中，可以通过 document 访问其子节点（其实任何节点都可以），如
document.body;document.getElementById(‘xxx‘);
BOM
BOM 是 Browser Object Model，浏览器对象模型。
刚才说过 DOM 是为了操作文档出现的接口，那 BOM 顾名思义其实就是为了控制浏览器的行为而出现的接口。
浏览器可以做什么呢？比如跳转到另一个页面、前进、后退等等，程序还可能需要获取屏幕的大小之类的参数。
所以 BOM 就是为了解决这些事情出现的接口。比如我们要让浏览器跳转到另一个页面，只需要
location.href = "http://www.xxxx.com";
这个 location 就是 BOM 里的一个对象。
详解
2.文档对象模型(DOM)
DOM节点树模型（以HTML DOM树为例）
DOM模型将整个文档（XML文档和HTML文档）看成一个树形结构，
在DOM中，HTML文档的层次结构被表示为一个树形结构。并用document对象表示该文档，树的每个子节点表示HTML文档中的不同内容。
每个载入浏览器的 HTML 文档都会成为Document对象,Document是探索DOM的入口,利用全局变量document可以访问Document对象
认识DOM
DOM的起源：
DOM的应用：
创建、插入和删除DOM元素（this的使用）
创建：createElement() ，之后添加 oUl.appendChild(oLi); 格式：父级.appendChild(子节点)；
插入：父级.appendChild(子节点) ，父级.insertBefore(子节点，在谁之前插入)
IE 有兼容性问题 ，联合两个插入方法用if判断解决
删除：removeChild(),
DOM通过创建树来表示文档，描述了处理网页内容的方法和接口，从而使开发者对文档的内容和结构具有空前的控制力，用DOM API可以轻松地删除、添加和替换节点。
1）节点类型
DOM规定文档中的每个成分都是一个节点（Node）,HTML文档可以说由节点构成的集合，DOM节点有:
1. 元素节点（Element）：上图中<html>、<body>、<p>等都是元素节点，即标签。
2. 文本节点（Text）:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。
3. 属性节点（Attr）:元素属性，元素才有属性,如<a>标签的链接属性href="http://www.baidu.com"。
1） DOM节点三大属性（XML DOM）
1）nodeName：元素节点、属性节点、文本节点分别返回元素的名称、属性的名称和#text的字符串。
2）nodeType：元素节点、属性节点、文本节点的nodeType值分别为1、2、3.、
3）nodeValue：元素节点、属性节点、文本节点的返回值分别为null、属性值和文本节点内容。
DOM：Method
1.通过getElementById()方法访问节点
document对象的getElementById()方法可以访问页面中的节点，该方法在使用时，必须指定一个目标一个元素的id作为参数。
基本语法：
例：var s=document.getElementById(id); //调用时参数需要加双引号
2.通过getElementsByName()方法访问节点
通过元素名字来进行访问。
基本语法：
例：var s=document.getElementsByName(name); //调用时参数需要加双引号
3.通过getElementsByTagName()方法访问节点
通过标记名称来获取页面上所有同类的元素。
基本语法：
例：var s=document.getElementsByName(tagname);
4.通过form元素方法访问节点
如果要获得页面上中的form对象，除了getElementById()方法访问、getElementsByName()方法访问，还可以通过document对象的forms属性来获得这个form对象。
基本语法：
例：
var myfrm=document.forms; //6通过document的forms属性对象获得数组对象
var mloginform=myfrm[0]; //获得数组中的第一个form对象
其他方法：getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。 appendChild() 把新的子节点添加到指定节点。 removeChild() 删除子节点。 replaceChild() 替换子节点。 insertBefore() 在指定的子节点前面插入新的子节点。
createAttribute() 创建属性节点。 createTextNode() 创建文本节点。getAttribute() 返回指定的属性值。 setAttribute() 把指定属性设置或修改为指定的值。
【在DOM中还有两个很重要的属性，分别是innerText和innerHTML】
innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。
innerText 打印标签之间的纯文本信息，会将标签过滤掉。
BOM的介绍：
broswer object model（浏览器对象模型），由五个对象组成： Window:对象表示浏览器中打开的窗口 最顶层对象. Navigator :浏览器对象.Screen: 屏幕对象 ，History:浏览器历史对象，Location:地址对象.
BOM（Browser Object MOdel）也称为浏览器对象模型。浏览器对象模型定义了JavaScript可以进行操作的浏览器的各个功能不能部件（如窗口本身、屏幕功能部件、浏览历史记录等）的途径以及操作方法。
BOM的应用：
BOM，Bowser Object Model浏览器对象模型。提供了访问和操作浏览器各组件的途径或方法。
比如：Navigator对象：浏览器的名称、版本号、客户端操作系统、系统语言等
Window：弹出一个广告窗口、窗口的尺寸；
History：获取到你浏览器的历史记录；
BOM的方法：
Closed：判断一个窗口是否关闭；
Name：获取当前窗口的名称；
innerWidth：指窗口的净宽，不含：菜单栏、地址栏、状态栏、工具栏；
在IE中不支持 IE中可以使用body元素的clientWidth和clientHeight来代替。
innerHeight：指窗口的净高，不含：菜单栏、地址栏、状态栏等；在IE中不支持
outerWidth：指窗口的总宽度，包含：菜单栏、地址栏、状态栏等。IE不支持
outerHeight：指窗口的总高度，同上。IE不支持
window对象的方法 ：
Window.alert(str)：弹出一个警告对话框；
Window.prompt()：弹出一个输入对话框
Window.confirm()：弹出一个确认对话框
Window.close()：关闭窗口
Window.print()：打印窗口中的网页
【所有浏览器都支持 window 对象。它表示浏览器窗口。所有 javascript 全局对象、函数以及变量均自动成为 window 对象的成员。全局变量是 window 对象的属性。全局函数是 window 对象的方法。甚至 HTML DOM 的 document 也是 window 对象的属性之一】
location对象方法：
location对象是一个很特别的对象，因为它既是window对象的属性，也是document对象的属性。（转自：https://blog.csdn.net/CC25802580/article/details/80727073）
window.location和document.location引用的是同一个对象。
location对象的属性：
Navigation对象方法：（转自：https://www.cnblogs.com/fengmingyue/p/5946116.html）
history对象
history对象保存着用户上网的历史记录，从窗口被打开的那一刻算起。因为history是window对象的属性，因此每个浏览器窗口、每个标签页以及每个框架，都有自己的history对象与特定的window对象关联。处于安全方面的考虑，开发人员是无法知道用户浏览过的URL，不过，借助用户访问过的页面列表，同样可以在不知道实际URL的情况下实现后退和前进。使用go()方法可以在用户的历史记录中任意跳转，可以向后也可以向前。该方法接收一个参数：表示向前或者向后跳转的页面数的整数值。负数表示向后跳转(类似单击浏览器的后退按钮)，正数表示向前跳转(类似浏览器的前进按钮)。
以上是关于DOM BOM的主要内容，如果未能解决你的问题，请参考以下文章