JavaScript前端开发程序设计BOM与DOM.pptxVIP

程序设计教程（）JavaScript前端开发 第6章 BOM与DOM 学习目的:■ 掌握BOM地概念以及BOM对象体系构成■ 掌握Window对象地属性与方法■ 掌握Navigator对象地属性与方法■ 掌握Document对象地属性与方法■ 掌握DOM对象地属性与方法■ 掌握访问与操纵DOM对象地方法  认识BOM1Window对象2Navigator对象3Document对象4DOM对象5DOM对象地分类6访问DOM对象7操纵DOM对象8目录CONTENTS 认识BOM1Window对象2Navigator对象3Document对象4DOM对象5DOM对象地分类6访问DOM对象7操纵DOM对象8目录CONTENTS 认识BOM浏览器对象模型（Browser Object Model,BOM）主要是用于访问与操纵浏览器窗口。BOM主要是由一系列地浏览器对象组成。这一系列地浏览器对象被称为BOM对象体系。BOM对象体系如图6-1所示。 图6-1 BOM对象体系 认识BOM1Window对象2Navigator对象3Document对象4DOM对象5DOM对象地分类6访问DOM对象7操纵DOM对象8目录CONTENTS Window对象Window对象是用来表示浏览器一个打开地窗口。 JavaScript,Window对象地使用,主要集在窗口地打开与关闭,窗口状态地设置,定时执行,延时执行以及各种对话框地应用上。 Window对象 Window对象 认识BOM1Window对象2Navigator对象3Document对象4DOM对象5DOM对象地分类6访问DOM对象7操纵DOM对象8目录CONTENTS Navigator对象Navigator对象是指浏览器对象,包含浏览器地信息。Navigator对象常用地属性如表6-4所示。 认识BOM1Window对象2Navigator对象3Document对象4DOM对象5DOM对象地分类6访问DOM对象7操纵DOM对象8目录CONTENTS Document对象Document对象是指文档对象,表示在浏览器窗口显示地页面文档。Document对象既属于BOM对象,也属于DOM对象,Document对象地属性与方法如表6-5所示。 认识BOM1Window对象2Navigator对象3Document对象4DOM对象5DOM对象地分类6访问DOM对象7操纵DOM对象8目录CONTENTS DOM对象DOM对象是处理HTML文档地技术,通过DOＭ对象,JavaScript可以动态访问,更新,操纵HTML页面地内容,结构与样式。 什么是DOM文档对象模型（Document Object Model,DOM）是一种处理HTML文档地应用程序接口。在W3C制定地DOM规范,DOM主要应该包括Core DOM（核心DOM）,XML DOM与HTML DOM。JavaScript地DOM一般是指HTML DOM,为了方便起见,将HTML DOM称为DOM。从原理上来看,每创建一个网页,DOM会根据这个网页创建一个文档对象,DOM就是这个文档对象地模型,这个模型表示为树状模型。在这个树状模型,网页地元素与内容表现为一个个相互连接地节点。所以说一个网页实际上就是一个文档对象。 DOM地节点树DOM地文档对象模型采用地是树型结构目录,以树节点地方式表示文档地各种内容,如下列代码所示。htmlheadtitle标题/title/headbody h1一号标题/h1p文档段落/p/body/html DOM地节点树如上代码所示,在DOM会根据HTML文档标签地嵌套层次将HTML文档处理为DOM节点树,如图6-11所示。 DOM地节点树如图6-11所示,在DOM地文档对象模型,每一个对象都是一个节点（node）,下面分别介绍其概念。（1）根节点,处于节点树地最项层,如html。（2）父节点,一个节点之上地节点,如head地父节点是html。（3）子节点,一个节点之下地节点就是该节点地子节点,如body地子节点是p。（4）兄弟节点,处于同一层次地节点,如head与body就是兄弟节点。（5）叶子节点,节点树最底层地节点,如标题文档段落等文本。 DOM地节点类型根据W3C标准规范,DOM树地节点分为12种类型。其常用地节点类型是文档,元素,属性,文本与注释5种,如表6-6所示。 认识BOM1Window对象2Navigator对象3Document对象4DOM对象5DOM对象地分类6访问DOM对象7操纵DOM对象8目录CONTENTS DOM对象地分类在JavaScript,DOM是一组对象地集合。通过这些对象地操作,可以实现对HTML文档进行读取,遍历,修改,添加,删除等操作。在D