JavaScript+jQuery程序设计第7章 文档对象模型（DOM）.pptVIP

文档对象模型（DOM） DOM概述 DOM对象节点属性 节点 获取文档中的指定元素 与DHTML相对应的DOM DOM概述 DOM分层 DOM级别 DOM分层 html head title标题内容/title /head body h3三号标题/h3 b加粗内容/b /body /html 文档对象模型采用的分层结构为树形结构，以树节点的方式表示文档中的各种内容。 DOM级别 W3C在1998年10月标准了DOM第一级，它定义了基本的接口，其中包含了所有HTML接口。在2000年11月标准化了DOM第二级，在第二级中不但对核心的接口升级，还定义了使用文档事件和Css样式表的标准的API。Netscape的Navigator6.0浏览器和Microsoft的Internet Explorer 5.0浏览器，都支持了W3C的DOM第一级的标准。目前，Netscape、Firefox（FF火狐浏览器）等浏览器已经支持DOM第二级的标准，但Internet Explorer（IE）还不完全支持DOM第二级的标准。 DOM对象节点属性 访问指定节点 遍历文档树 访问指定节点 获取某一个节点的名称 获取某个节点的类型 返回节点的值 三个属性 nodeName属性 nodeType属性 nodeValue属性 访问指定节点。 实例 遍历文档树 返回当前节点的父节点 返回当前节点的第一个子节点 返回当前节点的最后一个子节点 五个属性 parentNode属性 firstChild属性 lastChild属性 previousSibling属性 nextSibling属性 返回当前节点的前一个兄弟节点 返回当前节点的后一个兄弟节点 遍历文档树 在页面中，通过相应的按钮查找到文档的各个节点的名称、类型和节点值。 实例 节点 创建节点 插入和追加 节点复制 删除与替换 创建节点 创建新节点 创建新元素 创建文本节点 将新的子节点添加到当前节点的末尾 三个方法 createElement()方法 createTextNode()方法 appendChild()方法 obj.appendChild(newChild) 新的子节点 appendChild()方法语法格式 在该节点末尾插入新节点 创建节点 在页面加载后自动显示“创建新节点”文本内容，并通过使用b标记将该文本加粗。 实例 创建节点 在页面加载后，自动创建多个p节点，并在每个节点中显示不同的文本内容。 实例 创建多个节点 创建多个节点通过使用循环语句，利用createElement()方法和createTextNode()方法生成新元素并生成文本节点。最后通过使用appendChild()方法将创建的新节点添加到页面上。 创建节点 以只刷新一次页面的形式在页面中动态添加多个b节点，并在每个节点中显示不同的文本内容。 实例 创建多个节点 createDocumentFragment()方法用来创建文件碎片节点。 插入和追加 在页面的文本框中输入需要插入的文本，然后通过单击“前插入”按钮将文本插入到页面中。 实例 obj.insertBefore(new,ref) 在该节点前插入新节点 新的子节点 语法格式 插入节点通过使用insertBefore()方法来实现。 节点复制 obj.cloneNode(deep) 一个Boolean值，表示是否为深度复制 要复制的节点 语法格式 复制节点可以使用cloneNode()方法来实现。 节点复制 在页面中显示一个下拉列表框和两个按钮，当单击“复制”按钮时只复制一个新的下拉列表框，并未复制其选项。当单击“深度复制”按钮时将会复制一个新的下拉列表框并包含其选项。 实例 删除与替换 obj.removeChild(oldChild) 要删除的节点 语法格式 删除节点通过使用removeChild()方法来实现。 删除节点 删除与替换 通过DOM对象的removeChild()方法，动态删除页面中所选中的文本。 实例 删除与替换 obj. replaceChild(new,old) 替换后的新节点 语法格式 替换节点可以使用replaceChild()方法来实现。 替换节点 需要被替换的旧节点 删除与替换 在页面中输入替换后的标记和文本，单击“替换”按钮将原来的文本和标记替换成为新的文本和标记。 实例 获取文档中的指定元素 通过元素的ID属性获取元素 通过元素的name属性获取元素 通过元素的ID属