7th week blog

BOM:

BOM提供了不少对象，用来访问浏览器的功能，这些功能于网页内容无关（这些是DOM的事），目前，BOM已经被W3C搬入了HTML5规范中。

window对象：

BOM的core，表示浏览器的一个实例，它既是经过javascript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象，这意味着在网页中定义的任何一个对象，变量和函数，都已window做为其Global对象，所以有权访问paresinInt()等方法。（摘自高程三）。此外，若是一个网页中包含框架，则每一个框架都拥有本身的window对象，而且保存在frames集合中（索引0开始，ltr，ttb）。

首先，全局执行环境中的变量，函数都是window对象的属型和方法。固然，全局变量与直接定义的window属型有一点差别，全局变量（准确的说应该是显式声明的全局变量）没法使用delete，而window属性就能够。此外，还有一个细节须要注意，尝试访问未声明的变量会出错，可是使用查询window对象就没有问题。

window有哪些常见的属性或者方法

1.name，每一个window对象都有name属性，包含框架的名称。一般是为了了解窗口关系与框架。

2.窗口位置方法:moveTo(新位置的x坐标,新位置的y坐标)，moveBy(水平移动x,垂直移动y)。这两个方法不适用框架。

3.窗口大小属性：innerWidth/Height（视图区（减去边框的宽度）的大小/* IE,Safari,firefox */）,outerWidth/Height(返回浏览器窗口的大小/*IE,Safari,firefox */).在Chrome中，inner，outer均返回视图区的大小。

固然，能够经过resizeTo(新窗口width,新窗口height),resizeBy(比原宽度提升x,比原高度提升y)来改变窗口大小。这恋歌方法不适用框架结构。

4.window.open(URL，窗口目标，特性字符串，新页面是否取代浏览器历史纪录中当前加载页面的boolean)用于导航到一个特定的url或者打开一个新的窗口。若是指定窗口目标，且窗口目标是已有的窗口或者框架的名称，那么就会在有更名成的窗口或者框架中加载指定的url。不然，就将打开的新窗口命名为目标窗口。固然，窗口目标能够指定的关键字有_self,_parent,_top,_blank。

5.做为一门单线程语言，js仍然容许设置超时值（指定的事件事后执行代码）和间歇时间值（每隔指定的时间循环一次）来调度代码在特定的时刻执行。

超时调用:setTimeout(js代码字符串，毫秒时间)，做为一个单线程语言，js的任务队列每次只能执行一段代码，若通过设置的时间间隔事后任务队列为空，则执行代码字符串，不然，要等到前面的代码执行完成后再执行。

6.系统对话框方法：alert(),confirm(),prompt()等。

location对象

与其说是BOM中的对象，不如说Location是window对象中的一个属性，固然，也是后面要讲的DOM中document对象的属性，也就是说,window.location和document.location引用同一个对象。

location对象属性列表,修改这些属性能够加载新的页面，且会在历史记录中生成新的纪录。使用location.replace()则不会再历史纪录中生成新纪录。

hash	"#contents"	返回url中的hash，没有为“”
host	"www.google.com"	返回服务器名和端口号（若是有）
hostname	"www.google.com"	返回不带端口号的服务器名称
href	"www.google.com"	返回当前页面的完整url,调用了assign()
pathname	''/wileyCDA/'	返回目录名称
port	"8080"	返回端口号，没有则返回空字符串
protocol	"http:"	返回页面使用的协议
search	"?=javascript"	返回查询字符串，以问号开头

navigator对象：用于识别浏览器的事实标准，其属性和方法主要用于检测浏览器的类型。

其他的如history对象(保存历史纪录)，screen对象(代表客户端能力)

 

DOM:

DOM是基于XML后通过扩展用于HTML的API，DOM依靠节点树展开。　

首先须要明确一点，文档节点是每一个节点的根节点，文档节点有且只有一个子节点既元素html（文档元素）。

Node类型：

DOM1中的一个接口，由DOM全部节点类型（文本节点，属性节点，元素节点）实现，该接口在js中做为Node类型实现。

nodeType属性，每一个节点都拥有。由12个数值表示,element--1,attribute--2,text--3......

nodeName属性，对于元素节点，nodeName的值为标签名。

nodeValue属性,对于元素节点，nodeValue的值为null。

节点关系：每一个节点都拥有childNodes属性，保存NodeList（类数组对象）对象。每一个节点都拥有parentNode属性，指向父节点。在childNodes中的节点拥有相同的parentNode。使用previousSibling和nextSibling属性能够访问兄弟节点。同时childNodes[0]==firstChild,childNodes[childNodes.length-1]==lastChild.

操做节点：appendChild()，向NodeList末尾push一个节点，返回新增的节点。insertBefore()，向NodeList首部unshift一个节点，返回新增节点。replaceChild(newChild,targetChild),替换目标节点，原节点仍在文档中，但已经没有位置。removeChild(tragetChild)，移除节点，与replaceChild()的效果相似。cloneChild(boolean),true时表示彻底复制（整个节点与子节点）,false表示基本复制。

Document类型：

表示文档，document对象是HTMLDDocument（继承自Document类型）的实例，表示整个html页面。同时,doument对象也是window对象的一个属性，所以能够做为全局对象访问。document.firstChild==html. document.body==body. document.doctype--->对<!DOCTYPE>的引用。doucment.title--->title  document.url--->location.url.

查找元素：getElementById(),getElementsByTagName(),getElementsByClassName().

文档写入：write(),writeln(),open(),close()

Element类型:

getAttribute(),获取特性 对于class，则使用“class”,而不是className，在使用element.className时能够获取class特性。

setAttribute()，设置特性，若特性存在，则替换。不然，建立。

removeAttribute()，完全删除元素特性。

createElement()，建立新元素。

Text类型:

createTextNode()，建立文本节点，若是连个文本节点是相邻同胞节点，则这个两个文本会链接起来，没有空格。

 

 

DOM 是为了操做文档出现的 API，document 是其的一个对象；
BOM 是为了操做浏览器出现的 API，window 是其的一个对象。

BOM是浏览器对象模型，DOM是文档对象模型，前者是对浏览器自己进行操做，然后者是对浏览器（可当作容器）内的内容进行操做。

DOM：即document，包括index.html，css等文件，部署在服务器上，能够经过浏览器的地址栏输入URL而后回车将这个document加载到本地，浏览，右键查看源代码等。

BOM：

（1）浏览器的标签页，地址栏，搜索栏，书签栏，窗口放大还原关闭按钮，菜单栏等等

（2）浏览器的右键菜单

（3）document加载时的状态栏，显示http状态码等

（4）滚动条scroll bar

 

DOM 全称是 Document Object Model，也就是文档对象模型。是针对XML的基于树的API。描述了处理网页内容的方法和接口，是HTML和XML的API，DOM把整个页面规划成由节点层级构成的文档。

这个DOM定义了一个HTMLDocument和HTMLElement作为这种实现的基础,就是说为了能以编程的方法操做这个 HTML 的内容（好比添加某些元素、修改元素的内容、删除某些元素），咱们把这个 HTML 看作一个对象树（DOM树），它自己和里面的全部东西好比 <div></div> 这些标签都看作一个对象，每一个对象都叫作一个节点（node），节点能够理解为 DOM 中全部 Object 的父类。   

DOM 有什么用？就是为了操做 HTML 中的元素，好比说咱们要经过 JS 把这个网页的标题改了，直接这样就能够了：document.title = 'how to make love';这个 API 使得在网页被下载到浏览器以后改变网页的内容成为可能。

 

BOM 是 Browser Object Model，浏览器对象模型。

DOM 是为了操做文档出现的接口，那 BOM 顾名思义其实就是为了控制浏览器的行为而出现的接口。浏览器能够作什么呢？好比跳转到另外一个页面、前进、后退等等，程序还可能须要获取屏幕的大小之类的参数。因此 BOM 就是为了解决这些事情出现的接口。好比咱们要让浏览器跳转到另外一个页面，只须要location.href = "http://www.xxxx.com";这个 location 就是 BOM 里的一个对象。 因为BOM的window包含了document，所以能够直接使用window对象的document属性，经过document属性就能够访问、检索、修改XHTML文档内容与结构。由于document对象又是DOM（Document Object Model）模型的根节点。能够说，BOM包含了DOM(对象)，浏览器提供出来给予访问的是BOM对象，从BOM对象再访问到DOM对象，从而js能够操做浏览器以及浏览器读取到的文档。