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可以操作浏览器以及浏览器读取到的文档。