实现JavaScript的组成----BOM和DOM详解(javascriptz)

编辑：rootadmin

推荐整理分享实现JavaScript的组成----BOM和DOM详解(javascriptz)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:javascript运用,js实现原理,javascript运用,javascript运用,javascript编写,js类的实现,javascript编写,js类的实现,内容如对您有帮助，希望把文章链接给更多的朋友！

我们知道，一个完整的JavaScript的实现，需要由三部分组成：ECMAScript(核心),BOM(浏览器对象模型)，DOM(文档对象模型)。

今天主要学习BOM和DOM。

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的任务队列每次只能执行一段代码，若经过设置的时间间隔过后任务队列为空，则执行代码字符串，否则，要等到前面的代码执行完成后再执行。

此处,我在5秒后调用了一个匿名函数输出good,窗口先弹出一个警示框显示2，可见setTimeout()函数返回的是一个数值ID，具有唯一性，那么我们就可以通过这个ID来清除超时调用，可以使用clearTimeout(ID)来清除。

间接调用:setInterval(),他接受的参数与setTimeout()相同，同样返回一个数值ID，使用clearTimeout()清除。

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 "" 返回端口号，没有则返回空字符串 protocol "http:" 返回页面使用的协议 search "&#;=javascript" 返回查询字符串，以问号开头

实现JavaScript的组成----BOM和DOM详解(javascriptz)

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

其余的如history对象(保存历史纪录)，screen对象(表明客户端能力)，由于在js中编程作用不大，便不再赘述。

------------------------------------------------------------------------------

DOM:

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

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

Node类型：

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

nodeType属性，每个节点都拥有。由个数值表示,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()，创建文本节点，如果连个文本节点是相邻同胞节点，则这个两个文本会连接起来，没有空格。

以上这篇实现JavaScript的组成----BOM和DOM详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持积木网。

JavaScript 基础函数_深入剖析变量和作用域函数定义和调用定义函数，在JavaScript中，定义函数的方式如下：functionabs(x){if(x=0){returnx;}else{return-x;}}上述abs()函数的定义如下：function指出这是一个函数

深入理解JavaScript中的对象复制(Object Clone) JavaScript中并没有直接提供对象复制(ObjectClone)的方法。因此下面的代码中改变对象b的时候，也就改变了对象a。a={k1:1,k2:2,k3:3};b=a;b.k2=4;如果只想改变b而保