DOM 建立節點

XML DOM 建立節點

# 試試看- 實例

下面的實例使用XML 檔案books.xml。
函數 loadXMLDoc()，位於外部 JavaScript 中，用於載入 XML 檔案。

建立元素節點
本例使用 createElement() 來建立一個新的元素節點，並使用 appendChild() 把它加入到一個節點中。

使用 createAttribute 建立屬性節點
本例使用 createAttribute() 來建立一個新的屬性節點，並使用 setAttributeNode() 把它插入一個元素中。

使用 setAttribute 建立屬性節點
本例使用 setAttribute() 為一個元素建立一個新的屬性。

建立文字節點

本例使用 createTextNode() 來建立一個新的文字節點，並使用 appendChild() 把它加入到一個元素中。

建立 CDATA section 節點

本例使用 createCDATAsection() 來建立一個 CDATA section 節點，並使用 appendChild() 把它加入一個元素中。

建立註解節點

本例使用 createComment() 來建立一個註解節點，並使用 appendChild() 把它加入一個元素中。

建立新的元素節點##createElement() 方法建立一個新的元素節點：

實例

<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js"> 
</script>
</head>
<body>

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

newel=xmlDoc.createElement("edition");

x=xmlDoc.getElementsByTagName("book")[0];
x.appendChild(newel);

document.write(x.getElementsByTagName("edition")[0].nodeName);
</script>
</body>
</html>

運行實例»
點擊"運行實例"按鈕查看線上實例
#實例解釋：
使用loadXMLDoc() 把"books.xml" 載入xmlDoc 中

#建立一個新的元素節點<edition>

#向第一個<book> 元素追加這個元素節點

遍歷並向所有<book> 元素添加一個元素：試試

創建新的屬性節點
createAttribute() 用來建立一個新的屬性節點：

實例

###

<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js"> 
</script>
</head>
<body>

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

newatt=xmlDoc.createAttribute("edition");
newatt.nodeValue="first";

x=xmlDoc.getElementsByTagName("title");
x[0].setAttributeNode(newatt);

document.write("Edition: ");
document.write(x[0].getAttribute("edition"));

</script>
</body>
</html>

########執行實例»######點擊"運行實例" 按鈕查看線上實例#######

實例解釋：

使用loadXMLDoc() 把"books.xml" 載入xmlDoc 中
建立一個新的屬性節點"edition"
設定屬性節點的值為"first"
#為第一個<title> 元素新增這個新的屬性節點

遍歷所有的<title> 元素，並且新增一個新的屬性節點：試試看

##注意：如果該屬性已存在，則被新屬性取代。

使用setAttribute() 建立屬性

由於setAttribute() 方法可以在屬性不存在的情況下建立新的屬性，我們可以使用這個方法來建立一個新的屬性。

實例

<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js"> 
</script>
</head>
<body>

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

x=xmlDoc.getElementsByTagName("title");

x[0].setAttribute("edition","first");

document.write("Edition: ");
document.write(x[0].getAttribute("edition"));

</script>
</body>
</html>

運行實例»點擊"運行實例" 按鈕查看線上實例

實例解釋：

使用loadXMLDoc() 把"books.xml" 載入xmlDoc
為第一個< book> 元素設定（創建）值為"first" 的"edition" 屬性

遍歷所有的<title> 元素並新增一個新屬性：試試看

建立文字節點

createTextNode() 方法建立一個新的文字節點：

實例

<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js"> 
</script>
</head>
<body>

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

newel=xmlDoc.createElement("edition");
newtext=xmlDoc.createTextNode("first");
newel.appendChild(newtext);

x=xmlDoc.getElementsByTagName("book")[0];
x.appendChild(newel);

//Output title and edition
document.write(x.getElementsByTagName("title")[0].childNodes[0].nodeValue);
document.write(" - Edition: ");
document.write(x.getElementsByTagName("edition")[0].childNodes[0].nodeValue);
</script>
</body>
</html>

運行實例»點擊"運行實例" 按鈕查看在線實例

實例解釋：

使用loadXMLDoc() 把"books. xml" 載入xmlDoc 中
建立一個新元素節點<edition>
建立一個新的文字節點，其文字為" first"
向這個元素節點追加新的文字節點
#向第一個<book> 元素追加新的元素節點

在所有的<book> 元素中新增一個帶有文字節點的元素節點：試試

建立CDATA Section 節點

# createCDATASection() 方法建立一個新的CDATA section 節點。

實例

<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js"></script>
</head>
<body>

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

newCDATA=xmlDoc.createCDATASection("Special Offer & Book Sale");

x=xmlDoc.getElementsByTagName("book")[0];
x.appendChild(newCDATA);

document.write(x.lastChild.nodeValue);
</script>
</body>
</html>

執行實例 »點擊 "執行實例" 按鈕查看線上實例

實例解釋：

使用loadXMLDoc() 把"books.xml" 載入xmlDoc
建立一個新的CDATA section節點
向第一個<book> 元素追加這個新的CDATA section 節點

##遍歷並向所有<book> 元素新增一個CDATA section：嘗試

建立註解節點

#createComment() 方法建立一個新的註解節點。

實例

<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js"></script>
</head>
<body>

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

newComment=xmlDoc.createComment("Revised April 2008");

x=xmlDoc.getElementsByTagName("book")[0];
x.appendChild(newComment);

document.write(x.lastChild.nodeValue);
</script>
</body>
</html>

運行實例»點擊"運行實例" 按鈕查看線上實例

實例解釋：

使用loadXMLDoc() 把"books.xml" 載入xmlDoc 中
建立一個新的註解節點
把這個新的註解節點追加到第一個<book> 元素

循環並向所有<book> 元素添加一個註解節點：試試看

← DOM 替換節點

DOM 新增節點 →

DOM 建立節點

XML DOM 建立節點

# 試試看- 實例

本例使用 createTextNode() 來建立一個新的文字節點，並使用 appendChild() 把它加入到一個元素中。

建立註解節點

#向第一個<book> 元素追加這個元素節點

PHP中文網