XML は重要です: DOM を超えて (DOM を簡単に使用するためのヒントとコツ)
ドキュメント オブジェクト モデル (DOM) は、XML および HTML データを操作するために最も一般的に使用されるツールの 1 つですが、その可能性が完全に活用されることはほとんどありません。 DOM を利用して使いやすくすることで、動的 Web アプリケーションを含む XML アプリケーション用の強力なツールが得られます。
この号には、友人で同僚のコラムニスト、デテ・エルザがゲストとして登場します。 Dethe は XML を使用した Web アプリケーションの開発に豊富な経験があり、DOM と ECMAScript を使用した XML プログラミングを私に紹介してくれたことに感謝します。 Dethe の詳細については、このコラムをご覧ください。
——David Mertz
DOM は、XML と HTML を処理するための標準 API の 1 つです。多くの場合、メモリを大量に消費し、処理が遅く、冗長であると批判されます。それでも、これは多くのアプリケーションにとって最良の選択であり、XML の他の主要な API である SAX よりもはるかに単純であることは確かです。 DOM は、Web ブラウザ、SVG ブラウザ、OpenOffice などのツールに徐々に登場しています。
DOM は標準であり、広く実装され、他の標準に組み込まれているため、優れています。標準として、そのデータの処理はプログラミング言語に依存しません (これが強みになる場合もそうでない場合もありますが、少なくともデータの処理方法に一貫性が生まれます)。 DOM は現在、Web ブラウザーに組み込まれているだけでなく、多くの XML ベースの仕様の一部でもあります。今ではそれがあなたの武器の一部となり、おそらく今でも時々使用しているので、それが私たちに与えてくれるものを最大限に活用する時期が来たと思います。
しばらく DOM を操作すると、何度も繰り返したくなるパターンが開発されることがわかります。ショートカットは、長い DOM を操作し、一目瞭然で洗練されたコードを作成するのに役立ちます。ここでは、私が頻繁に使用するヒントとテクニックのコレクションと、いくつかの JavaScript の例を示します。
insertAfter と PRependChild
最初のトリックは、「トリックはありません」です。 DOM には、子ノードをコンテナ ノード (通常は要素ですが、ドキュメントまたはドキュメント フラグメント) に追加するための 2 つのメソッドがあります。appendChild(node) と insertBefore(node,referenceNode) です。何かが足りないようです。参照ノードの後に子ノードを挿入または先頭に追加したい場合はどうすればよいですか (新しいノードをリストの最初にします)。長年にわたり、私の解決策は次の関数を書くことでした:
リスト 1. 前から挿入および追加する間違った方法
function insertAfter(parent, node, referenceNode) {
if(referenceNode.nextSibling) {
parent.insertBefore(node, referenceNode.nextSibling);
} else {
parent.appendChild(node);
}
}
function prependChild(parent, node) {
if (parent.firstChild) {
parent.insertBefore(node, parent.firstChild);
} else {
parent.appendChild(node);
}
}
実際には、リスト 1 と同様に、insertBefore() 関数は次のように定義されています。 () 参照ノードが空の場合。したがって、上記のメソッドを使用する代わりに、リスト 2 のメソッドを使用することも、それらをスキップして組み込み関数だけを使用することもできます。
リスト 2. 前の
function insertAfter(parent, node, referenceNode) {
parent.insertBefore(node, referenceNode.nextSibling);
}
function prependChild(parent, node) {
parent.insertBefore(node, parent.firstChild);
}
による挿入と追加の正しい方法DOM プログラミングに取り組む場合は、ノードを指す複数のポインターを持つことができますが、そのノードは DOM ツリー内の 1 つの場所にしか存在できないことに注意することが重要です。したがって、ツリーに挿入する場合は、自動的に削除されるため、最初にツリーから削除する必要はありません。このメカニズムは、ノードを新しい位置に挿入するだけでノードの順序を変更する場合に便利です。
このメカニズムによれば、2 つの隣接するノード (node1 と node2 と呼ばれる) の位置を交換したい場合は、次のいずれかの解決策を使用できます。
node1 .parentNode.insertBefore(node1.nextSibling, node1);
DOM で他に何ができるでしょうか?
if (!window['Node']) {
window.Node = new Object();
Node.ELEMENT_NODE = 1;
Node.ATTRIBUTE_NODE = 2;
Node.TEXT_NODE = 3;
Node.CDATA_SECTION_NODE = 4;
Node.ENTITY_REFERENCE_NODE = 5;
Node.ENTITY_NODE = 6;
Node.PROCESSING_INSTRUCTION_NODE = 7;
Node.COMMENT_NODE = 8;
Node.DOCUMENT_NODE = 9;
Node.DOCUMENT_TYPE_NODE = 10;
Node.DOCUMENT_FRAGMENT_NODE = 11;
Node.NOTATION_NODE = 12;
}
リスト 4 は、ノードに含まれるすべてのテキスト ノードを抽出する方法を示しています。不満 DOM は冗長すぎて、単純な機能には多くのコードが必要です。たとえば、テキストを含み、ボタンのクリックに応答する
リスト 5.
若频繁按照这种方式创建节点，键入所有这些代码会使您很快疲惫不堪。必须有更好的解决方案 —— 确实有这样的解决方案！下面这个实用工具可以帮助您创建元素、设置元素属性和风格，并添加文本子节点。除了 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 中的
清单 7. 创建
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 を使用するのは非常に簡単です。 、シンプルかつ強力な使い方ができます。 Mozilla ベースのアプリケーション、OpenOffice、Blast Radius の XMetaL など、DOM をサポートし始めているアプリケーションが増えています。 DOM (SVG など) を必要とする仕様や拡張仕様が増えているため、DOM は常に身近にあります。この広く導入されているツールを使用するのは賢明な選択です。
上記は、XML Question: Beyond DOM (DOM を簡単に使用するためのヒントとコツ) の内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7844
15
1649
14
1403
52
1300
25
1241
29
PowerPoint を使用して XML ファイルを開くことはできますか?
Feb 19, 2024 pm 09:06 PM
XML ファイルは PPT で開くことができますか? XML、Extensible Markup Language (Extensible Markup Language) は、データ交換とデータ ストレージで広く使用されている汎用マークアップ言語です。 HTML と比較して、XML はより柔軟であり、独自のタグとデータ構造を定義できるため、データの保存と交換がより便利で統一されます。 PPT (PowerPoint) は、プレゼンテーションを作成するために Microsoft によって開発されたソフトウェアです。包括的な方法を提供します。
Python を使用した XML データのマージと重複排除
Aug 07, 2023 am 11:33 AM
Python を使用した XML データのマージと重複排除 XML (eXtensibleMarkupLanguage) は、データの保存と送信に使用されるマークアップ言語です。 XML データを処理するとき、複数の XML ファイルを 1 つにマージしたり、重複データを削除したりする必要がある場合があります。この記事では、Python を使用して XML データのマージと重複排除を実装する方法と、対応するコード例を紹介します。 1. XML データのマージ 複数の XML ファイルがある場合、それらをマージする必要があります。
Python で XML データを CSV 形式に変換する
Aug 11, 2023 pm 07:41 PM
Python の XML データを CSV 形式に変換する XML (ExtensibleMarkupLanguage) は、データの保存と送信に一般的に使用される拡張可能なマークアップ言語です。 CSV (CommaSeparatedValues) は、データのインポートとエクスポートに一般的に使用されるカンマ区切りのテキスト ファイル形式です。データを処理するとき、分析や処理を容易にするために、XML データを CSV 形式に変換する必要がある場合があります。 Pythonは強力です
Python を使用した XML データのフィルタリングと並べ替え
Aug 07, 2023 pm 04:17 PM
Python を使用した XML データのフィルタリングと並べ替えの実装 はじめに: XML は、データをタグと属性の形式で保存する、一般的に使用されるデータ交換形式です。 XML データを処理するとき、多くの場合、データのフィルタリングと並べ替えが必要になります。 Python には、XML データを処理するための便利なツールとライブラリが多数用意されています。この記事では、Python を使用して XML データをフィルタリングおよび並べ替える方法を紹介します。 XML ファイルの読み取り 始める前に、XML ファイルを読み取る必要があります。 Python には XML 処理ライブラリが多数ありますが、
Python は XML と JSON 間の変換を実装します
Aug 07, 2023 pm 07:10 PM
Python は XML と JSON 間の変換を実装します はじめに: 日常の開発プロセスでは、異なる形式間でデータを変換する必要があることがよくあります。 XML と JSON は一般的なデータ交換形式であり、Python ではさまざまなライブラリを使用して XML と JSON の間で変換できます。この記事では、一般的に使用されるいくつかの方法をコード例とともに紹介します。 1. Python で XML を JSON に変換するには、xml.etree.ElementTree モジュールを使用できます。
Python を使用した XML でのエラーと例外の処理
Aug 08, 2023 pm 12:25 PM
Python を使用した XML でのエラーと例外の処理 XML は、構造化データの保存と表現に使用される一般的に使用されるデータ形式です。 Python を使用して XML を処理すると、エラーや例外が発生することがあります。この記事では、Python を使用して XML のエラーと例外を処理する方法を紹介し、参考用のサンプル コードをいくつか示します。 Try-Except ステートメントを使用して XML 解析エラーを捕捉する Python を使用して XML を解析すると、時々、次のようなエラーが発生することがあります。
Python は XML 内の特殊文字とエスケープ シーケンスを解析します
Aug 08, 2023 pm 12:46 PM
Python は XML 内の特殊文字とエスケープ シーケンスを解析します XML (eXtensibleMarkupLanguage) は、異なるシステム間でデータを転送および保存するために一般的に使用されるデータ交換形式です。 XML ファイルを処理する場合、特殊文字やエスケープ シーケンスが含まれる状況に遭遇することが多く、これにより解析エラーやデータの誤解が生じる可能性があります。したがって、Python を使用して XML ファイルを解析する場合は、これらの特殊文字とエスケープ シーケンスの処理方法を理解する必要があります。 1. 特殊文字と
C# 開発で XML および JSON データ形式を処理する方法
Oct 09, 2023 pm 06:15 PM
C# 開発で XML および JSON データ形式を処理する方法には、特定のコード サンプルが必要です。現代のソフトウェア開発では、XML と JSON の 2 つのデータ形式が広く使用されています。 XML (Extensible Markup Language) はデータの保存と送信に使用されるマークアップ言語であり、JSON (JavaScript Object Notation) は軽量のデータ交換形式です。 C# 開発では、XML と JSON データの処理と操作が必要になることがよくありますが、この記事では、C# を使用してこれら 2 つのデータ形式を処理し、添付する方法に焦点を当てます。
