JavaScript程序设计第四章DOM文档对象模型.pptx

JavaScript程序设计与应用 DOM文档对象模型 目 录DOM基础获取元素节点操作元素利用层级关系获取元素节点节点操作 目 录DOM基础获取元素节点操作元素利用层级关系获取元素节点节点操作 一、DOM是什么内置函数DOM基础1、 Web APIs API：应用程序编程接口，是一些预定义的接口（如函数等），通过接口我们可以实现某种功能，但是使用时我们不需了解接口这个功能具体是如何实现的。Web APIs：指浏览器提供的一套操作浏览器功能和页面元素的API（DOM和BOM）。2、DOM定义文档对象模型DOM（Document Object Model）：是W3C组织推荐的可扩展标记语言（html或者xml）的标准编程接口。是一个与语言无关、与平台无关的标准接口规范。它定义了HTML文档的逻辑结构，给出了一种访问和处理HTML文档的方法。通过DOM接口，JavaScript可以在任何时候访问并操作HTML文档中的任何一部分数据。可以动态地创建文档，遍历文档结构，添加、修改、删除文档内容，改变文档的显示方式等，从而实现页面交互效果。 一、DOM是什么内置函数DOM基础1、 Web APIs API：应用程序编程接口，是一些预定义的接口（如函数等），通过接口我们可以实现某种功能，但是使用时我们不需了解接口这个功能具体是如何实现的。Web APIs：指浏览器提供的一套操作浏览器功能和页面元素的API（DOM和BOM）。2、DOM定义文档对象模型DOM（Document Object Model）：是W3C组织推荐的可扩展标记语言（html或者xml）的标准编程接口。是一个与语言无关、与平台无关的标准接口规范。它定义了HTML文档的逻辑结构，给出了一种访问和处理HTML文档的方法。通过DOM接口，JavaScript可以在任何时候访问并操作HTML文档中的任何一部分数据。可以动态地创建文档，遍历文档结构，添加、修改、删除文档内容，改变文档的显示方式等，从而实现页面交互效果。 二、DOM树DOM基础1、定义DOM接口提供了一种依据HTML的文档结构的分层对象模型。在浏览器中，基于DOM的HTML分析器将一个页面转换成一个对象模型的集合（通常称DOM树）。 DOM基础2、节点DOM树中的每一个对象我们称之为节点，所以我们也称这个根据文档生成的层次结构是一棵节点树。不管一个文档有多简单或者多复杂，其中的信息都会被转化成一棵对象节点树。在这棵节点树中，有一个根节点即Document节点，所有其他的节点都是根节点的后代节点。DOM中的节点有元素节点、属性节点、文本节点、注释节点等不同类型，最常用的节点类型有元素、文本和属性节点这三种。 DOM基础3、节点类型Node.ELEMENT_NODE (1) 一个标记（元素）Node.ATTRIBUTE_NODE (2) 表示一个标记（元素）的属性Node.TEXT_NODE (3) 表示一个元素的文本内容Node.CDATA_SECTION_NODE (4) 在XML文档中表示Character Data（字符数据）部分Node.ENTITY_REFERENCE_NODE (5) 在文档中表示一个实体引用Node.ENTITY_NODE (6) 在XML文档中表示一个实体Node.PROCESSING_INSTRUCTION_NODE (7) 表示一个文档处理程序使用的特有指令Node.COMMENT_NODE (8) ：表示一个注释Node.DOCUMENT_NODE (9) 表示文档的根节点Node.DOCUMENT_TYPE_NODE (10) 每个文档节点都有一个DocumentType节点，它提供文档类型的定义Node.DOCUMENT_FRAGMENT_NODE (11) 可以将文档片段看作轻量级或者更小型的Document节点。定义这种数据类型是因为通常希望只提取文档的一部分来处理。Node.NOTATION_NODE (12) 在XML文档中表示一个符号 DOM基础4、Document对象 每个载入浏览器的 HTML页面都会成为 document 对象（即该HTML页面对应的DOM）。document 对象使我们可以通过JavaScript对 HTML 页面中的所有元素进行访问。（1） Document 对象 document 对象是 window 对象的一部分，可通过 window.document 属性对其进行访问。（2） Document 对象集合 DOM基础（3）Document 对象属性（4）Document 对象方法4、Document对象 目 录DOM基础获取元素节点操作元素利用层级关系获取元素节点节点操作 获取元素节点二、获取ht