XML的DOM读取方法

  • 格式:pdf
  • 大小:8.14 KB
  • 文档页数:5

本文由mark_jz贡献 ppt1。

第4章 DOM 1 在应用程序中使用XML文档 在应用程序中使用XML文档 XML XML DOM接口 接口 XML XML 文 档 解 析 器 应 用 程 序 XML SAX接口 接口 2 什么是DOM? 什么是DOM? The W3C Document Object Model (DOM) is a platform and language neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document. 3 DOM的分级 DOM的分级 目前Level 3 目前 Level 2 Level 1 参考文献 – http://www.w3.org/DOM/ 4 DOM Level3 的组成 DOM Level 3 Core – W3C Recommendations DOM Level 3 Load and Save – W3C Recommendations DOM Level 3 XPath DOM Level 3 Views and Formatting DOM Level 3 Requirements DOM Level 3 Validation 5 XML DOM是一种API DOM是一种 是一种API 对象化的XML数据接口 数据接口 对象化的 与语言无关、 与语言无关、与平台无关 W3C的标准接口规范 的标准接口规范 以下的DOM指DOM Core 以下的 指 6 DOM的特点 DOM的特点 采用树结构处理XML文档 文档 采用树结构处理 把一个XML文档看作一棵树 把一个 文档看作一棵树 通过针对树结构的操作来访问、构造、 通过针对树结构的操作来访问、构造、 修改XML文档 修改 文档 7 DOM 树示例 Document Document type Document Element Element Element Attr Text Text Entity reference Attr Attr Element Text 8 DOM结点的基类 DOM结点的基类 Node 对象 属性 – – – – – – – nodeName nodeType nodeValue parentNode childNodes firstChild …… 9 DOM的结点类型 DOM的结点类型 Document Element Attr Text 其余见参考文献 10 Node type Document DocumentFragment DocumentType EntityReference Element Attr ProcessingInstruction Comment Text CDATASection Entity Notation nodeName returns #document #document fragment doctype name entity reference name element name attribute name target #comment #text #cdata-section entity name notation name nodeValue returns null null null null null attribute value content of node comment text content of node content of node null null 11 NodeType 1 2 3 4 5 6 7 8 9 10 11 12 Named Constant ELEMENT_NODE ATTRIBUTE_NODE TEXT_NODE CDATA_SECTION_NODE ENTITY_REFERENCE_NODE ENTITY_NODE PROCESSING_INSTRUCTION_NODE COMMENT_NODE DOCUMENT_NODE DOCUMENT_TYPE_NODE DOCUMENT_FRAGMENT_NODE NOTATION_NODE 12 Document 结点 DOM树的根结点 #document 树的根结点 代表整个XML文档 代表整个 文档 13 14 查看DOM树的根结点 查看DOM树的根结点 即查看DOM树的 树的Document结点 即查看 树的 结点 Javascript与html混和编程 与 混和编程 可以使用FrontPage做编辑器 可以使用 做编辑器 19 20 21 22 查看XML树的根结点 查看XML树的根结点 DOM树Document结点 树 结点documentElement 结点 属性返回DOM树对应的 树对应的XML文档的文 属性返回 树对应的 文档的文 档元素,就是XML树的根结点 档元素,就是 树的根结点 Document结点的子结点中最多有一个元 结点的子结点中最多有一个元 素结点,这个结点就是XML树的根结点 素结点,这个结点就是 树的根结点 23 DOM 树示例 Document Document type Document Element Element Element Attr Text Text Entity reference Attr Attr Element Comment …… function getmessage() { document.getElementById("note1").innerHTML= "The node name of the XML tree's root:" ; document.getElementById("name").innerHTML= xmlDoc.documentElement.nodeName; document.getElementById("note2").innerHTML= "The node type of the XML tree's root:" document.getElementById("type").innerHTML= xmlDoc.documentElement.nodeType 25 document.getElementById("note3").innerHTML= "The node value of the XML tree's root:" document.getElementById("value").innerHTML= xmlDoc.documentElement.nodeValue document.getElementById("note4").innerHTML= "The parent node of the XML tree's root:" document.getElementById("parent").innerHTML= xmlDoc.documentElement.parentNode.nodeName } …… 26 27 结点列表的使用 NodeList Object 属性: 属性:length 方法: 方法:item(index) Index的计数从 开始 的计数从0开始 的计数从 例如,查看DOM树根结点的孩子 例如,查看 树根结点的孩子 28 function getmessage() { document.getElementById("note1").innerHTML= "The child number of the DOM tree's root:" ; document.getElementById("number").innerHTML= xmlDoc.childNodes.length 29 document.getElementById("note11").innerHTML= "The node name of the first child:" document.getElementById("name1").innerHTML= xmlDoc.childNodes.item(0).nodeName; document.getElementById("note21").innerHTML= "The node type of the first child:" document.getElementById("type1").innerHTML= xmlDoc.childNodes.item(0).nodeType document.getElementById("note31").innerHTML= "The node value of the first child:" document.getElementById("value1").innerHTML= xmlDoc.childNodes.item(0).nodeValue 30 document.getElementById("note12").innerHTML= "The node name of the second child:" document.getElementById("name2").innerHTML= xmlDoc.childNodes.item(1).nodeName; document.getElementById("note22").innerHTML= "The node type of the second child:" document.getElementById("type2").innerHTML= xmlDoc.childNodes.item(1).nodeType document.getElementById("note32").innerHTML= "The node value of the second child:" document.getElementById("value2").innerHTML= xmlDoc.childNodes.item(1).nodeValue } 31 32 访问元素 按标签名查找元素 – 返回同名元素的结点列表,即使只有一个这 返回同名元素的结点列表, 样的元素 按路径查找 元素结点的nodeValue属性值为 属性值为NULL 元素结点的 属性值为 元素的字符数据内容以文本结点型子元 素的值来保存 33 function getmessage() { var ele= xmlDoc.getElementsByTagName("note")[0]. firstChild.nextSibling; document.getElementById("note11").innerHTML= "The element is:" ; document.getElementById("name1").innerHTML= ele.nodeName document.getElementById("note12").innerHTML= "The element's value is:" ; document.getElementById("value1").innerHTML= ele.nodeValue var elec=ele.firstChild document.getElementById("note21").innerHTML= "The element is:" ; document.getElementById("name2").innerHTML= elec.nodeName document.getElementById("note22").innerHTML= "The element's value is:" ; document.getElementById("value2").innerHTML= elec.nodeValue document.getElementById("note23").innerHTML= "The element type is:" ; document.getElementById("type2").innerHTML= elec.nodeType 35 } 36 创建空元素 只有Document结点可以创建元素 结点可以创建元素 只有 调用Document对象的方法 调用 对象的方法 – createElement(tagname) 37 创建包含内容的元素 调用Document对象的方法创建元素结点 对象的方法创建元素结点 调用 调用Document对象的方法创建文本结点 调用 对象的方法创建文本结点 – createTextNode(text) 将文本结点添加为元素结点的孩子 – appendChild(textnode) 38 元素的移动 通过在DOM树中添加、删除、替换、复 树中添加、删除、替换、 通过在 树中添加 制元素结点来实现 39 添加结点 appendChild(newnode) – 将newnode结点添加到当前结点的子结点列 结点添加到当前结点的子结点列 表的末尾 insertBefore(newnode,refnode) – 将newnode结点插入到当前结点的子结点 结点插入到当前结点的子结点 refnode之前 之前 当前结点指调用该方法的结点 40 删除结点 removeChild(oldChild) – 从当前结点的子结点中删除 从当前结点的子结点中删除oldChild,并且 , 返回oldChild 返回oldChild 41 替换结点 replaceChild(newnode,oldnode) 用newnode结点代替当前结点中的子结 结点代替当前结点中的子结 点oldnode,并且返回 ,并且返回oldnode结点 结点 42 复制结点 cloneNode(boolean) – 复制当前结点。