XML DOMoperation - 极客tutorial网

XML DOMIntroduction

XML DOM (Document Object Model, documentationobjectmodel) is a用于访问 and operationXMLdocumentation 标准API (application程序programminginterface) . 它将XMLdocumentation表示 for 一个tree形structure, 其in每个node代表documentation 一个部分 (such as元素, property, 文本etc.) . throughXML DOM, Development者可以usingprogramminglanguage (such asJavaScript, Java, Pythonetc.) 来访问, modify, creation and deleteXMLdocumentationin node.

XML DOM 作用

访问XMLdocumentationin 元素 and property
modifyXMLdocumentation in 容 and structure
creation new 元素, property and 文本
deleteXMLdocumentationin node
遍历XMLdocumentation nodetree
搜索 and filterXMLdocumentationin node
implementationXMLdocumentation 动态update and 交互

XML DOM 特点

平台无关: 可以 in 不同平台 and programminglanguageinusing
language无关: 可以using many 种programminglanguage访问 and operationXMLdocumentation
标准interface: providing了统一 interface来访问 and operationXMLdocumentation
tree形structure: 将XMLdocumentation表示 for 一个tree形structure, 便于understanding and operation
动态operation: 可以实时modifyXMLdocumentation in 容 and structure

XML DOMnodetree

in XML DOMin, XMLdocumentation被表示 for 一个nodetree, 其in每个node都 is documentation 一个组成部分. nodetree 根部 is documentationnode, 它package含了整个XMLdocumentation. documentationnode under 面 is 根元素node, 根元素nodepackage含了所 has other元素node, propertynode, 文本nodeetc..

XMLnodetreeexample

<?xml version="1.0" encoding="UTF-8"?>
<books>
    <book id="B001">
        <title>XMLBasicstutorial</title>
        <author>张三</author>
        <year>2025</year>
        <price>99.00</price>
    </book>
</books>

for 应 nodetreestructure:

documentationnode (Document Node)

元素node (Element Node) : books

元素node (Element Node) : book

propertynode (Attribute Node) : id="B001"
元素node (Element Node) : title

文本node (Text Node) : XMLBasicstutorial

元素node (Element Node) : author

文本node (Text Node) : 张三

元素node (Element Node) : year

文本node (Text Node) : 2025

元素node (Element Node) : price

文本node (Text Node) : 99.00

XML DOMnodeclass型

XML DOM定义了 many 种nodeclass型, 每种nodeclass型都 has 其specific property and method. 以 under is XML DOMin常用 nodeclass型:

nodeclass型	describes	nodeType值
documentationnode (Document)	整个XMLdocumentation 根node	9
元素node (Element)	XML元素	1
propertynode (Attr)	元素 property	2
文本node (Text)	元素 or property 文本 in 容	3
commentnode (Comment)	XMLcomment	8
processing指令node (ProcessingInstruction)	XMLprocessing指令	7
documentationclass型node (DocumentType)	documentationclass型声明	10
documentation片段node (DocumentFragment)	documentation片段, 用于临时storenode	11

XML DOM访问node

in XML DOMin, has many 种method可以访问XMLdocumentationin node. 以 under is 一些常用访问node method:

1. throughnoderelationships访问

可以throughnode之间 relationships (such as父子relationships, 兄弟relationships) 来访问node.

throughnoderelationships访问example

<!-- XMLdocumentation -->
<?xml version="1.0" encoding="UTF-8"?>
<books>
    <book id="B001">
        <title>XMLBasicstutorial</title>
        <author>张三</author>
    </book>
</books>

<!-- JavaScriptcode -->
var xmlDoc = loadXMLDoc("books.xml");

// 获取根元素node
var rootElement = xmlDoc.documentElement;

// 获取第一个子元素node
var firstChild = rootElement.firstChild;

// 获取最 after 一个子元素node
var lastChild = rootElement.lastChild;

// 获取 under 一个兄弟node
var nextSibling = firstChild.nextSibling;

// 获取 on 一个兄弟node
var previousSibling = lastChild.previousSibling;

// 获取父node
var parentNode = firstChild.parentNode;

2. through元素名称访问

可以usinggetElementsByTagName()method根据元素名称来访问node.

through元素名称访问example

<!-- JavaScriptcode -->
var xmlDoc = loadXMLDoc("books.xml");

// 获取所 has book元素node
var bookElements = xmlDoc.getElementsByTagName("book");

// 获取第一个book元素node
var firstBook = bookElements[0];

// 获取所 has title元素node
var titleElements = xmlDoc.getElementsByTagName("title");

// 获取第一个title元素node 文本 in 容
var firstTitle = titleElements[0].textContent || titleElements[0].nodeValue;

3. throughID访问

such as果XMLdocumentationin has 元素 IDproperty, 可以usinggetElementById()method根据ID来访问node. 但需要注意 is , getElementById()method in 不同浏览器 and XML解析器in supportcircumstances可能不同.

throughID访问example

<!-- JavaScriptcode -->
var xmlDoc = loadXMLDoc("books.xml");

// 获取ID for "B001" 元素node
var bookElement = xmlDoc.getElementById("B001");

4. throughXPath访问

可以usingXPath表达式来访问 and 选择XMLdocumentationin node. in JavaScriptin, 可以usingevaluate()method来执行XPath表达式.

throughXPath访问example

<!-- JavaScriptcode -->
var xmlDoc = loadXMLDoc("books.xml");

// creationXPath表达式
var xpathExpr = "//book[@id='B001']/title";

// 执行XPath表达式
var result = xmlDoc.evaluate(xpathExpr, xmlDoc, null, XPathResult.ANY_TYPE, null);

// 获取结果
var titleElement = result.iterateNext();
var titleText = titleElement.textContent;

XML DOMmodifynode

usingXML DOM, 可以modifyXMLdocumentationin node in 容 and property. 以 under is 一些常用 modifynode method:

1. modify元素 in 容

可以usingtextContentproperty or nodeValueproperty来modify元素文本 in 容.

modify元素 in 容example

<!-- JavaScriptcode -->
var xmlDoc = loadXMLDoc("books.xml");

// 获取title元素node
var titleElement = xmlDoc.getElementsByTagName("title")[0];

// modify元素 in 容
if (titleElement.textContent !== undefined) {
    titleElement.textContent = "XMLadvancedtutorial";
} else {
    titleElement.nodeValue = "XMLadvancedtutorial";
}

2. modify元素property

可以usingsetAttribute()method来modify元素 property值, or usingremoveAttribute()method来delete元素 property.

modify元素propertyexample

<!-- JavaScriptcode -->
var xmlDoc = loadXMLDoc("books.xml");

// 获取book元素node
var bookElement = xmlDoc.getElementsByTagName("book")[0];

// modify元素property
bookElement.setAttribute("id", "B002");
bookElement.setAttribute("category", "计算机");

// delete元素property
bookElement.removeAttribute("category");

3. modify元素名称

可以usingtagNameproperty来modify元素名称, 但需要注意 is , tagNameproperty in 不同浏览器 and XML解析器in supportcircumstances可能不同.

<!-- JavaScriptcode -->
var xmlDoc = loadXMLDoc("books.xml");

// 获取book元素node
var bookElement = xmlDoc.getElementsByTagName("book")[0];

// modify元素名称 (注意: 不 is 所 has 浏览器都support) 
bookElement.tagName = "bookItem";

XML DOMcreationnode

usingXML DOM, 可以creation new node (such as元素, property, 文本etc.) 并将它们添加 to XMLdocumentationin. 以 under is 一些常用 creationnode method:

1. creation元素node

可以usingcreateElement()method来creation new 元素node.

creation元素nodeexample

<!-- JavaScriptcode -->
var xmlDoc = loadXMLDoc("books.xml");

// creation new  元素node
var newBookElement = xmlDoc.createElement("book");
var newTitleElement = xmlDoc.createElement("title");
var newAuthorElement = xmlDoc.createElement("author");

2. creation文本node

可以usingcreateTextNode()method来creation new 文本node.

creation文本nodeexample

<!-- JavaScriptcode -->
var xmlDoc = loadXMLDoc("books.xml");

// creation new  文本node
var newTitleText = xmlDoc.createTextNode("XMLadvancedapplication");
var newAuthorText = xmlDoc.createTextNode("李四");

3. creationpropertynode

可以usingcreateAttribute()method来creation new propertynode.

creationpropertynodeexample

<!-- JavaScriptcode -->
var xmlDoc = loadXMLDoc("books.xml");

// creation new  propertynode
var newIdAttribute = xmlDoc.createAttribute("id");
newIdAttribute.value = "B003";

4. 添加node to documentation

可以usingappendChild()method将 new creation node添加 to documentationin.

添加node to documentationexample

<!-- JavaScriptcode -->
var xmlDoc = loadXMLDoc("books.xml");

// 获取根元素node
var rootElement = xmlDoc.documentElement;

// creation new  book元素node
var newBookElement = xmlDoc.createElement("book");

// creationidproperty并添加 to book元素
newBookElement.setAttribute("id", "B003");

// creationtitle元素 and 文本node
var newTitleElement = xmlDoc.createElement("title");
var newTitleText = xmlDoc.createTextNode("XMLadvancedapplication");
newTitleElement.appendChild(newTitleText);

// creationauthor元素 and 文本node
var newAuthorElement = xmlDoc.createElement("author");
var newAuthorText = xmlDoc.createTextNode("李四");
newAuthorElement.appendChild(newAuthorText);

// 将title and author元素添加 to book元素
newBookElement.appendChild(newTitleElement);
newBookElement.appendChild(newAuthorElement);

// 将book元素添加 to 根元素
rootElement.appendChild(newBookElement);

5. in 指定位置插入node

可以usinginsertBefore()method in 指定位置插入node.

in 指定位置插入nodeexample

<!-- JavaScriptcode -->
var xmlDoc = loadXMLDoc("books.xml");

// 获取根元素node
var rootElement = xmlDoc.documentElement;

// 获取第一个book元素node
var firstBookElement = rootElement.getElementsByTagName("book")[0];

// creation new  book元素node
var newBookElement = xmlDoc.createElement("book");
// ... creationothernode并添加 to newBookElement ...

//  in 第一个book元素之 before 插入 new  book元素
rootElement.insertBefore(newBookElement, firstBookElement);

XML DOMdeletenode

usingXML DOM, 可以deleteXMLdocumentationin node. 以 under is 一些常用 deletenode method:

1. delete子node

可以usingremoveChild()methoddelete子node.

delete子nodeexample

<!-- JavaScriptcode -->
var xmlDoc = loadXMLDoc("books.xml");

// 获取根元素node
var rootElement = xmlDoc.documentElement;

// 获取第一个book元素node
var firstBookElement = rootElement.getElementsByTagName("book")[0];

// delete第一个book元素node
rootElement.removeChild(firstBookElement);

2. delete自身node

可以usingparentNode.removeChild()methoddelete自身node.

delete自身nodeexample

<!-- JavaScriptcode -->
var xmlDoc = loadXMLDoc("books.xml");

// 获取第一个book元素node
var firstBookElement = xmlDoc.getElementsByTagName("book")[0];

// delete自身node
firstBookElement.parentNode.removeChild(firstBookElement);

3. 清空node in 容

可以usinginnerHTMLproperty or 循环delete子node method来清空node in 容.

清空node in 容example

<!-- JavaScriptcode -->
var xmlDoc = loadXMLDoc("books.xml");

// 获取根元素node
var rootElement = xmlDoc.documentElement;

// method1: usinginnerHTMLproperty (注意: 不 is 所 has 浏览器都support) 
rootElement.innerHTML = "";

// method2: 循环delete子node
while (rootElement.firstChild) {
    rootElement.removeChild(rootElement.firstChild);
}

XML DOMexample

以 under is a 完整 XML DOMexample, 演示了such as何usingJavaScript加载XMLdocumentation, 访问node, modifynode, creationnode and deletenode.

完整 XML DOMexample

<!-- XMLdocumentation: books.xml -->
<?xml version="1.0" encoding="UTF-8"?>
<books>
    <book id="B001">
        <title>XMLBasicstutorial</title>
        <author>张三</author>
        <year>2025</year>
        <price>99.00</price>
    </book>
</books>

<!-- HTMLdocumentation: dom_example.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>XML DOMexample</title>
    <script>
        // 加载XMLdocumentation function
        function loadXMLDoc(filename) {
            var xhttp;
            if (window.XMLHttpRequest) {
                // IE7+, Firefox, Chrome, Opera, Safari
                xhttp = new XMLHttpRequest();
            } else {
                // IE6, IE5
                xhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xhttp.open("GET", filename, false);
            xhttp.send();
            return xhttp.responseXML;
        }

        // 演示XML DOMoperation
        function demoDOMOperations() {
            // 加载XMLdocumentation
            var xmlDoc = loadXMLDoc("books.xml");
            
            // 1. 访问node
            var rootElement = xmlDoc.documentElement;
            var bookElements = xmlDoc.getElementsByTagName("book");
            var firstBook = bookElements[0];
            var titleElement = firstBook.getElementsByTagName("title")[0];
            
            console.log("原始标题: " + titleElement.textContent);
            
            // 2. modifynode
            titleElement.textContent = "XMLadvancedtutorial";
            firstBook.setAttribute("id", "B002");
            
            console.log("modify after  标题: " + titleElement.textContent);
            console.log("modify after  ID: " + firstBook.getAttribute("id"));
            
            // 3. creationnode
            var newBook = xmlDoc.createElement("book");
            newBook.setAttribute("id", "B003");
            
            var newTitle = xmlDoc.createElement("title");
            var newTitleText = xmlDoc.createTextNode("XMLapplicationcase");
            newTitle.appendChild(newTitleText);
            
            var newAuthor = xmlDoc.createElement("author");
            var newAuthorText = xmlDoc.createTextNode("王五");
            newAuthor.appendChild(newAuthorText);
            
            newBook.appendChild(newTitle);
            newBook.appendChild(newAuthor);
            
            // 4. 添加node
            rootElement.appendChild(newBook);
            
            console.log("添加 new node after , book元素数量: " + xmlDoc.getElementsByTagName("book").length);
            
            // 5. deletenode
            rootElement.removeChild(firstBook);
            
            console.log("deletenode after , book元素数量: " + xmlDoc.getElementsByTagName("book").length);
            
            // 显示modify after  XMLdocumentation
            var serializer = new XMLSerializer();
            var xmlString = serializer.serializeToString(xmlDoc);
            document.getElementById("xmlOutput").textContent = xmlString;
        }
    </script>
</head>
<body>
    <h1>XML DOMoperationexample</h1>
    <button onclick="demoDOMOperations()">执行DOMoperation</button>
    <pre id="xmlOutput" style="margin-top: 20px; padding: 10px; background-color: #f0f0f0;"></pre>
</body>
</html>

实践case: usingXML DOMimplementationgraph书managementsystem

casedescribes

creation一个 simple graph书managementsystem, usingXML DOM来store and managementgraph书information. system应该able toimplementation以 under functions:

显示所 has graph书information
添加 new graph书
modifygraph书information
deletegraph书
搜索graph书

implementation步骤

creationXMLdocumentation来storegraph书information
creationHTML页面来显示 and managementgraph书information
usingJavaScript and XML DOM来implementationgraph书managementfunctions
testsystem 各项functions

最终code

books.xml

<?xml version="1.0" encoding="UTF-8"?>
<books>
    <book id="B001">
        <title>XMLBasicstutorial</title>
        <author>张三</author>
        <year>2025</year>
        <price>99.00</price>
    </book>
    <book id="B002">
        <title>XMLadvancedapplication</title>
        <author>李四</author>
        <year>2025</year>
        <price>129.00</price>
    </book>
</books>

book_manager.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>graph书managementsystem</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        
        h1 {
            color: #4285F4;
        }
        
        table {
            border-collapse: collapse;
            width: 100%;
            margin-top: 20px;
        }
        
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        
        th {
            background-color: #f2f2f2;
        }
        
        .form-group {
            margin: 10px 0;
        }
        
        .form-group label {
            display: inline-block;
            width: 100px;
        }
        
        .form-group input {
            padding: 5px;
            width: 200px;
        }
        
        .btn {
            padding: 8px 16px;
            background-color: #4285F4;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
        }
        
        .btn:hover {
            background-color: #3367D6;
        }
        
        .btn-danger {
            background-color: #DB4437;
        }
        
        .btn-danger:hover {
            background-color: #C53929;
        }
        
        .message {
            margin-top: 20px;
            padding: 10px;
            background-color: #e8f5e8;
            color: #34A853;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <h1>graph书managementsystem</h1>
    
    <!-- graph书information表单 -->
    <h2>添加/modifygraph书</h2>
    <form id="bookForm">
        <div class="form-group">
            <label for="bookId">ID: </label>
            <input type="text" id="bookId" name="bookId" placeholder="自动生成" readonly>
        </div>
        <div class="form-group">
            <label for="bookTitle">书名: </label>
            <input type="text" id="bookTitle" name="bookTitle" required>
        </div>
        <div class="form-group">
            <label for="bookAuthor">作者: </label>
            <input type="text" id="bookAuthor" name="bookAuthor" required>
        </div>
        <div class="form-group">
            <label for="bookYear">年份: </label>
            <input type="number" id="bookYear" name="bookYear" min="1900" max="2100" required>
        </div>
        <div class="form-group">
            <label for="bookPrice">价格: </label>
            <input type="number" id="bookPrice" name="bookPrice" step="0.01" min="0" required>
        </div>
        <button type="submit" class="btn">保存graph书</button>
        <button type="button" class="btn" onclick="clearForm()">清空表单</button>
    </form>
    
    <!-- graph书list -->
    <h2>graph书list</h2>
    <div id="bookList"></div>
    
    <!-- message显示 -->
    <div id="message" class="message" style="display: none;"></div>
    
    <script>
        // 全局variable
        var xmlDoc;
        var currentBookId = 0;
        
        // 初始化
        window.onload = function() {
            loadXMLDoc();
            displayBooks();
            generateBookId();
        };
        
        // 加载XMLdocumentation
        function loadXMLDoc() {
            var xhttp = new XMLHttpRequest();
            xhttp.open("GET", "books.xml", false);
            xhttp.send();
            xmlDoc = xhttp.responseXML;
        }
        
        // 生成graph书ID
        function generateBookId() {
            var bookElements = xmlDoc.getElementsByTagName("book");
            currentBookId = bookElements.length + 1;
            document.getElementById("bookId").value = "B" + String(currentBookId).padStart(3, "0");
        }
        
        // 显示所 has graph书
        function displayBooks() {
            var bookElements = xmlDoc.getElementsByTagName("book");
            var bookList = document.getElementById("bookList");
            
            if (bookElements.length === 0) {
                bookList.innerHTML = "<p>暂无graph书information</p>";
                return;
            }
            
            var html = "<table>";
            html += "<tr><th>ID</th><th>书名</th><th>作者</th><th>年份</th><th>价格</th><th>operation</th></tr>";
            
            for (var i = 0; i < bookElements.length; i++) {
                var book = bookElements[i];
                var id = book.getAttribute("id");
                var title = book.getElementsByTagName("title")[0].textContent;
                var author = book.getElementsByTagName("author")[0].textContent;
                var year = book.getElementsByTagName("year")[0].textContent;
                var price = book.getElementsByTagName("price")[0].textContent;
                
                html += "<tr>";
                html += "<td>" + id + "</td>";
                html += "<td>" + title + "</td>";
                html += "<td>" + author + "</td>";
                html += "<td>" + year + "</td>";
                html += "<td>" + price + "</td>";
                html += "<td>";
                html += "<button class='btn' onclick='editBook(" + id + ")'>modify</button>";
                html += "<button class='btn btn-danger' onclick='deleteBook(" + id + ")'>delete</button>";
                html += "</td>";
                html += "</tr>";
            }
            
            html += "</table>";
            bookList.innerHTML = html;
        }
        
        // 添加 or modifygraph书
        document.getElementById("bookForm").onsubmit = function(e) {
            e.preventDefault();
            
            var id = document.getElementById("bookId").value;
            var title = document.getElementById("bookTitle").value;
            var author = document.getElementById("bookAuthor").value;
            var year = document.getElementById("bookYear").value;
            var price = document.getElementById("bookPrice").value;
            
            // find is 否已存 in 该ID graph书
            var existingBook = xmlDoc.getElementById(id);
            
            if (existingBook) {
                // modifygraph书
                existingBook.getElementsByTagName("title")[0].textContent = title;
                existingBook.getElementsByTagName("author")[0].textContent = author;
                existingBook.getElementsByTagName("year")[0].textContent = year;
                existingBook.getElementsByTagName("price")[0].textContent = price;
                showMessage("graph书information已update");
            } else {
                // 添加 new graph书
                var newBook = xmlDoc.createElement("book");
                newBook.setAttribute("id", id);
                
                var newTitle = xmlDoc.createElement("title");
                newTitle.textContent = title;
                
                var newAuthor = xmlDoc.createElement("author");
                newAuthor.textContent = author;
                
                var newYear = xmlDoc.createElement("year");
                newYear.textContent = year;
                
                var newPrice = xmlDoc.createElement("price");
                newPrice.textContent = price;
                
                newBook.appendChild(newTitle);
                newBook.appendChild(newAuthor);
                newBook.appendChild(newYear);
                newBook.appendChild(newPrice);
                
                xmlDoc.documentElement.appendChild(newBook);
                showMessage("graph书已添加");
                generateBookId();
            }
            
            displayBooks();
            clearForm();
        };
        
        // 编辑graph书
        function editBook(id) {
            var book = xmlDoc.getElementById(id);
            if (book) {
                document.getElementById("bookId").value = id;
                document.getElementById("bookTitle").value = book.getElementsByTagName("title")[0].textContent;
                document.getElementById("bookAuthor").value = book.getElementsByTagName("author")[0].textContent;
                document.getElementById("bookYear").value = book.getElementsByTagName("year")[0].textContent;
                document.getElementById("bookPrice").value = book.getElementsByTagName("price")[0].textContent;
            }
        }
        
        // deletegraph书
        function deleteBook(id) {
            var book = xmlDoc.getElementById(id);
            if (book) {
                if (confirm("确定要delete这本graph书吗？")) {
                    book.parentNode.removeChild(book);
                    showMessage("graph书已delete");
                    displayBooks();
                    clearForm();
                }
            }
        }
        
        // 清空表单
        function clearForm() {
            document.getElementById("bookForm").reset();
            generateBookId();
        }
        
        // 显示message
        function showMessage(message) {
            var messageDiv = document.getElementById("message");
            messageDiv.textContent = message;
            messageDiv.style.display = "block";
            
            // 3秒 after 隐藏message
            setTimeout(function() {
                messageDiv.style.display = "none";
            }, 3000);
        }
    </script>
</body>
</html>

互动练习

练习1: writingXML DOMcode

针 for 以 under XMLdocumentation, writingJavaScriptcodeimplementation以 under functions:

加载XMLdocumentation
获取所 has book元素node
modify第一个book元素 idproperty for "B002"
modify第一个book元素 title元素 in 容 for "XMLadvancedtutorial"
添加一个 new book元素 to documentationin
delete最 after 一个book元素

<?xml version="1.0" encoding="UTF-8"?>
<books>
    <book id="B001">
        <title>XMLBasicstutorial</title>
        <author>张三</author>
        <year>2025</year>
        <price>99.00</price>
    </book>
    <book id="B002">
        <title>XMLapplicationcase</title>
        <author>李四</author>
        <year>2025</year>
        <price>129.00</price>
    </book>
</books>

JavaScriptcodesuch as under :

// 1. 加载XMLdocumentation
function loadXMLDoc(filename) {
    var xhttp;
    if (window.XMLHttpRequest) {
        xhttp = new XMLHttpRequest();
    } else {
        xhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xhttp.open("GET", filename, false);
    xhttp.send();
    return xhttp.responseXML;
}

// 加载XMLdocumentation
var xmlDoc = loadXMLDoc("books.xml");

// 2. 获取所 has book元素node
var bookElements = xmlDoc.getElementsByTagName("book");
console.log("graph书数量: " + bookElements.length);

// 3. modify第一个book元素 idproperty for "B002"
var firstBook = bookElements[0];
firstBook.setAttribute("id", "B002");
console.log("modify after  第一个graph书ID: " + firstBook.getAttribute("id"));

// 4. modify第一个book元素 title元素 in 容 for "XMLadvancedtutorial"
var titleElement = firstBook.getElementsByTagName("title")[0];
titleElement.textContent = "XMLadvancedtutorial";
console.log("modify after  第一个graph书标题: " + titleElement.textContent);

// 5. 添加一个 new  book元素 to documentationin
var newBook = xmlDoc.createElement("book");
newBook.setAttribute("id", "B003");

var newTitle = xmlDoc.createElement("title");
newTitle.textContent = "XMLtechniquesmanual";
newBook.appendChild(newTitle);

var newAuthor = xmlDoc.createElement("author");
newAuthor.textContent = "王五";
newBook.appendChild(newAuthor);

var newYear = xmlDoc.createElement("year");
newYear.textContent = "2026";
newBook.appendChild(newYear);

var newPrice = xmlDoc.createElement("price");
newPrice.textContent = "159.00";
newBook.appendChild(newPrice);

xmlDoc.documentElement.appendChild(newBook);
console.log("添加 new graph书 after , graph书数量: " + xmlDoc.getElementsByTagName("book").length);

// 6. delete最 after 一个book元素
var bookElements = xmlDoc.getElementsByTagName("book");
var lastBook = bookElements[bookElements.length - 1];
lastBook.parentNode.removeChild(lastBook);
console.log("delete最 after 一个graph书 after , graph书数量: " + xmlDoc.getElementsByTagName("book").length);

练习2: analysisXML DOMcode

analysis以 under XML DOMcode 执行结果:

<?xml version="1.0" encoding="UTF-8"?>
<books>
    <book id="B001">
        <title>XMLBasicstutorial</title>
        <author>张三</author>
    </book>
</books>

<script>
var xmlDoc = loadXMLDoc("books.xml");

// 获取根元素
var root = xmlDoc.documentElement;

// creation new 元素
var newBook = xmlDoc.createElement("book");
newBook.setAttribute("id", "B002");

var newTitle = xmlDoc.createElement("title");
newTitle.textContent = "XMLadvancedapplication";
newBook.appendChild(newTitle);

var newAuthor = xmlDoc.createElement("author");
newAuthor.textContent = "李四";
newBook.appendChild(newAuthor);

//  in 第一个book元素之 before 插入 new 元素
var firstBook = root.getElementsByTagName("book")[0];
root.insertBefore(newBook, firstBook);

// 获取所 has book元素
var books = root.getElementsByTagName("book");
console.log(books.length);
console.log(books[0].getAttribute("id"));
console.log(books[1].getAttribute("id"));
</script>

code执行结果such as under :

books.length: 2 (因 for 插入了一个 new book元素)
books[0].getAttribute("id"): "B002" ( new 插入 book元素位于第一个位置)
books[1].getAttribute("id"): "B001" (原来 book元素被移 to 了第二个位置)