JavaScriptDOM实验指导.pptVIP

文档对象模型DOM DOM是Document Object Model(文档对象模型)的缩写 DOM 是 W3C（万维网联盟） 的推荐标准。 DOM 定义了访问诸如 XML 和 XHTML 文档的标准。 W3C DOM 被分为 3 个不同的部分/级别 核心 DOM 用于任何结构化文档的标准模型 XML DOM 用于 XML 文档的标准模型 HTML DOM 用于 HTML 文档的标准模型 标记语言文档的层次结构 特殊标记 文档声明 文档类型定义 处理指令 注释 元素：标记或闭合标记对 属性：标记中包含的按名称访问的子节点 子元素：闭合标记对中包含的元素 子元素可以按顺序访问 文本 文档：包含所有元素、特殊标记 HTML DOM 节点树 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html head title 标题 /title /head body a href=“” 链接 /a /body /html HTML DOM 节点层次 节点彼此间的关系 父节点：除文档节点之外的每个节点都有父节点。 head 和 body 的父节点是 html 节点 文本节点 链接 的父节点是 a 节点。 子节点： head 节点有一个子节点：title 节点。 title 节点也有一个子节点：文本节点 标题。 同辈（同级节点）：当节点分享同一个父节点时，它们就是同辈（同级节点） head 和 body是同辈，因为它们的父节点均是 html节点。 后代：后代指某个节点的所有子节点，或者这些子节点的子节点，以此类推。 所有的文本节点都是 html节点的后代，而第一个文本节点是 head 节点的后代。 先辈：先辈是某个节点的父节点，或者父节点的父节点，以此类推。 所有的文本节点都可把 html 节点作为先辈节点。 DOM的接口和类(继承关系) Node 节点 Element 元素节点 HTMLElement HTML元素节点 Attr 属性节点 Document 文档节点 HTMLDocument HTML文档节点 NodeList 节点列表 NamedNodeMap 命名的节点映射 HTML Document 对象 每个载入浏览器的 HTML 文档都会成为 Document 对象。 Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。 提示： Document 对象可通过 window.document 属性对其进行访问。 因为window是全局环境的默认对象，所以可以直接使用document对其进行访问 向文档写入内容 write() 和writeln()方法可向文档写入 HTML 表达式或 JavaScript 代码。 语法 document.write(exp1,exp2,exp3,) document.writeln(exp1,exp2,exp3,) writeln() 在输出内容之后再输出一个换行符（注意不是BR，所以在浏览器中看不出来） 例：向文档写入内容 document.writeln(Hello World!) document.write(h1Hello World!/h1) document.write(Hello World! ,Hello You! ,p style=color:blue;Hello World!/p) 获取节点类型、名称、值 node的属性 nodeName 节点名称（大写） nodeValue 节点值 nodeType 节点类型 应用实例 var x=document; document.writeln(节点类型：+x.nodeType+，节点名称：+x.nodeName+，节点值：+x.nodeValue+.br/); 节点类型、名称、值 获取元素的引用 直接获取特定节点的引用 根据ID属性获取节点的引用 根据NAME属性获取节点引用的列表 根据标记名获取节点引用的列表 获取相邻节点的引用 直接获取特定节点 document 返回HTML 文档的文档节点 document.documentElement 可返回存在于 XML 以及 HTML 文档中的文档根节点。 对 HTML 页面提供了对 html 标签的直接访问 document.body 对 HTML 页面的特殊扩展，提供了对 body 标签的直接访问。 例：直接获取特定节点 var x=document; document.writeln(节点类型：+x.nodeTy