JavaScript程序设计基础与实战- 课件 模块6　JavaScript对象模型及应用.pptx

JavaScript对象模型及应用JavaScript程序设计基础与实战Learningandpractice时间:演讲人：

目录/DIRECTORYJavaScript的document对象及操作JavaScript的浏览器对象及操作JavaScript的尺寸与位置及其设置方法3.1网页元素的宽度和高度3.2网页元素的位置3.3通过网页元素的样式属性style获取或设置元素的尺寸和位置实战演练

1.JavaScript的document对象及操作DOM是用以访问HTML元素的标准编程接口，DOM定义了访问和操作HTML文档的标准方法，通过DOM，开发者可以访问HTML文档的所有元素。DOM独立于平台和语言，可被任何编程语言使用，如Java、JavaScript和VBScript等。1．DOM节点当网页被加载时，浏览器会创建页面的DOM。document对象中的每个元素都是一个节点，常见的节点类型如下。①整个文档是一个文档节点。②每一个HTML标签是一个元素节点。③包含在HTML元素中的文本是文本节点。④每一个HTML属性是一个属性节点。⑤注释属于注释节点。HTML文档中的所有节点构成了一棵“节点树”，HTML文档中的每个元素、属性和文本都代表树中的一个节点。该树起始于文档节点，并由此生出多个分支，直到文本节点为止。?【示例6-1】demo0601.html

1.JavaScript的document对象及操作bodyh1我的标题/h1ahref=#我的链接/a/body/html网页demo0601.html的浏览效果如图6-1所示。示例6-1中的HTML代码可以表示成一棵倒立的节点树，如图6-2所示。

1.JavaScript的document对象及操作有了DOM，JavaScript程序能够访问节点树中的所有节点，能够创建新节点，还能够修改和删除所有节点。2．节点关系HTML文档的节点树中各个节点彼此之间存在等级关系。①对于父节点、子节点和同胞（兄弟或姐妹）节点，可以用parent、child以及sibling等术语描述它们的等级关系。②在节点树中，顶端节点被称为根（根节点）。③除了根节点，每个节点都有父节点。④节点能够拥有一定数量的子节点。⑤同胞节点指的是拥有相同父节点的节点。图6-2所示的HTML代码的节点树中各个节点之间的关系分析如下。节点之间具有父子关系，如head和body的父节点是html，文本节点“我的标题”的父节点是h1，head节点的子节点为title，title节点的子节点为文本节点“文档标题”。当节点的父节点为同一个节点时，它们就是同胞节点。例如，a和h1为同胞节点，其父节点是body。节点可以拥有“后代”，后代是指某个节点的所有子节点，以及这些子节点的子节点，以此类推。节点也可以拥有“先辈”，先辈是某个节点的父节点，以及父节点的父节点，以此类推。

1.JavaScript的document对象及操作htmlheadtitleDOM教程/title/headbodyh1DOM节点/h1pHTML文档的节点树中各个节点彼此之间存在等级关系/p/body/html

1.JavaScript的document对象及操作

1.JavaScript的document对象及操作从图6-3中可以得到以下信息。①html是根节点。②html没有父节点。③html是head和body的父节点。④head是html的第一个子节点。⑤body是html的最后一个子节点。同时，通过代码可以得知以下信息。①head有一个子节点：title。②title有一个子节点（文本节点）：“DOM教程”。③body有两个子节点：h1和p。④h1有一个子节点：“DOM节点”。⑤p有一个子节点：“HTML文档的节点树中各个节点彼此之间存在等级关系”。⑥h1和p是同胞节点。

1.JavaScript的document对象及操作在JavaScript中，开发者可以使用以下节点属性在节点之间导航。①parentNode。②childNodes[nodenumber]。③firstChild。④lastChild。⑤nextSibling。⑥previousSibling。访问父节点时使用parentNode属性或者parentElement()方法，访问第1个子节点时使用firstChild属性或者childNodes[0]，访问最后一个子节点时使用lastChild属性或者childNodes[childNodes.length-1]，访问下一个同胞节点时使用next