解讀超越DOM(輕松使用 DOM 的技巧和訣竅)的問題_Xml教程

若頻繁按照這種方式創建節點，鍵入所有這些代碼會使您很快疲憊不堪。必須有更好的解決方案 —— 確實有這樣的解決方案！下面這個實用工具可以幫助您創建元素、設置元素屬性和風格，并添加文本子節點。除了 name 參數，其他參數都是可選的。

清單 6. 函數 elem() 快捷方式
function elem(name, attrs, style, text) {
var e = document.createElement(name);
if (attrs) {
for (key in attrs) {
if (key == 'class') {
e.className = attrs[key];
} else if (key == 'id') {
e.id = attrs[key];
} else {
e.setAttribute(key, attrs[key]);
}
}
}
if (style) {
for (key in style) {
e.style[key] = style[key];
}
}
if (text) {
e.appendChild(document.createTextNode(text));
}
return e;
}

使用該快捷方式，您能夠以更加簡潔的方法創建 清單 5 中的 <div> 元素。注意，attrs 和 style 參數是使用 JavaScript 文本對象而給出的。

清單 7. 創建 <div> 的簡便方法
function handle_button() {
var parent = document.getElementById('myContainer');
parent.appendChild(elem('div',
{class: 'myDivCSSClass', id: 'myDivId'}
{position: 'absolute', left: '300px', top: '200px'},
'This is the first text of the rest of this code'));
}

在您想要快速創建大量復雜的 DHTML 對象時，這種實用工具可以節省您大量的時間。模式在這里就是指，如果您有一種需要頻繁創建的特定的 DOM 結構，則使用實用工具來創建它們。這不但減少了您編寫的代碼量，而且也減少了重復的剪切、粘貼代碼（錯誤的罪魁禍首），并且在閱讀代碼時思路更加清晰。

接下來是什么？
DOM 通常很難告訴您，按照文檔的順序，下一個節點是什么。下面有一些實用工具，可以幫助您在節點間前后移動：

清單 8. nextNode 和 prevNode
// return next node in document order
function nextNode(node) {
if (!node) return null;
if (node.firstChild){
return node.firstChild;
} else {
return nextWide(node);
}
}
// helper function for nextNode()
function nextWide(node) {
if (!node) return null;
if (node.nextSibling) {
return node.nextSibling;
} else {
return nextWide(node.parentNode);
}
}
// return previous node in document order
function prevNode(node) {
if (!node) return null;
if (node.previousSibling) {
return previousDeep(node.previousSibling);
}
return node.parentNode;
}
// helper function for prevNode()
function previousDeep(node) {
if (!node) return null;
while (node.childNodes.length) {
node = node.lastChild;
}
return node;
}
 

輕松使用 DOM
有時候，您可能想要遍歷 DOM，在每個節點調用函數或從每個節點返回一個值。實際上，由于這些想法非常具有普遍性，所以 DOM Level 2 已經包含了一個稱為 DOM Traversal and Range 的擴展（為迭代 DOM 所有節點定義了對象和 API），它用來為 DOM 中的所有節點應用函數和在 DOM 中選擇一個范圍。因為這些函數沒有在 Internet Explorer 中定義（至少目前是這樣），所以您可以使用 nextNode() 來做一些
類似的事情。

在這里，我們的想法是創建一些簡單、普通的工具，然后以不同的方式組裝它們來達到預期的效果。如果您很熟悉函數式編程，這看起來會很親切。Beyond JS 庫（參閱 參考資料）將此理念發揚光大。

清單 9. 函數式 DOM 實用工具
// return an Array of all nodes, starting at startNode and
// continuing through the rest of the DOM tree
function listNodes(startNode) {
var list = new Array();
var node = startNode;
while(node) {
list.push(node);
node = nextNode(node);
}
return list;
}
// The same as listNodes(), but works backwards from startNode.
// Note that this is not the same as running listNodes() and
// reversing the list.
function listNodesReversed(startNode) {
var list = new Array();
var node = startNode;
while(node) {
list.push(node);
node = prevNode(node);
}
return list;
}
// apply func to each node in nodeList, return new list of results
function map(list, func) {
var result_list = new Array();
for (var i = 0; i < list.length; i++) {
result_list.push(func(list[i]));
}
return result_list;
}
// apply test to each node, return a new list of nodes for which
// test(node) returns true
function filter(list, test) {
var result_list = new Array();
for (var i = 0; i < list.length; i++) {
if (test(list[i])) result_list.push(list[i]);
}
return result_list;
}
 

清單 9 包含了 4 個基本工具。listNodes() 和 listNodesReversed() 函數可以擴展到一個可選的長度，這與 Array 的 slice() 方法效果類似，我把這個作為留給您的練習。另一個需要注意的是，map() 和 filter() 函數是完全通用的，用于處理任何 列表（不只是節點列表）。現在，我向您展示它們的幾種組合方式。

清單 10. 使用函數式實用工具
// A list of all the element names in document order
function isElement(node) {
return node.nodeType == Node.ELEMENT_NODE;
}
function nodeName(node) {
return node.nodeName;
}
var elementNames = map(filter(listNodes(document),isElement), nodeName);
// All the text from the document (ignores CDATA)
function isText(node) {
return node.nodeType == Node.TEXT_NODE;
}
function nodeValue(node) {
return node.nodeValue;
}
var allText = map(filter(listNodes(document), isText), nodeValue);
 

您可以使用這些實用工具來提取 ID、修改樣式、找到某種節點并移除，等等。一旦 DOM Traversal and Range API 被廣泛實現，您無需首先構建列表，就可以用它們修改 DOM 樹。它們不但功能強大，并且工作方式也與我在上面所強調的方式類似。

DOM 的危險地帶
注意，核心 DOM API 并不能使您將 XML 數據解析到 DOM，或者將 DOM 序列化為 XML。這些功能都定義在 DOM Level 3 的擴展部分“Load and Save”，但它們還沒有被完全實現，因此現在不要考慮這些。每個平臺（瀏覽器或其他專業 DOM 應用程序）有自己在 DOM 和 XML間轉換的方法，但跨平臺轉換不在本文討論范圍之內。

DOM 并不是十分安全的工具 —— 特別是使用 DOM API 創建不能作為 XML 序列化的樹時。絕對不要在同一個程序中混合使用 DOM1 非名稱空間 API 和 DOM2 名稱空間感知的 API（例如，createElement 和 createElementNS）。如果您使用名稱空間，請盡量在根元素位置聲明所有名稱空間，并且不要覆蓋名稱空間前綴，否則情況會非常混亂。一般來說，只要按照慣例，就不會觸發使您陷入麻煩的臨界情況。

如果您一直使用 Internet Explorer 的 innerText 和 innerHTML 進行解析，那么您可以試試使用 elem() 函數。通過構建類似的一些實用工具，您會得到更多便利，并且繼承了跨平臺代碼的優越性。將這兩種方法混合使用是非常糟糕的。

某些 Unicode 字符并沒有包含在 XML 中。DOM 的實現使您可以添加它們，但后果是無法序列化。這些字符包括大多數的控制字符和Unicode 代理對（surrogate pair）中的單個字符。只有您試圖在文檔中包含二進制數據時才會遇到這種情況，但這是另一種轉向（gotcha）情況。

結束語
我已經介紹了 DOM 能做的很多事情，但是 DOM（和 JavaScript）可以做的事情遠不止這些。仔細研究、揣摩這些例子，看看是如何使用它們來解決可能需要客戶端腳本、模板或專用 API 的問題。

DOM 有自己的局限性和缺點，但同時也擁有眾多優點：它內置于很多應用程序中；無論使用 Java 技術、Python 或 JavaScript，它都以相同方式工作；它非常便于使用 SAX；使用上述的模板，它使用起來既簡潔又強大。越來越多的應用程序開始支持 DOM，這包括基于 Mozilla的應用程序、OpenOffice 和 Blast Radius 的 XMetaL。越來越多的規范需要 DOM，并對它加以擴展（例如，SVG），因此 DOM 時時刻刻就在您的身邊。使用這種被廣泛部署的工具，絕對是您的明智之舉。