BOM和DOM（一）

BOM

BOM是browser object model的缩写，简称浏览器对象模型。BOM的核心是window，它是一个浏览器的实例，表示浏览器中打开的窗口。浏览器对象模型如图所示：

BOM.png

window对象常用方法：窗口对象包括许多使用的属性，方法和事件驱动程序，编程人员可以利用这些对象控制浏览器窗口显示的各方面属性，如对话框，框架等。下面列出一些常用的Window对象的方法。

W-dx.png

多窗口控制

打开窗口：open中feature中的选项。

open.png

浏览器（navigator）对象

navigator对象包含有关浏览器的信息，通常用于检验浏览器与操作系统的版本。

n-dx.png

屏幕（screen）对象

screen对象包含有关客户端显示屏幕的信息。屏幕对象是JavaScript运行时自动产生的对象。

s-dx.png

地址（location）对象

location对象包含有关当前 URL的信息。

l-dx.png

历史（history）对象

window的history属性是一个history对象，history对象保存这用户上网的历史记录，从窗口被打开的那一刻算起，历史对象常用方法如表所示。

h-dx.png

访问HTMLDOM对象

文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。文档对象（document）是浏览器窗口（window）对象的一个主要部分，包含了网页显示的各个元素对象。

DOM.png

整个文档是一个文档节点；
每个HTML标签是一个元素节点；
包含在HTML元素中的文本是文本节点；
每一个HTML属性是一个属性节点；
注释属于注释节点。

最常见的节点类型如下图：

jdlx.png

元素节点（element node）
元素节点是构建DOM树形结构的基础，可以作为非终端节点，可以有自己的属性节点，下级元素节点和下级文本节点，下级元素节点实现了DOM树纵向扩展，同级元素节点实现了DOM树横向扩展。元素节点在没有任何节点的情况下，它就是终端节点。元素节点的节点类型号为1。
属性节点（attribute node）
属性节点是一个键值对，键是属性名，值是属性值，属性节点不能成为独立节点，它必须从属于元素节点，用来描述元素节点的属性，充实元素节点的内容，因此，可以说属性节点不是节点，在DOM的操作中使用的方法也与其他节点不同。属性节点的节点类型号是2。
文本节点（text node）

文本节点表示一段文本，只能作为独立的终端节点，没有子节点和属性节点。文本节点的节点类型号是3。
注释节点（text node）
注释节点是用来说明所用的XHTML或者HTML是什么版本，或用来添加注释文本的。注释节点的节点类型号是8。

获取文档对象中元素对象的一般方法

getElementByld方法：可以根据标签对象的id属性值得到唯一的标签对象，如果页面上含有多个相同id的节点，那么直返回第一个节点。标签对象的id尽可能使唯一的。语法：document.getElementByld("元素标识名")
getElementsByTagName方法：该方法接受一个参数，即要获取元素的标签名。返回一个HTMLCollection对象，包含所有符合查找标签名的元素，这种方式是通过元素标签名得到一组元素对象数组。语法：document.getElementsByTagName("元素标签名")或节点对象.getElementsByTagName("元素标签名")
getElementsByName方法：可以根据标签对象的name属性值得到名称相同的一组标签对象，这里标签对象的name可以相同，该方法得到的是标签对象数组，访问其中某个标签对象要根据标签对象在HTML文档中的相对次序决定其下标。语法：document.getElemetsByName("元素名称")
getElementsByClassName方法：接收一个参数，即一个包含一或多个类名的字符串，返回带有指定类的所有元素的NodeList。传入多个类名时，类名的先后顺序不重要。
特殊集合：除了属性和方法之外，document对象还有一些特殊的集合。这些集合都是HTMLCollection对象，为访问文档常用的部分提供快捷方式。
document.anchors:文档中所有带name特性的<a>元素
document.forms:文档中所有<form>元素
document.images:文档中所有<img>元素
document.links:文档中所有带href特性的<a>元素

DOM对象节点的创建和修改

创建节点：通过document内置对象（也是DOM顶层对象）的方法创建不同类型DOM节点对象。createElement方法：创建新的元素节点，返回对新节点的对象的引用。其中element参数为新节点的标签名。createTextNode方法：创建新的文本节点，返回对新节点的对象引用。其中string参数为新节点的文本。createAttribute方法：创建新的属性节点，返回对新节点的对象引用。其中name参数为新节点的属性名。
添加节点：创建节点仅仅是在内存中产生节点，该节点放在什么位置，作为那个节点的子节点，无法得知，必须要学回添加节点的方法，这些方法是已有节点对象的方法，新节点是方法的参数，新节点是已有节点对象的子节点。appendChild方法：添加新节点到方法所属节点的尾部。该方法适用于元素节点，文本节点的添加。setAttributeNode方法：添加新属性节点到方法所属节点的属性集合中。insertBefore方法：将新节点插入到相对节点的前面，最为方法所属节点的子节点。
删除节点：removeChild(node)方法是删除节点node。该方法的所属节点对象是node的父节点。
替换节点：replaceChild(newChild,oldChild) 方法是新节点newChild替换原节点oldChild。该方法的所属节点对象是node的父节点。
复制节点：cloneNode(bool)方法赋值一个节点，返回赋值后的节点引用。bool参数为布尔值，true/false表示是/否克隆该节点所有的子节点。