XML DOM建立節點
在本章中，我們將討論如何使用文件物件的幾種方法來建立新節點。 這些方法提供了建立新元素節點，文字節點，注釋節點，CDATA節節點和屬性節點的範圍。 如果新建立的節點已存在於元素物件中，則將其替換為新節點。 下面將通過範例演示這些操作。
1. 建立新的Element節點
createElement()方法建立一個新的元素節點。 如果元素物件中存在新建立的元素節點，則將其替換為新元素節點。
語法
使用createElement()方法的語法如下 -
var_name = xmldoc.createElement("tagname");
其中，
var_name- 是使用者定義的變數名，它包含新元素的名稱。tagname- 是要建立的新元素節點的名稱。
範例
以下範例(create_newelement.html)將XML文件(node.xml)解析為XML DOM物件，並在XML文件中建立新的元素節點 - PhoneNo。
檔案：create_newelement.html -
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(filename) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else { // code for IE5 and IE6
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",filename,false);
xhttp.send();
return xhttp.responseXML;
}
</script>
</head>
<body>
<script>
xmlDoc = loadXMLDoc("/node.xml");
new_element = xmlDoc.createElement("PhoneNo");
x = xmlDoc.getElementsByTagName("FirstName")[0];
x.appendChild(new_element);
document.write(x.getElementsByTagName("PhoneNo")[0].nodeName);
</script>
</body>
</html>
在上面程式碼中，
new_element = xmlDoc.createElement("PhoneNo");用於建立新的元素節點：<PhoneNo>x.appendChild(new_element);x儲存附加新元素節點的指定子節點<FirstName>的名稱。
執行
將此檔案儲存為:create_newelement.html，並放置到伺服器路徑上(此檔案和node.xml應位於伺服器中的同一路徑上)。 在輸出結果中應該能到新建的屬性值為：PhoneNo。
2. 建立新的Text節點
createTextNode()方法建立一個新的文字節點。
語法
使用createTextNode()的語法如下 -
var_name = xmldoc.createTextNode("tagname");
在上面範例程式碼中，
var_name- 它是使用者定義的變數名，它包含新文字節點的名稱。tagname- 括號內是要建立的新文字節點的名稱。
範例
以下範例(create_textnode.html)將XML文件(node.xml)解析為XML DOM物件，並在XML文件中建立新文字節點Im。
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(filename) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else{ // code for IE5 and IE6
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",filename,false);
xhttp.send();
return xhttp.responseXML;
}
</script>
</head>
<body>
<script>
xmlDoc = loadXMLDoc("/node.xml");
create_e = xmlDoc.createElement("PhoneNo");
create_t = xmlDoc.createTextNode("Im new text node");
create_e.appendChild(create_t);
x = xmlDoc.getElementsByTagName("Employee")[0];
x.appendChild(create_e);
document.write(" PhoneNO: ");
document.write(x.getElementsByTagName("PhoneNo")[0].childNodes[0].nodeValue);
</script>
</body>
</html>
上述程式碼簡單描述如下 -
create_e = xmlDoc.createElement("PhoneNo");建立一個新的元素：<PhoneNo>。create_t = xmlDoc.createTextNode("Im new text node");建立一個新的文字節點："Im new text node"。x.appendChild(create_e);表示新的文字節點 -"Im new text node"新增到元素 -<PhoneNo>。document.write(x.getElementsByTagName("PhoneNo")[0].childNodes[0].nodeValue);將新文字節點值寫入元素：<PhoneNo>。
執行
將此檔案儲存為：create_textnode.html，並放置到WEB伺服器上(此檔案和node.xml應位於伺服器中的同一路徑上)。 在輸出中得到屬性值，即PhoneNO: Im new text node。
3. 建立新的註釋節點
createComment()方法建立一個新的註釋節點。 注釋節點包含在程式中，以便於理解程式碼功能。
語法
使用createComment()的語法如下 -
var_name = xmldoc.createComment("tagname");
其中，
var_name- 是使用者定義的變數名，它包含新註釋節點的名稱。tagname- 是要建立的新註釋節點的名稱。
範例
以下範例(create_commentnode.html)將XML文件(node.xml)解析為XML DOM物件，並在XML文件中建立新的註釋節點 - "Company is the parent node"。
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(filename) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
}
else{ // code for IE5 and IE6
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",filename,false);
xhttp.send();
return xhttp.responseXML;
}
</script>
</head>
<body>
<script>
xmlDoc = loadXMLDoc("node.xml");
create_comment = xmlDoc.createComment("Company is the parent node");
x = xmlDoc.getElementsByTagName("Company")[0];
x.appendChild(create_comment);
document.write(x.lastChild.nodeValue);
</script>
</body>
</html>
在上面的例子中 -
create_comment = xmlDoc.createComment("Company is the parent node");建立指定的注釋行。x.appendChild(create_comment);在此行中，x包含附加註釋行的元素<Company>的名稱。
執行
將此檔案儲存為：create_commentnode.html ，並放置到伺服器上(此檔案和node.xml應位於伺服器中的同一路徑上)。 在輸出中獲取屬性值 - " Company is the parent node"。
4. 建立新的CDATA節節點
createCDATASection()方法建立一個新的CDATA節節點。 如果新建立的CDATA節節點存在於元素物件中，則它將被新節點替換。
語法
使用createCDATASection()的語法如下 -
var_name = xmldoc.createCDATASection("tagname");
在上面程式碼中，
var_name? 是使用者定義的變數名，它包含新CDATA部分節點的名稱。tagname? 是要建立的新CDATA部分節點的名稱。
範例
以下範例(create_datanode.html)將XML文件(node.xml)解析為XML DOM物件，並在XML文件中建立新的CDATA節節點 - "Create CDATA Example"。
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(filename) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
}
else{ // code for IE5 and IE6 {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",filename,false);
xhttp.send();
return xhttp.responseXML;
}
</script>
</head>
<body>
<script>
xmlDoc = loadXMLDoc("/node.xml");
create_CDATA = xmlDoc.createCDATASection("Create CDATA Example");
x = xmlDoc.getElementsByTagName("Employee")[0];
x.appendChild(create_CDATA);
document.write(x.lastChild.nodeValue);
</script>
</body>
</html>
在上面範例程式碼中，
create_CDATA = xmlDoc.createCDATASection("Create CDATA Example")建立一個新的CDATA部分節點 -"Create CDATA Example"。x.appendChild(create_CDATA)在這裡,x儲存索引0的指定元素<Employee>，其中附加了CDATA節點值。
執行
將此檔案儲存為：create_cdatanode.html，並放置到伺服器上(此檔案和node.xml應位於伺服器中的同一路徑上)。 在輸出中將獲取屬性值為：Create CDATA Example。如下圖所示 -
5. 建立新的屬性節點
要建立新的屬性節點，請使用setAttributeNode()方法。 如果元素物件中存在新建立的屬性節點，則將其替換為新節點。
語法
使用createElement()方法的語法如下 -
var_name = xmldoc.createAttribute("tagname");
其中，
var_name- 是使用者定義的變數名，它包含新屬性節點的名稱。tagname- 是要建立的新屬性節點的名稱。
範例
以下範例(create_attribute_node.html)將XML文件(node.xml)解析為XML DOM物件，並在XML文件中建立新的屬性節點部分。
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(filename) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else{ // code for IE5 and IE6
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",filename,false);
xhttp.send();
return xhttp.responseXML;
}
</script>
</head>
<body>
<script>
xmlDoc = loadXMLDoc("/node.xml");
create_a = xmlDoc.createAttribute("section");
create_a.nodeValue = "A";
x = xmlDoc.getElementsByTagName("Employee");
x[0].setAttributeNode(create_a);
document.write("New Attribute: ");
document.write(x[0].getAttribute("section"));
</script>
</body>
</html>
在上面程式碼中，
create_a=xmlDoc.createAttribute("Category")建立名稱為<section>的屬性。create_a.nodeValue="Management"建立<section>屬性的值為"A"。x[0].setAttributeNode(create_a)這個屬性值設定為<Employee>的第0個索引位置。
執行上面範例程式碼，得到以下結果 -
