7th WEEK BLOG：DOM.BOM技术

一、来源

DOM.BOM文档对象模型（Document Object Model，简称DOM），是W3C推荐的处理可扩展标志语言的标准编程接口。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”，双方为了在JavaScript与JScript一决生死，于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物，计有VBScript、ActiveX、以及微软自家的DHTML格式等，使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时酝酿出来的杰作。

BOM(Browser Object Mode) 是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Windows对象是BOM的顶层对象，其他对象都是该对象的子对象。

 

二、使用方法

HTML DOM的使用方法：

getElementById()	返回带有指定 ID 的元素。
getElementsByTagName()	返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName()	返回包含带有指定类名的所有元素的节点列表。
appendChild()	把新的子节点添加到指定节点。
removeChild()	删除子节点。
replaceChild()	替换子节点。
insertBefore()	在指定的子节点前面插入新的子节点。
createAttribute()	创建属性节点。
createElement()	创建元素节点。
createTextNode()	创建文本节点。
getAttribute()	返回指定的属性值。
setAttribute()	把指定属性设置或修改为指定的值。

 

JavaScript BOM的使用方法：

open()：打开一个新的页面，格式为open(页面的url,打开的方式)，如果url为空则打开一个空白页面。如果打开方式为空，默认为新窗口方式打开。这个方法返回新窗口的window对象。

close()：关闭一个页面，但是这个方法有点兼容性问题，firefox默认无法关闭，chrome默认直接关闭，ie：询问用户。

navigator.userAgent：返回浏览器的名称和版本。

location：浏览器地址信息，本身不是字符串，是object格式。

location：就是url地址本身。

location.search：url中?后面的内容。

location.hash：url中#后面的内容。

 

取自：https://blog.csdn.net/qq_33837446/article/details/77523344 &菜鸟教程网

三、应用

DOM：

（一）创建DOM元素：createElement

（二）插入DOM元素：insertBefore

（三）删除DOM元素：removeChild

（四）文档碎片

BOM：

（一）打开、关闭浏览器

（二）限制尺寸及坐标：

（三）window对象（例如返回顶部按钮）

（四）警告框：alert（‘内容’）；没有返回值

           选择框：confirm（‘提问的内容’），返回Boolean

           输入框：prompt（），返回字符串

取自：https://blog.csdn.net/qq_37994920/article/details/82382994

 

四、内容

DOM 是 W3C（万维网联盟）的标准。DOM 定义了访问 HTML 和 XML 文档的标准；

改变 HTML 内容（改变元素内容的最简单的方法是使用 innerHTML 属性）

改变 HTML 样式（通过 HTML DOM，您能够访问 HTML 对象的样式对象）

 

BOM 是 各个浏览器厂商根据 DOM在各自浏览器上的实现。