DOM 節點資訊
XML DOM 節點資訊
nodeName、nodeValue 和 nodeType 屬性包含節點的資訊。
嚐嚐試試看- 實例
下面的實例使用XML 檔案books.xml。
函數 loadXMLDoc()，位於外部 JavaScript 中，用於載入 XML 檔案。
取得元素節點的節點名稱
本例使用 nodeName 屬性來取得 "books.xml" 中根元素的節點名稱。
從文字節點取得文字
本範例使用 nodeValue 屬性來取得 "books.xml" 中第一個 <title> 元素的文字。
更改文字節點中的文字
本例使用 nodeValue 屬性來變更 "books.xml" 中第一個 <title> 元素的文字。
取得元素節點的節點名稱和類型
本例使用 nodeName 和 nodeType 屬性來取得 "books.xml" 中根元素的節點名稱和類型。
節點的屬性
在 XML DOM 中，每個節點都是一個物件。
物件擁有方法和屬性，並可透過 JavaScript 存取和操作。
三個重要的節點屬性是：
nodeName
nodeValue
nodeType
nodeName 屬性
nodeName 屬性規定節點的名稱。
nodeName 是唯讀的
元素節點的nodeName 與標籤名稱相同
屬性節點的nodeName 是屬性的名稱
文字節點的nodeName 永遠是#text
文件節點的nodeName 永遠是#document
nodeValue 屬性
nodeValue 屬性規定節點的值。
元素節點的nodeValue 是undefined
#文字節點的nodeValue 是文字本身
屬性節點的nodeValue 是屬性的值
#實例
<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js"></script>
</head>
<body>
<script>
xmlDoc=loadXMLDoc("books.xml");
document.write(xmlDoc.documentElement.nodeName);
</script>
</body>
</html>運行實例»
點擊"運行實例" 按鈕查看線上實例
取得元素的值
下面的程式碼檢索第一個<title> 元素的文本節點的值：
實例
<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js"></script>
</head>
<body>
<script>
xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];
txt=x.nodeValue;
document.write(txt);
</script>
</body>
</html>#運行實例»
點擊"運行實例"按鈕查看線上實例
結果：txt = "Everyday Italian"
實例解釋：
#使用loadXMLDoc() 把"books.xml" 載入xmlDoc 中
取得第一個<title> 元素節點的文字節點
#把txt 變數設為文字節點的值
| 下面的程式碼更改第一個<title> 元素的文字節點的值： | |
<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js"></script>
</head>
<body>
<script>
xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];
x.nodeValue="Easy Cooking";
x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];
txt=x.nodeValue;
document.write(txt);
</script>
</body>
</html> | 運行實例» |
| 實例解釋： | |
| 使用loadXMLDoc() 把"books.xml" 載入xmlDoc 中 | |
<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js"></script>
</head>
<body>
<script>
xmlDoc=loadXMLDoc("books.xml");
document.write(xmlDoc.documentElement.nodeName);
document.write("<br>");
document.write(xmlDoc.documentElement.nodeType);
</script>
</body>
</html>#########運行實例»#######點擊"運行實例" 按鈕查看線上實例########## ##
