实现JavaScript的组成----BOM和DOM

  我们知道,一个完整的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。

    

<a href="http://www.baidu.com">click me</a>
     <script>
        var link=document.getElementsByTagName("a")[0];
            alert(link.nodeName);
         window.onload=function(){

            link.onclick=function () {
                window.open(link.href,"good","width=400px,height=300px");
                return false;

            }
        }  </script

     此处特性字符串的具体设置不再赘述,有兴趣的可以点击此处

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

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

    

var al=setTimeout(function () {
            alert("good");
        },5000);
        alert(al);  //2

     此处,我在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 "8080" 返回端口号,没有则返回空字符串
protocol "http:" 返回页面使用的协议
search "?=javascript" 返回查询字符串,以问号开头

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

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

  

  



  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(),创建文本节点,如果连个文本节点是相邻同胞节点,则这个两个文本会连接起来,没有空格。

    

    

  

     

    

        

  

 

  

  

时间: 2024-10-12 17:38:20

实现JavaScript的组成----BOM和DOM的相关文章

JavaScript:操作 BOM 和 DOM

JavaScript:操作 BOM 和 DOM 浏览器说明 由于JavaScript的出现就是为了能在浏览器中运行,所以,浏览器自然是JavaScript开发者必须要关注的. 目前主流的浏览器分这么几种: IE 6~11:国内用得最多的IE浏览器,历来对W3C标准支持差.从IE10开始支持ES6标准: Chrome:Google出品的基于Webkit内核浏览器,内置了非常强悍的JavaScript引擎——V8.由于Chrome一经安装就时刻保持自升级,所以不用管它的版本,最新版早就支持ES6了:

[转] JavaScript学习:BOM和DOM的区别和关联

BOM 1.  BOM是Browser Object Model的缩写,即浏览器对象模型. 2.  BOM没有相关标准. 3.  BOM的最根本对象是window. 从1可以看出来:BOM和浏览器关系密切.浏览器的很多东西可以通过JavaScript控制的,例如打开新窗口.打开新选项卡(标签页).关闭页面,把网页设为主页,或加入收藏夹,等等…这些涉及到的对象就是BOM. 从2可以看出来:由于没有标准,不同的浏览器实现同一功能,可以需要不同的实现方式.对于上面说的功能,不同的浏览器的实现功能所需要

JavaScript中的BOM和DOM

javascript组成: 1. ECMAScript 基本语法. 2. BOM (浏览器对象模型) 3. DOM (文档对象模型) 简单的说就是 BOM是浏览器对象模型,用来获取或设置浏览器的属性.行为,例如:新建窗口.获取屏幕分辨率.浏览器版本号等.DOM是文档对象模型,用来获取或设置文档中标签的属性,例如获取或者设置input表单的value值. 一)BOM(borwser Object  Model) 浏览器对象模型:使用对象描述了浏览器的各个部分的内容. 1)window :当前的窗口

JavaScript学习总结(三)BOM和DOM详解

转自:http://segmentfault.com/a/1190000000654274 DOM介绍 D(文档)可以理解为整个Web加载的网页文档,O(对象)可以理解为类似window对象只来的东西,可以调用属性和方法,这里我们说的是document对象,M(模型)可以理解为网页文档的树形结构,DOM树由节点构成 节点种类:元素节点.文本节点和属性节点 DOM(文档对象模型)是 HTML 和 XML 的应用程序接口(API).DOM代表着被加载到浏览器窗口里的当前网页:浏览器向我们提供了当前网

JavaScript(核心、BOM、DOM)

http://www.flyne.org/article/407 JavaScript(核心.BOM.DOM) JavaScript是基于对象和事件驱动的客户端脚本语言.有如下特点: 交互性 安全性(不可以直接访问本地硬盘) 跨平台性(只要是可以解析js的浏览器都可以执行,和平台无关) 1.JavaScript和Java不同! ①所属:NetScape和Sun ②基于对象和面向对象 ③JS可以直接解析执行,Java需先编译在运行 ④JavaScript是一种弱类型的语言,Java是强类型的语言.

javascript学习大总结(四)BOM和DOM详解

我们都知道, javascript 有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,ie和其他的浏览器风格迥异. 1 DOM 是 W3C 的标准: [所有浏览器公共遵守的标准]2 BOM 是 各个浏览器厂商根据 DOM 在各自浏览器上的实现: [表现为不同浏览器定义有差别,实现方式不同]3 window 是 BOM 对象,而非 js 对象: BOM 主要处理浏览器窗口和框架,不过通常浏览器特定的 JavaScript 扩展都被看做 BOM

【JavaScript】BOM和DOM

在第一篇JavaScript视频总结博客中,是对JavaScript做了一个宏观的认识.其中,不知道大家可否还记得,JavaScript的核心部分包括哪些? JavaScript的核心部分主要包括三个: 1.ECMAScript,如果想更多了解它,不妨看看百度. 2.BOM(Browser Object Model)(浏览器对象模型) 3.DOM(Document Object Model )(文本对象模型) 本篇博客主要是对后面两个核心部分做个简单总结,两者看起来相似,其实有着完全不一样的作用

JavaScript的组成——ECMAScript、BOM和DOM

JavaScript由三部分组成:ECMAScript.BOM以及DOM 1.核心--ECMAScript:提供核心语言功能 2.文档对象模型--DOM:提供访问和操作网页内容的方法和接口 针对XML但经过扩展用于HTML的应用程序编程接口(API). DOM把页面映射成一个多层节点结构. 为什么使用DOM?Netscape和微软在开发DHTML方面各持己见,为避免两强割据,浏览器互不兼容的局面,保持Web跨平台的天性,DOM应运而生. DOM1级:由DOM Core和DOM HTML两部分组成

JS中的函数、Bom、DOM及JS事件

本期博主给大家带来JS的函数.Bom.DOM操作,以及JS各种常用的数据类型的相关知识,同时,这也是JavaScript极其重要的部分,博主将详细介绍各种属性的用法和方法. 一.JS中的函数 [函数的声明及调用] 1.函数声明的格式: function 函数名(参数1,参数2,参数3,--){//函数体 return 结果; } >>>函数的调用格式: 直接调用:函数调用的格式:函数名(参数一的值,参数二的值,--): 事件调用:事件名=函数名( ); 2.函数声明的几点强调: ①函数名