<?xml version="1.0" encoding="ISO-8859-1"?> <bookstore> <book category="children"> <author>J K. Rowling</author> <year>2005</year> <price>29.99</price> </book> <book category="cooking"> <author>Giada De Laurentiis</author> <year>2005</year> <price>30.00</price> </book> <book category="web"> <author>Erik T. Ray</author> <year>2003</year> <price>39.95</price> </book> <book category="web"> <author>James McGovern</author> <author>Per Bothner</author> <author>Kurt Cagle</author> <author>James Linn</author> <author>Vaidyanathan Nagarajan</author> <year>2003</year> <price>49.99</price> </book> </bookstore> 按照上述xml文件，使用html和javascript读取.xml文件的节点内容，以表格方式对内容进行显示，通过下拉单进行交互式书目内容选取，仅显示选中的书目信息

时间: 2023-07-02 16:05:47 浏览: 103

XML应用开发（软件品牌）-1期 6.1 案例分析-DOM树结构.doc

XML DOM（Document Object Model）是XML文档的一种编程接口，它将XML文档转换成一个可编程的树状结构，使得开发者可以方便地通过编程方式访问和操作XML文档中的数据。这个树形结构由一系列的节点组成，包括文档节点、元素节点、文本节点、属性节点和注释节点等。在DOM中： 1. 整个XML文档被视为一个文档节点，它是树的根。在这个例子中，`<?xml version="1.0" encoding="utf-8"?>`就是文档节点。 2. 每个XML标签表示一个元素节点。在案例中，`<bookstore>`是顶级元素，而`<book>`、`<title>`、`<author>`、`<year>`和`<price>`都是元素节点。 3. 包含在XML元素内的文本被视为文本节点，如"Harry Potter"和"2005"等。 4. 每个XML元素的属性对应一个属性节点，例如`category="CHILDREN"`是`<book>`元素的属性节点。 5. 注释在DOM中表现为注释节点，但案例中没有注释节点。以`6.1-books.xml`为例，其DOM树结构如下： - 文档节点 - 元素节点：bookstore - 元素节点：book (category=CHILDREN) - 属性节点：category - 元素节点：title (lang=en) - 文本节点：Harry Potter - 元素节点：author - 文本节点：J K. Rowling - 元素节点：year - 文本节点：2005 - 元素节点：price - 文本节点：29.99 - 元素节点：book (category=WEB) ... （类似结构，省略其他book元素）通过DOM API，我们可以对这棵树进行操作，例如查找特定元素、修改元素内容、添加新元素或删除现有元素。例如，要获取第一本书的作者，可以使用如下JavaScript代码： ```javascript var xmlDoc = document.implementation.createDocument("", "", null); xmlDoc.async = false; xmlDoc.load("6.1-books.xml"); var bookstoreNode = xmlDoc.documentElement; // 获取bookstore元素 var firstBook = bookstoreNode.getElementsByTagName("book")[0]; // 获取第一本书 var author = firstBook.getElementsByTagName("author")[0].childNodes[0].nodeValue; // 获取作者文本 console.log(author); // 输出：J K. Rowling ``` DOM解析器按照这种方式解析XML文档，提供了灵活且强大的方式来处理XML数据，广泛应用于各种应用程序中，如Web服务、配置文件、数据交换等。理解并熟练运用DOM是XML应用开发的基础，对于处理XML文档至关重要。

以下是一个简单的实现方式： HTML文件： ```html <!DOCTYPE html> <html> <head> <title>Interactive Bookstore</title> <script src="script.js"></script> </head> <body> <h1>Interactive Bookstore</h1> <label for="books">Select a book:</label> <select id="books" onchange="displayBookInfo()"> <option value="">--Select a book--</option> </select> <br><br> <table id="bookInfoTable"> <tr> <th>Category</th> <th>Author(s)</th> <th>Year</th> <th>Price</th> </tr> </table> </body> </html> ``` JavaScript文件： ```javascript // 定义一个变量来保存XML文件 var xmlDoc; // 当页面加载时读取XML文件 window.onload = function() { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { xmlDoc = this.responseXML; populateBookList(); } }; xmlhttp.open("GET", "books.xml", true); xmlhttp.send(); } // 填充下拉单的选项 function populateBookList() { var selectNode = document.getElementById("books"); // 获取所有书本的节点 var bookNodes = xmlDoc.getElementsByTagName("book"); // 遍历所有书本的节点，并将它们添加到下拉单选项中 for (var i = 0; i < bookNodes.length; i++) { var optionNode = document.createElement("option"); optionNode.textContent = bookNodes[i].getElementsByTagName("author")[0].textContent + " - " + bookNodes[i].getElementsByTagName("year")[0].textContent; optionNode.value = i; selectNode.appendChild(optionNode); } } // 显示选中书本的信息 function displayBookInfo() { var selectNode = document.getElementById("books"); var index = selectNode.value; var bookNodes = xmlDoc.getElementsByTagName("book"); var bookNode = bookNodes[index]; // 清空表格内容 var tableNode = document.getElementById("bookInfoTable"); tableNode.innerHTML = ""; tableNode.appendChild(createTableRow("Category", bookNode.getAttribute("category"))); tableNode.appendChild(createTableRow("Author(s)", getAuthors(bookNode))); tableNode.appendChild(createTableRow("Year", bookNode.getElementsByTagName("year")[0].textContent)); tableNode.appendChild(createTableRow("Price", bookNode.getElementsByTagName("price")[0].textContent)); } // 获取书本的所有作者 function getAuthors(bookNode) { var authorNodes = bookNode.getElementsByTagName("author"); var authorList = ""; for (var i = 0; i < authorNodes.length; i++) { if (i > 0) { authorList += ", "; } authorList += authorNodes[i].textContent; } return authorList; } // 创建一个表格行 function createTableRow(label, value) { var trNode = document.createElement("tr"); var tdLabelNode = document.createElement("td"); tdLabelNode.textContent = label; var tdValueNode = document.createElement("td"); tdValueNode.textContent = value; trNode.appendChild(tdLabelNode); trNode.appendChild(tdValueNode); return trNode; } ``` 注意，这个例子假设XML文件名为“books.xml”，需要放在同一目录下。可以根据需要进行修改。

阅读全文

相关推荐

xml-stream-parser：GO的XML流解析器

5-1bookstore.rar_bookstore_jsp 书店_网上书店_网上书店 jsp sql_网上书店 sql

那可以再说说.xml的代码吗

举例说明一下xml的根节点的children节点

xml文本信息

怎么完整配置xml文件

为上面的xml文件添加dtd约束

可以写一下xml文件吗

resources怎么创建xml

xml基本语法

给我一份xml报文实例

xml文件转成二进制之后是什么样的 举例

生成一段复杂格式的xml数据

举例一个常见的xml文档内容

python提取xml指定内容

xml如何写

最新推荐

李白高力士脱靴李白贺知章告别课本剧.pptx

Spring Cloud 学习过程记录，含多方面知识及系列教程.zip

C语言项目之超级万年历系统源码.zip

Jupyter_OReilly书的代码存储库.zip

51单片机加减乘除计算器系统设计（proteus8.17,keil5），复制粘贴就可以运行

高清艺术文字图标资源，PNG和ICO格式免费下载

管理建模和仿真的文件

DMA技术：绕过CPU实现高效数据传输

SGM8701电压比较器如何在低功耗电池供电系统中实现高效率运作？

mui框架HTML5应用界面组件使用示例教程

xml文件转成二进制之后是什么样的举例