前言
文件對象模型（Document Object Model，簡稱DOM），是W3C組織推薦的處理可擴展標志語言的標准編程接口。html，xml都是基於這個模型構造的。這也是一個W3C推出的標准。java，python，javascript等語言都提供了一套基於dom的編程接口。
java使用dom解析xml
一段xml文檔, note.xml：
<?xml version="1.0" encoding="UTF-8"?>
<note>
<to id="1">George</to>
<from>John</from>
<heading>Reminder</heading>
<body>Don't forget the meeting!</body>
</note>
我們先使用w3c dom解析該xml：
@Test
public void test() {
NodeList nodeList = doc.getChildNodes().item(0).getChildNodes();
System.out.println("xml size: " + nodeList.getLength());
for(int i = 0; i < nodeList.getLength(); i ++) {
Node node = nodeList.item(i);
System.out.println(node.getNodeType());
System.out.println(node.getNodeName());
}
}
輸出：
xml size: 9
3
#text
1
to
3
#text
1
from
3
#text
1
heading
3
#text
1
body
3
#text
我們看到代碼輸出note節點的字節點的時候，有9個節點，但是xml文檔中note節點實際上只有to、from、heading、body4個節點。 那為什么是9個呢，原因是這樣的。
選取幾個w3c規范中關於節點類型的描述：
| 節點類型 | 描述 | nodeName返回值 | nodeValue返回值 | 子元素 | 類型常量值 |
|---|---|---|---|---|---|
| Document | 表示整個文檔（DOM 樹的根節點） | #document | null | Element(max. one)，Comment，DocumentType | 9 |
| Element | 表示 element（元素）元素 | element name | null | Text，Comment，CDATASection | 1 |
| Attr | 表示屬性 | 屬性名稱 | 屬性值 | Text | 2 |
| Text | 表示元素或屬性中的文本內容。 | #text | 節點內容 | None | 3 |
| CDATASection | 表示文檔中的 CDATA 區段（文本不會被解析器解析） | #cdata-section | 節點內容 | None | 4 |
| Comment | 表示注釋 | #comment | 注釋文本 | None | 8 |
更多細節請查看w3c DOM節點類型
下面解釋一下文檔節點的字節點的處理過程：
其中紅色部分為Text節點，紫色部分是Element節點(只畫了部分)。</body>后面的也是一個Element節點，所有4個Element節點，5個Text節點。
所以輸出的內容中3 #text表示該節點是個Text節點，1 節點name是個Element節點，這與表格中表述的是一樣的。
測試代碼：
@Test
public void test1() {
NodeList nodeList = doc.getChildNodes().item(0).getChildNodes();
System.out.println("xml size: " + nodeList.getLength());
for(int i = 0; i < nodeList.getLength(); i ++) {
Node node = nodeList.item(i);
if(node.getNodeType() == Node.TEXT_NODE) {
System.out.println(node.getNodeValue().replace("\n","hr").replace(' ', '-'));
}
}
}
很明顯，我們把空格和回車鍵替換打印后發現我們的結論是正確的。
測試代碼：
@Test
public void test2() {
System.out.println("doc type: " + doc.getNodeType());
NodeList nodeList = doc.getChildNodes().item(0).getChildNodes();
Node secondNode = nodeList.item(1);
System.out.println("element [to] node type: " + secondNode.getNodeType());
System.out.println("element [to] node name: " + secondNode.getNodeName());
System.out.println("element [to] node value: " + secondNode.getNodeValue());
System.out.println("element [to] children len: " + secondNode.getChildNodes().getLength());
System.out.println("element [to] children node type: " + secondNode.getChildNodes().item(0).getNodeType());
System.out.println("element [to] children node value: " + secondNode.getChildNodes().item(0).getNodeValue());
System.out.println("element [to] children node name: " + secondNode.getChildNodes().item(0).getNodeName());
Node attNode = secondNode.getAttributes().item(0);
System.out.println("attr type: " + attNode.getNodeType());
}
輸出結果跟表格中是一樣的。
大家有興趣的話其他類型的節點比如CDATA節點大家可以自行測試～
javascript使用dom解析html
html代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div>
<p>gogogo</p>
</div>
</body>
</html>
js代碼：
console.log(document.nodeType);
var div = document.getElementsByTagName("div")[0]; //9
console.log(div.nodeType); //1
for(var i = 0;i < div.childNodes.length; i ++) {
console.log(div.childNodes[i].nodeType);
}
分別輸出9，1，3，1，3
跟我們在表格中對應～
總結
本次博客主要講解了dom解析xml和html。 以前使用java解析xml的時候總是使用一些第三方庫，比如jdom。 但是dom卻是w3c的規范，不止java，包括javascript，python這些主流語言也都主持，有了規范，語言只是實現了這些規范而已。