您好,登錄后才能下訂單哦!
這篇文章主要介紹了XML中DOM操作XML文檔的示例分析,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
在DOM眼中,HTML跟XML一樣是一種樹形結構的文檔。各個節點被視為各種類型的Node對象。每個Node對象都有自己的屬性和方法,利用這些屬性和方法可以遍歷整個文檔樹。DOM定義了nodeType來表示節點的類型
接口 | nodeType常量 | nodeType值 | 備注 |
Element | Node.ELEMENT_NODE | 1 | 元素節點 |
Text | Node.TEXT_NODE | 3 | 文本節點 |
Document | Node.DOCUMENT_NODE | 9 | document |
Comment | Node.COMMENT_NODE | 8 | 注釋的文本 |
DocumentFragment | Node.DOCUMENT_FRAGMENT_NODE | 11 | document片斷 |
Attr | Node.ATTRIBUTE_NODE | 2 | 節點屬性 |
DOM樹的根節點是個Document對象,有時候document即指向整個文檔。
Document定義的方法大多數是生產型方法,主要用于創建可以插入文檔中的各種類型的節點。常用的Document方法有:
方法 | 描述 |
createAttribute() | 用指定的名字創建新的Attr節點。 |
createComment() | 用指定的字符串創建新的Comment節點。 |
createElement() | 用指定的標記名創建新的Element節點。 |
createTextNode() | 用指定的文本創建新的TextNode節點。 |
getElementById() | 返回文檔中具有指定id屬性的Element節點。 |
getElementsByTagName() | 返回文檔中具有指定標記名的所有Element節點。 |
Element常用的方法:
方法 | 描述 |
getAttribute() | 以字符串形式返回指定屬性的值。 |
getAttributeNode() | 以Attr節點的形式返回指定屬性的值。 |
getElementsByTabName() | 返回一個Node數組,包含具有指定標記名的所有Element節點的子孫節點,其順序為在文檔中出現的順序。 |
hasAttribute() | 如果該元素具有指定名字的屬性,則返回true。 |
removeAttribute() | 從元素中刪除指定的屬性。 |
removeAttributeNode() | 從元素的屬性列表中刪除指定的Attr節點。 |
setAttribute() | 把指定的屬性設置為指定的字符串值,如果該屬性不存在則添加一個新屬性。 |
setAttributeNode() | 把指定的Attr節點添加到該元素的屬性列表中。 |
Node對象常用屬性:
屬性 | 描述 |
attributes | 如果該節點是一個Element,則以NamedNodeMap形式返回該元素的屬性。 |
childNodes | 以Node[]的形式存放當前節點的子節點。如果沒有子節點,則返回空數組。 |
firstChild | 以Node的形式返回當前節點的第一個子節點。如果沒有子節點,則為null。 |
lastChild | 以Node的形式返回當前節點的最后一個子節點。如果沒有子節點,則為null。 |
nextSibling | 以Node的形式返回當前節點的兄弟下一個節點。如果沒有這樣的節點,則返回null。 |
nodeName | 節點的名字,Element節點則代表Element的標記名稱。 |
nodeType | 代表節點的類型。 |
parentNode | 以Node的形式返回當前節點的父節點。如果沒有父節點,則為null。 |
previousSibling | 以Node的形式返回緊挨當前節點、位于它之前的兄弟節點。如果沒有這樣的節點,則返回null。 |
Node對象常用方法:
方法 | 描述 |
appendChild() | 通過把一個節點增加到當前節點的childNodes[]組,給文檔樹增加節點。 |
cloneNode() | 復制當前節點,或者復制當前節點以及它的所有子孫節點。 |
hasChildNodes() | 如果當前節點擁有子節點,則將返回true。 |
insertBefore() | 給文檔樹插入一個節點,位置在當前節點的指定子節點之前。如果該節點已經存在,則刪除之再插入到它的位置。 |
removeChild() | 從文檔樹中刪除并返回指定的子節點。 |
replaceChild() | 從文檔樹中刪除并返回指定的子節點,用另一個節點替換它。 |
下面的代碼檢索第一個 <title> 元素的文本值:
x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];txt=x.nodeValue; //其實應該先判斷節點是否存在
結果:txt = "Harry Potter"
下面的代碼檢索第一個 <title> 元素的 "lang" 屬性的文本值:
txt=xmlDoc.getElementsByTagName("title")[0].getAttribute("lang");
結果:txt = "en"
下面的代碼改變第一個 <title> 元素的文本值:
x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];x.nodeValue="Easy Cooking";
setAttribute() 方法可用于改變已有屬性的值,或創建一個新屬性。
下面的代碼向每個 <book> 元素添加了名為 "edition" 的新屬性(值是 "first"):
x=xmlDoc.getElementsByTagName("book");for(i=0;i<x.length;i++) { x[i].setAttribute("edition","first"); }
createElement() 方法創建新的元素節點。
createTextNode() 方法創建新的文本節點。
appendChild() 方法向節點添加子節點(在最后一個子節點之后)。
如需創建帶有文本內容的新元素,需要同時創建元素節點和文本節點。
下面的代碼創建了一個元素 (<edition>),然后把它添加到第一個 <book> 元素中:
newel=xmlDoc.createElement("edition");
newtext=xmlDoc.createTextNode("First");
newel.appendChild(newtext);
x=xmlDoc.getElementsByTagName("book");x[0].appendChild(newel);
創建 <edition> 元素
創建值為 "First" 的文本節點
把這個文本節點追加到 <edition> 元素
把 <edition> 元素追加到第一個 <book> 元素
removeChild() 方法刪除指定的節點(或元素)。
下面的代碼片段將刪除第一個 <book> 元素中的第一個節點:
x=xmlDoc.getElementsByTagName("book")[0];x.removeChild(x.childNodes[0]);
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function parseXML() {
try //Internet Explorer
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
}
catch (e) {
try //Firefox, Mozilla, Opera, etc.
{
xmlDoc = document.implementation.createDocument("", "", null);
}
catch (e) {
alert(e.message);
return;
}
}
xmlDoc.async = false; //假如xml載入完畢執行以下
xmlDoc.load("note.xml");
var x = xmlDoc.getElementsByTagName("to");
// xmlDoc.getElementsByTagName("to")[0].setAttribute("date") = "1515"; //設置屬性值
// xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue = "tiewang"; //設置文本節點值
// //循環修改
// for (i = 0; i < x.length; i++) {
// if (x[i].childNodes[0] == null) { //如果不存在問題,則添加
// newText1 = xmlDoc.createTextNode("af");
// x[i].appendChild(newText1);
// }
// x[i].childNodes[0].nodeValue = "af";
// }
// //循環添加 //注意,如果把create放在for循環外面,則只能添加到最后一個,需要放在for里面
for (i = 0; i < x.length; i++) {
if (x[i].getElementsByTagName("too")[0] == null) {
newElemenet = xmlDoc.createElement("too");
newText = xmlDoc.createTextNode("logo");
newElemenet.setAttribute("id", "1");
newElemenet.appendChild(newText);
x[i].appendChild(newElemenet);
}
}
// //循環刪除
// for (i = 0; i < x.length; i++) {
// if (x[i].getElementsByTagName("too")[0] != null) {
// x[i].removeChild(x[i].getElementsByTagName("too")[0]);
// }
// }
//刪除to -> too 節點中的ID屬性
for (i = 0; i < x.length; i++) {
if (x[i].getElementsByTagName("too")[0] != null) {
if (x[i].getElementsByTagName("too")[0].getAttribute("id")!=null) {
x[i].getElementsByTagName("too")[0].removeAttribute("id");
}
}
}
var xmlHttp;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
}
catch (e) {
// Internet Explorer
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
alert("您的瀏覽器不支持AJAX!");
return false;
}
}
}
xmlHttp.onreadystatechange = function() { //onreadystatechange 屬性存有處理服務器響應的函數
if (xmlHttp.readyState == 4) { //readyState 屬性存有服務器響應的狀態信息
document.getElementById("to").innerHTML = xmlHttp.responseText; //通過 responseText 屬性來取回由服務器返回的數據
}
}
xmlHttp.open("POST", "receive.aspx?type=xmlsave", true);
// open() 方法需要三個參數。第一個參數定義發送請求所使用的方法(GET 還是 POST)。第二個參數規定服務器端腳本的 URL。第三個參數規定應當對請求進行異步地處理。
xmlHttp.send(xmlDoc); //send() 方法可將請求送往服務器
}
</script>
</head>
<body onload="parseXML()">
<form id="form1" runat="server">
<p>
<h2 id = "to"></h2>
<h2 id ="value"></h2>
</p>
</form>
</body>
</html>
感謝你能夠認真閱讀完這篇文章,希望小編分享的“XML中DOM操作XML文檔的示例分析”這篇文章對大家有幫助,同時也希望大家多多支持億速云,關注億速云行業資訊頻道,更多相關知識等著你來學習!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。