Dom-quick-guide
XML DOM-概要
- D ocument O bject M * odel（DOM）はW3C標準です。 HTMLやXMLなどのドキュメントにアクセスするための標準を定義します。
W3Cによって記述されたDOMの定義は-
'_ドキュメントオブジェクトモデル（DOM）は、HTMLおよびXMLドキュメント用のアプリケーションプログラミングインターフェイス（API）です。 ドキュメントの論理構造と、ドキュメントへのアクセス方法と操作方法を定義します。_
DOMは、すべてのXML要素にアクセスするためのオブジェクトとプロパティおよびメソッド（インターフェース）を定義します。 それは3つの異なる部分/レベルに分かれています-
- Core DOM -構造化文書の標準モデル
- XML DOM -XMLドキュメントの標準モデル
- HTML DOM -HTMLドキュメントの標準モデル
XML DOMは、XMLの標準オブジェクトモデルです。 XMLドキュメントには、_nodes_と呼ばれる情報単位の階層があります。 DOMは、これらのノードとそれらの間の関係を記述する標準プログラミングインターフェイスです。
XML DOMは、開発者がアプリケーションを作成するためにツリー上の任意のポイントでノードを追加、編集、移動、または削除できるようにするAPIも提供します。
以下は、DOM構造の図です。 この図は、パーサーが各ノードを走査することでXMLドキュメントをDOM構造として評価することを示しています。
XML DOMの利点
XML DOMの利点は次のとおりです。
- XML DOMは言語とプラットフォームに依存しません。
- XML DOMは*トラバース可能*-XML DOMの情報は階層構造になっているため、開発者は特定の情報を探して階層内を移動できます。
- {ブランク}
- XML DOMは*変更可能*-本質的に動的であるため、開発者はツリー上の任意のポイントでノードを追加、編集、移動、または削除できます。
XML DOMの欠点
- 一度書き込まれたプログラムは、明示的に削除されない限り、常にメモリに残るため、より多くのメモリを消費します（XML構造が大きい場合）。
- メモリの使用量が多いため、SAXと比較して動作速度が遅くなります。
XML DOM-モデル
DOMの意味がわかったので、DOM構造とは何かを見てみましょう。 DOMドキュメントは、階層で編成された_nodes_または情報の断片のコレクションです。 いくつかのタイプの_nodes_にはさまざまなタイプの_child_ノードがあり、他のタイプはドキュメント構造内でその下に何も持たないリーフノードです。 以下は、子として持つことができるノードタイプのリストを持つノードタイプのリストです-
- Document -要素（最大1つ）、ProcessingInstruction、Comment、DocumentType（最大1つ）
- DocumentFragment -要素、ProcessingInstruction、コメント、テキスト、CDATASection、EntityReference
- EntityReference -要素、ProcessingInstruction、コメント、テキスト、CDATASection、EntityReference
- 要素-要素、テキスト、コメント、処理命令、CDATASection、EntityReference
- Attr -テキスト、EntityReference
- ProcessingInstruction -子なし
- コメント-子供なし
- テキスト-子なし
- CDATASection -子なし
- エンティティ-要素、ProcessingInstruction、コメント、テキスト、CDATASection、EntityReference
- 表記-子なし
例
次のXMLドキュメント node.xml のDOM表現を検討してください。
<?xml version = "1.0"?>
<Company>
<Employee category = "technical">
<FirstName>Tanmay</FirstName>
<LastName>Patil</LastName>
<ContactNo>1234567890</ContactNo>
</Employee>
<Employee category = "non-technical">
<FirstName>Taniya</FirstName>
<LastName>Mishra</LastName>
<ContactNo>1234667898</ContactNo>
</Employee>
</Company>上記のXML文書の文書オブジェクトモデルは次のようになります-
上記のフローチャートから、推測することができます-
- _Node_オブジェクトは、_parent node_オブジェクトを1つだけ持つことができます。 これは、すべてのノードの上の位置を占めます。 ここは_Company_です。
- _parent node_は、_child_ノードと呼ばれる複数のノードを持つことができます。 これらの_child_ノードには、_attribute_ノードと呼ばれる追加のノードを含めることができます。 上記の例では、2つの属性ノード_Technical_と_Non-technical_があります。 _attribute_ノードは実際には要素ノードの子ではありませんが、まだ関連付けられています。
- これらの_child_ノードは、複数の子ノードを持つことができます。 ノード内のテキストは、_text_ノードと呼ばれます。
- 同じレベルのノードオブジェクトは、兄弟と呼ばれます。
- DOMは識別します-
- インターフェースを表し、ドキュメントを操作するオブジェクト。
- オブジェクトとインターフェース間の関係。
XML DOM-ノード
この章では、XML DOM _Nodes_について学習します。 すべてのXML DOMには_Nodes_と呼ばれる階層単位の情報が含まれており、DOMはこれらのノードとノード間の関係を記述します。
ノードタイプ
次のフローチャートは、すべてのノードタイプを示しています-
XMLのノードの最も一般的なタイプは次のとおりです-
- ドキュメントノード-完全なXMLドキュメント構造は_ドキュメントノード_です。
- 要素ノード-すべてのXML要素は_要素ノード_です。 これは、属性を持つことができる唯一のタイプのノードでもあります。
- 属性ノード-各属性は_属性ノード_と見なされます。 要素ノードに関する情報が含まれていますが、実際には要素の子とは見なされません。
- テキストノード-ドキュメントテキストは_text node_と見なされます。 より多くの情報または空白だけで構成できます。
ノードのいくつかのあまり一般的なタイプはありません-
- CData Node -このノードには、パーサーによって分析されるべきではない情報が含まれています。 代わりに、プレーンテキストとして渡す必要があります。
- コメントノード-このノードにはデータに関する情報が含まれ、通常はアプリケーションによって無視されます。
- Processing Instructions Node -このノードには、アプリケーションを特に対象とした情報が含まれています。
- ドキュメントフラグメントノード
- エンティティノード
- エンティティ参照ノード
- 注釈ノード
XML DOM-ノードツリー
この章では、XML DOM _ノードツリーについて説明します。_XMLドキュメントでは、情報は階層構造で維持されます。この階層構造は_Node Tree_と呼ばれます。 この階層により、開発者はツリー内を移動して特定の情報を探し、ノードがアクセスできるようになります。 その後、これらのノードのコンテンツを更新できます。
ノードツリーの構造はルート要素から始まり、下位レベルまで子要素に広がります。
例
次の例は、そのノードツリーが構造である単純なXMLドキュメントを示しています。下の図に示されています-
<?xml version = "1.0"?>
<Company>
<Employee category = "Technical">
<FirstName>Tanmay</FirstName>
<LastName>Patil</LastName>
<ContactNo>1234567890</ContactNo>
</Employee>
<Employee category = "Non-Technical">
<FirstName>Taniya</FirstName>
<LastName>Mishra</LastName>
<ContactNo>1234667898</ContactNo>
</Employee>
</Company>（そのDOMの）絵の表現が以下に示されているように上記の例で見ることができるように-
- ツリーの最上位ノードは root と呼ばれます。 root ノードは<Company>であり、これには<Employee>の2つのノードが含まれます。 これらのノードは、子ノードと呼ばれます。
- ルートノード<Company>の子ノード<Employee>は、独自の子ノード（<FirstName>、<LastName>、<ContactNo>）で構成されています。
- 2つの子ノード<Employee>には属性値TechnicalおよびNon-Technicalがあり、_attribute nodes_と呼ばれます。
- すべてのノード内のテキストは、_text node_と呼ばれます。
XML DOM-メソッド
APIとしてのDOMには、要素やテキストなど、XMLドキュメントで見つけることができるさまざまな種類の情報を表すインターフェイスが含まれています。 これらのインターフェイスには、これらのオブジェクトを操作するために必要なメソッドとプロパティが含まれます。 プロパティはノードの特性を定義しますが、メソッドはノードを操作する方法を提供します。
次の表は、DOMクラスとインターフェイスの一覧です-
| S.No. | Interface & Description |
|---|---|
| 1 |
DOMImplementation ドキュメントオブジェクトモデルの特定のインスタンスに依存しない操作を実行するための多くのメソッドを提供します。 |
| 2 |
DocumentFragment これは「軽量」または「最小」のドキュメントオブジェクトであり、（Documentのスーパークラスとして）XML/HTMLツリーを本格的なドキュメントに固定します。 |
| 3 |
Document XMLドキュメントの最上位ノードを表し、ルート要素を含むドキュメント内のすべてのノードへのアクセスを提供します。 |
| 4 |
Node XMLノードを表します。 |
| 5 |
NodeList _Node_オブジェクトの読み取り専用リストを表します。 |
| 6 |
NamedNodeMap 名前でアクセスできるノードのコレクションを表します。 |
| 7 |
Data DOMの文字データにアクセスするための属性とメソッドのセットで_Node_を拡張します。 |
| 8 |
Attribute Elementオブジェクトの属性を表します。 |
| 9 |
Element 要素ノードを表します。 Nodeから派生。 |
| 10 |
Text テキストノードを表します。 CharacterDataから派生。 |
| 11 |
Comment コメントノードを表します。 CharacterDataから派生。 |
| 12 |
ProcessingInstruction 「処理命令」を表します。 ドキュメントのテキストにプロセッサ固有の情報を保持する方法として、XMLで使用されます。 |
| 13 |
CDATA Section CDATAセクションを表します。 テキストから派生。 |
| 14 |
Entity エンティティを表します。 Nodeから派生。 |
| 15 |
EntityReference これは、ツリー内のエンティティ参照を表します。 Nodeから派生。 |
'_上記の各インターフェイスのメソッドとプロパティについては、それぞれの章で説明します。_
XML DOM-読み込み
この章では、XML _Loading_および_Parsing_について学習します。
APIによって提供されるインターフェイスを記述するために、W3Cはインターフェイス定義言語（IDL）と呼ばれる抽象言語を使用します。 IDLを使用する利点は、開発者がお気に入りの言語でDOMを使用する方法を学習し、別の言語に簡単に切り替えることができることです。
欠点は、抽象的であるため、IDLをWeb開発者が直接使用できないことです。 プログラミング言語には違いがあるため、抽象インターフェースとその具体的な言語との間のマッピング（またはバインディング）が必要です。 DOMは、Javascript、JScript、Java、C、C ++、PLSQL、Python、Perlなどのプログラミング言語にマッピングされています。
'_以下のセクションと章では、XMLファイルをロードするためのプログラミング言語としてJavascriptを使用します。_
パーサ
_parser_は、ドキュメント（この場合はXMLドキュメント）を分析し、その情報に対して特定の処理を行うように設計されたソフトウェアアプリケーションです。 DOMベースのパーサーのいくつかは、次の表に記載されています-
| S.No | Parser & Description |
|---|---|
| 1 |
JAXP Sun MicrosystemのXML解析用Java API（JAXP） |
| 2 |
XML4J IBMのXML Parser for Java（XML4J） |
| 3 |
msxml MicrosoftのXMLパーサー（msxml）バージョン2.0はInternet Explorer 5.5に組み込まれています |
| 4 |
4DOM 4DOMはPythonプログラミング言語のパーサーです |
| 5 |
XML::DOM
|
| 6 |
Xerces ApacheのXerces Javaパーサー |
DOMのようなツリーベースのAPIでは、パーサーはXMLファイルを走査し、対応するDOMオブジェクトを作成します。 その後、DOM構造を行き来できます。
XMLの読み込みと解析
XMLドキュメントの読み込み中、XMLコンテンツは2つの形式で提供されます-
- XMLファイルとして直接
- XML文字列として
XMLファイルとしてのコンテンツ
次の例は、XMLコンテンツがXMLファイルとして受信されたときに、AjaxとJavascriptを使用してXML（link：/dom/node.xml [node.xml]）データをロードする方法を示しています。 ここで、Ajax関数はxmlファイルのコンテンツを取得し、XML DOMに保存します。 DOMオブジェクトが作成されると、解析されます。
<!DOCTYPE html>
<html>
<body>
<div>
<b>FirstName:</b> <span id = "FirstName"></span><br>
<b>LastName:</b> <span id = "LastName"></span><br>
<b>ContactNo:</b> <span id = "ContactNo"></span><br>
<b>Email:</b> <span id = "Email"></span>
</div>
<script>
//if browser supports XMLHttpRequest
if (window.XMLHttpRequest) {//Create an instance of XMLHttpRequest object.
code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest();
} else {//code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//sets and sends the request for calling "node.xml"
xmlhttp.open("GET","/dom/node.xml",false);
xmlhttp.send();
//sets and returns the content as XML DOM
xmlDoc = xmlhttp.responseXML;
//parsing the DOM object
document.getElementById("FirstName").innerHTML =
xmlDoc.getElementsByTagName("FirstName")[0].childNodes[0].nodeValue;
document.getElementById("LastName").innerHTML =
xmlDoc.getElementsByTagName("LastName")[0].childNodes[0].nodeValue;
document.getElementById("ContactNo").innerHTML =
xmlDoc.getElementsByTagName("ContactNo")[0].childNodes[0].nodeValue;
document.getElementById("Email").innerHTML =
xmlDoc.getElementsByTagName("Email")[0].childNodes[0].nodeValue;
</script>
</body>
</html>node.xml
<Company>
<Employee category = "Technical" id = "firstelement">
<FirstName>Tanmay</FirstName>
<LastName>Patil</LastName>
<ContactNo>1234567890</ContactNo>
<Email>[email protected]</Email>
</Employee>
<Employee category = "Non-Technical">
<FirstName>Taniya</FirstName>
<LastName>Mishra</LastName>
<ContactNo>1234667898</ContactNo>
<Email>[email protected]</Email>
</Employee>
<Employee category = "Management">
<FirstName>Tanisha</FirstName>
<LastName>Sharma</LastName>
<ContactNo>1234562350</ContactNo>
<Email>[email protected]</Email>
</Employee>
</Company>コードの詳細のほとんどは、スクリプトコードにあります。
- Internet Explorerは_ActiveXObject（ "Microsoft.XMLHTTP"）_を使用してXMLHttpRequestオブジェクトのインスタンスを作成し、他のブラウザーは_XMLHttpRequest（）_メソッドを使用します。
- _responseXML_は、XMLコンテンツをXML DOMで直接変換します。
- XMLコンテンツがJavaScript XML DOMに変換されると、JS DOMのメソッドとプロパティを使用して任意のXML要素にアクセスできます。 childNodes _、 nodeValue_などのDOMプロパティと、getElementsById（ID）、getElementsByTagName（tags_name）などのDOMメソッドを使用しました。
実行
このファイルをloadingexamplelとして保存し、ブラウザで開きます。 次の出力が表示されます-
XML文字列としてのコンテンツ
次の例は、XMLコンテンツがXMLファイルとして受信されたときにAjaxとJavascriptを使用してXMLデータをロードする方法を示しています。 ここで、Ajax関数は、xmlファイルのコンテンツを取得し、XML DOMに保存します。 DOMオブジェクトが作成されると、解析されます。
<!DOCTYPE html>
<html>
<head>
<script>
//loads the xml string in a dom object
function loadXMLString(t) {//for non IE browsers
if (window.DOMParser) {
//create an instance for xml dom object parser = new DOMParser();
xmlDoc = parser.parseFromString(t,"text/xml");
}
//code for IE
else {//create an instance for xml dom object
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.loadXML(t);
}
return xmlDoc;
}
</script>
</head>
<body>
<script>
//a variable with the string
var text = "<Employee>";
text = text+"<FirstName>Tanmay</FirstName>";
text = text+"<LastName>Patil</LastName>";
text = text+"<ContactNo>1234567890</ContactNo>";
text = text+"<Email>[email protected]</Email>";
text = text+"</Employee>";
//calls the loadXMLString() with "text" function and store the xml dom in a variable
var xmlDoc = loadXMLString(text);
//parsing the DOM object
y = xmlDoc.documentElement.childNodes;
for (i = 0;i<y.length;i++) {
document.write(y[i].childNodes[0].nodeValue);
document.write("<br>");
}
</script>
</body>
</html>コードの詳細のほとんどは、スクリプトコードにあります。
- Internet Explorerは_ActiveXObject（ "Microsoft.XMLDOM"）_を使用してXMLデータをDOMオブジェクトにロードし、他のブラウザーは_DOMParser（）_関数と_parseFromString（text、 'text/xml'）_メソッドを使用します。
- 変数_text_には、XMLコンテンツを含む文字列が含まれます。
- XMLコンテンツがJavaScript XML DOMに変換されると、JS DOMのメソッドとプロパティを使用して任意のXML要素にアクセスできます。 childNodes _、 nodeValue_などのDOMプロパティを使用しました。
実行
このファイルをloadingexamplelとして保存し、ブラウザで開きます。 次の出力が表示されます-
XMLコンテンツがJavaScript XML DOMに変換される方法を確認したので、XML DOMメソッドを使用して任意のXML要素にアクセスできるようになりました。
XML DOM-トラバース
この章では、XML DOM Traversingについて説明します。 リンク：/dom/xml_dom_loading [前の章]で、XMLドキュメントをロードし、このようにして取得したDOMオブジェクトを解析する方法を学びました。 この解析されたDOMオブジェクトはトラバースできます。 トラバースとは、ノードツリー内のすべての要素を段階的に処理することにより、体系的にループを実行するプロセスです。
例
次の例（traverse_example）は、DOMトラバースを示しています。 ここでは、<Employee>要素の各子ノードを走査します。
<!DOCTYPE html>
<html>
<style>
table,th,td {
border:1px solid black;
border-collapse:collapse
}
</style>
<body>
<div id = "ajax_xml"></div>
<script>
//if browser supports XMLHttpRequest
if (window.XMLHttpRequest) {//Create an instance of XMLHttpRequest object.
code for IE7+, Firefox, Chrome, Opera, Safari
var xmlhttp = new XMLHttpRequest();
} else {//code for IE6, IE5
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//sets and sends the request for calling "node.xml"
xmlhttp.open("GET","/dom/node.xml",false);
xmlhttp.send();
//sets and returns the content as XML DOM
var xml_dom = xmlhttp.responseXML;
//this variable stores the code of the html table
var html_tab = '<table id = "id_tabel" align = "center">
<tr>
<th>Employee Category</th>
<th>FirstName</th>
<th>LastName</th>
<th>ContactNo</th>
<th>Email</th>
</tr>';
var arr_employees = xml_dom.getElementsByTagName("Employee");
//traverses the "arr_employees" array
for(var i = 0; i<arr_employees.length; i++) {
var employee_cat = arr_employees[i].getAttribute('category');
//gets the value of 'category' element of current "Element" tag
//gets the value of first child-node of 'FirstName'
//element of current "Employee" tag
var employee_firstName =
arr_employees[i].getElementsByTagName('FirstName')[0].childNodes[0].nodeValue;
//gets the value of first child-node of 'LastName'
//element of current "Employee" tag
var employee_lastName =
arr_employees[i].getElementsByTagName('LastName')[0].childNodes[0].nodeValue;
//gets the value of first child-node of 'ContactNo'
//element of current "Employee" tag
var employee_contactno =
arr_employees[i].getElementsByTagName('ContactNo')[0].childNodes[0].nodeValue;
//gets the value of first child-node of 'Email'
//element of current "Employee" tag
var employee_email =
arr_employees[i].getElementsByTagName('Email')[0].childNodes[0].nodeValue;
//adds the values in the html table
html_tab += '<tr>
<td>'+ employee_cat+ '</td>
<td>'+ employee_firstName+ '</td>
<td>'+ employee_lastName+ '</td>
<td>'+ employee_contactno+ '</td>
<td>'+ employee_email+ '</td>
</tr>';
}
html_tab += '</table>';
//adds the html table in a html tag, with id = "ajax_xml"
document.getElementById('ajax_xml').innerHTML = html_tab;
</script>
</body>
</html>- このコードはlink：/dom/node.xml [node.xml]をロードします。
- XMLコンテンツはJavaScript XML DOMオブジェクトに変換されます。
- メソッドgetElementsByTagName（）を使用して、要素の配列（タグElementを含む）が取得されます。
- 次に、この配列を走査し、子ノードの値を表に表示します。
実行
このファイルを_traverse_examplel_としてサーバーパスに保存します（このファイルとnode.xmlはサーバーの同じパスにある必要があります）。 次の出力が表示されます-
XML DOM-ナビゲーション
これまで、DOM構造、XML DOMオブジェクトの読み込みと解析、およびDOMオブジェクトの走査方法について学習しました。 ここでは、DOMオブジェクトのノード間をナビゲートする方法を説明します。 XML DOMは、ノードのさまざまなプロパティで構成されており、次のようなノードをナビゲートするのに役立ちます-
- parentNode
- childNodes
- 第一子
- 最後の子
- nextSibling
- 前の兄弟
以下は、他のノードとの関係を示すノードツリーの図です。
DOM-親ノード
このプロパティは、親ノードをノードオブジェクトとして指定します。
例
次の例（navigate_example）は、XMLドキュメント（link：/dom/node.xml [node.xml]）を解析してXML DOMオブジェクトに変換します。 次に、DOMオブジェクトは、子ノードを介して親ノードにナビゲートされます-
<!DOCTYPE html>
<html>
<body>
<script>
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","/dom/node.xml",false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
var y = xmlDoc.getElementsByTagName("Employee")[0];
document.write(y.parentNode.nodeName);
</script>
</body>
</html>上記の例でわかるように、子ノード_Employee_は親ノードにナビゲートします。
実行
このファイルを_navigate_examplel_としてサーバーパスに保存します（このファイルとlink：/dom/node.xml [node.xml]はサーバーの同じパスにある必要があります）。 出力では、_Employee_の親ノード、つまり_Company_を取得します。
第一子
このプロパティは_Node_型で、NodeListに存在する最初の子名を表します。
例
次の例（first_node_example）は、XMLドキュメント（link：/dom/node.xml [node.xml]）をXML DOMオブジェクトに解析してから、DOMオブジェクトに存在する最初の子ノードに移動します。
<!DOCTYPE html>
<html>
<body>
<script>
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","/dom/node.xml",false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
function get_firstChild(p) {
a = p.firstChild;
while (a.nodeType != 1) {
a = a.nextSibling;
}
return a;
}
var firstchild = get_firstChild(xmlDoc.getElementsByTagName("Employee")[0]);
document.write(firstchild.nodeName);
</script>
</body>
</html>- 関数_get_firstChild（p）_は、空のノードを回避するために使用されます。 ノードリストからfirstChild要素を取得するのに役立ちます。
- * x = get_firstChild（xmlDoc.getElementsByTagName（ "Employee"）[0]）*は、タグ名_Employee_の最初の子ノードを取得します。
実行
このファイルを_first_node_example_としてサーバーパスに保存します（このファイルとlink：/dom/node.xml [node.xml]はサーバーの同じパスにある必要があります）。 出力では、Employee_の最初の子ノード、つまり _ファーストネーム。
最後の子
このプロパティは_Node_型で、NodeListに存在する最後の子名を表します。
例
次の例（last_node_example）は、XMLドキュメント（link：/dom/node.xml [node.xml]）をXML DOMオブジェクトに解析し、xml DOMオブジェクトに存在する最後の子ノードに移動します。
<!DOCTYPE html>
<body>
<script>
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","/dom/node.xml",false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
function get_lastChild(p) {
a = p.lastChild;
while (a.nodeType != 1){
a = a.previousSibling;
}
return a;
}
var lastchild = get_lastChild(xmlDoc.getElementsByTagName("Employee")[0]);
document.write(lastchild.nodeName);
</script>
</body>
</html>実行
このファイルを_last_node_example_としてサーバーパスに保存します（このファイルとnode.xmlはサーバーの同じパスにある必要があります）。 出力では、_Employeeの最後の子ノード、つまり_Email_を取得します。
次の兄弟
このプロパティは_Node_型で、次の子、つまりNodeListに存在する指定された子要素の次の兄弟を表します。
例
次の例（nextSibling_example）は、XMLドキュメント（link：/dom/node.xml [node.xml]）をXML DOMオブジェクトに解析し、XMLドキュメントに存在する次のノードにすぐに移動します。
<!DOCTYPE html>
<body>
<script>
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","/dom/node.xml",false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
function get_nextSibling(p) {
a = p.nextSibling;
while (a.nodeType != 1) {
a = a.nextSibling;
}
return a;
}
var nextsibling = get_nextSibling(xmlDoc.getElementsByTagName("FirstName")[0]);
document.write(nextsibling.nodeName);
</script>
</body>
</html>実行
このファイルを_nextSibling_example_としてサーバーパスに保存します（このファイルとnode.xmlはサーバーの同じパスにある必要があります）。 出力では、_FirstName、_の次の兄弟ノード、つまり_LastName_を取得します。
前の兄弟
このプロパティは_Node_型で、前の子、つまりNodeListに存在する指定された子要素の前の兄弟を表します。
例
次の例（previoussibling_example）は、XMLドキュメント（link：/dom/node.xml [node.xml]）をXML DOMオブジェクトに解析し、xmlドキュメントに存在する最後の子ノードのbeforeノードに移動します。
<!DOCTYPE html>
<body>
<script>
if (window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","/dom/node.xml",false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
function get_previousSibling(p) {
a = p.previousSibling;
while (a.nodeType != 1) {
a = a.previousSibling;
}
return a;
}
prevsibling = get_previousSibling(xmlDoc.getElementsByTagName("Email")[0]);
document.write(prevsibling.nodeName);
</script>
</body>
</html>実行
このファイルを_previoussibling_example_としてサーバーパスに保存します（このファイルとlink：/dom/node.xml [node.xml]はサーバーの同じパスにある必要があります）。 出力では、_Emailの前の兄弟ノード、つまり_ContactNo_を取得します。
XML DOM-アクセス
この章では、XMLドキュメントの情報単位と見なされるXML DOMノードにアクセスする方法について学習します。 XML DOMのノード構造により、開発者は特定の情報を探してツリーをナビゲートし、同時に情報にアクセスできます。
ノードへのアクセス
以下は、ノードにアクセスできる3つの方法です-
- * getElementsByTagName（）*メソッドを使用して
- ノードツリーをループまたはトラバースすることにより
- ノード関係を使用してノードツリーをナビゲートする
getElementsByTagName（）
このメソッドでは、ノード名を指定することにより、ノードの情報にアクセスできます。 また、ノードリストとノードリストの長さの情報にアクセスできます。
構文
getElementByTagName（）メソッドには次の構文があります-
node.getElementByTagName("tagname");どこで、
- node-はドキュメントノードです。
- tagname-値を取得するノードの名前を保持します。
例
以下は、getElementByTagNameメソッドの使用法を示す簡単なプログラムです。
<!DOCTYPE html>
<html>
<body>
<div>
<b>FirstName:</b> <span id = "FirstName"></span><br>
<b>LastName:</b> <span id = "LastName"></span><br>
<b>Category:</b> <span id = "Employee"></span><br>
</div>
<script>
if (window.XMLHttpRequest) {//code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {//code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","/dom/node.xml",false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
document.getElementById("FirstName").innerHTML =
xmlDoc.getElementsByTagName("FirstName")[0].childNodes[0].nodeValue;
document.getElementById("LastName").innerHTML =
xmlDoc.getElementsByTagName("LastName")[0].childNodes[0].nodeValue;
document.getElementById("Employee").innerHTML =
xmlDoc.getElementsByTagName("Employee")[0].attributes[0].nodeValue;
</script>
</body>
</html>- 上記の例では、ノード_FirstName_の情報にアクセスしています。 LastName_および_Employee。
- _xmlDoc.getElementsByTagName（ "FirstName"）[0] .childNodes [0] .nodeValue; _この行は、getElementByTagName（）メソッドを使用して、子ノード_FirstName_の値にアクセスします。
- xmlDoc.getElementsByTagName（ "Employee"）[0] .attributes [0] .nodeValue; _この行は、ノード_Employee getElementByTagName（）メソッドの属性値にアクセスします。
ノードを通過する
これについては、章のリンク：/dom/xml_dom_traversing [DOM Traversing]で例とともに説明されています。
ノードをナビゲートする
これについては、章のリンク：/dom/xml_dom_navigation [DOM Navigation]で例とともに説明しています。
XML DOM-ノードの取得
この章では、XML DOMオブジェクトの_node_値を取得する方法について学習します。 XMLドキュメントには、ノードと呼ばれる情報単位の階層があります。 Nodeオブジェクトには、要素の値を返すプロパティ_nodeValue_があります。
次のセクションでは、議論します-
- 要素のノード値を取得する
- ノードの属性値を取得する
次のすべての例で使用される_node.xml_は以下の通りです-
<Company>
<Employee category = "Technical">
<FirstName>Tanmay</FirstName>
<LastName>Patil</LastName>
<ContactNo>1234567890</ContactNo>
<Email>[email protected]</Email>
</Employee>
<Employee category = "Non-Technical">
<FirstName>Taniya</FirstName>
<LastName>Mishra</LastName>
<ContactNo>1234667898</ContactNo>
<Email>[email protected]</Email>
</Employee>
<Employee category = "Management">
<FirstName>Tanisha</FirstName>
<LastName>Sharma</LastName>
<ContactNo>1234562350</ContactNo>
<Email>[email protected]</Email>
</Employee>
</Company>ノード値を取得
メソッド_getElementsByTagName（）_は、指定されたタグ名を持つドキュメント順にすべての_Elements_の_NodeList_を返します。
例
次の例（getnode_example）は、XMLドキュメント（link：/dom/node.xml [node.xml]）をXML DOMオブジェクトに解析し、子ノード_Firstname_（0のインデックス）のノード値を抽出します-
<!DOCTYPE html>
<html>
<body>
<script>
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","/dom/node.xml",false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
x = xmlDoc.getElementsByTagName('FirstName')[0]
y = x.childNodes[0];
document.write(y.nodeValue);
</script>
</body>
</html>実行
このファイルを_getnode_example_としてサーバーパスに保存します（このファイルとnode.xmlはサーバーの同じパスにある必要があります）。 出力では、_Tanmay_としてノード値を取得します。
属性値を取得
属性は、XMLノード要素の一部です。 ノード要素は、複数の一意の属性を持つことができます。 属性は、XMLノード要素に関する詳細情報を提供します。 より正確には、ノード要素のプロパティを定義します。 XML属性は常に名前と値のペアです。 この属性の値は、_attribute node_と呼ばれます。
_getAttribute（）_メソッドは、要素名で属性値を取得します。
例
次の例（get_attribute_example）は、XMLドキュメント（link：/dom/node.xml [node.xml]）をXML DOMオブジェクトに解析し、カテゴリ_Employee_（index at 2）の属性値を抽出します-
<!DOCTYPE html>
<html>
<body>
<script>
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","/dom/node.xml",false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
x = xmlDoc.getElementsByTagName('Employee')[2];
document.write(x.getAttribute('category'));
</script>
</body>
</html>実行
このファイルを_get_attribute_example_としてサーバーパスに保存します（このファイルとnode.xmlはサーバーの同じパスにある必要があります）。 出力では、属性値を_Management_として取得します。
XML DOM-セットノード
この章では、XML DOMオブジェクトのノードの値を変更する方法について学習します。 ノード値は次のように変更できます-
var value = node.nodeValue;_node_が_Attribute_の場合、_value_変数は属性の値になります。 _node_が_Text_ノードの場合、テキストコンテンツになります。 _node_が_Element_の場合、_null_になります。
以下のセクションでは、各ノードタイプ（属性、テキストノード、および要素）のノード値設定を示します。
次のすべての例で使用される_node.xml_は以下の通りです-
<Company>
<Employee category = "Technical">
<FirstName>Tanmay</FirstName>
<LastName>Patil</LastName>
<ContactNo>1234567890</ContactNo>
<Email>[email protected]</Email>
</Employee>
<Employee category = "Non-Technical">
<FirstName>Taniya</FirstName>
<LastName>Mishra</LastName>
<ContactNo>1234667898</ContactNo>
<Email>[email protected]</Email>
</Employee>
<Employee category = "Management">
<FirstName>Tanisha</FirstName>
<LastName>Sharma</LastName>
<ContactNo>1234562350</ContactNo>
<Email>[email protected]</Email>
</Employee>
</Company>テキストノードの値を変更
Node要素の変更値を言うとき、要素（_text node_とも呼ばれます）のテキストコンテンツを編集することを意味します。 次の例は、要素のテキストノードを変更する方法を示しています。
例
次の例（set_text_node_example）は、XMLドキュメント（link：/dom/node.xml [node.xml]）をXML DOMオブジェクトに解析し、要素のテキストノードの値を変更します。 この場合、各_Employee_の_Email_を[email protected]_に送信し、値を出力します。
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(filename) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else//code for IE5 and IE6 {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",filename,false);
xhttp.send();
return xhttp.responseXML;
}
</script>
</head>
<body>
<script>
xmlDoc = loadXMLDoc("/dom/node.xml");
x = xmlDoc.getElementsByTagName("Email");
for(i = 0;i<x.length;i++) {
x[i].childNodes[0].nodeValue = "[email protected]";
document.write(i+');
document.write(x[i].childNodes[0].nodeValue);
document.write('<br>');
}
</script>
</body>
</html>実行
このファイルを_set_text_node_example_としてサーバーパスに保存します（このファイルとlink：/dom/node.xml [node.xml]はサーバーの同じパスにある必要があります）。 次の出力が表示されます-
0) [email protected]
1) [email protected]
2) [email protected]属性ノードの値を変更
次の例は、要素の属性ノードを変更する方法を示しています。
例
次の例（set_attribute_example）は、XMLドキュメント（link：/dom/node.xml [node.xml]）をXML DOMオブジェクトに解析し、要素の属性ノードの値を変更します。 この場合、各_Employee_の_Category_をそれぞれ_admin-0、admin-1、admin-2_に設定し、値を出力します。
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(filename) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else//code for IE5 and IE6 {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",filename,false);
xhttp.send();
return xhttp.responseXML;
}
</script>
</head>
<body>
<script>
xmlDoc = loadXMLDoc("/dom/node.xml");
x = xmlDoc.getElementsByTagName("Employee");
for(i = 0 ;i<x.length;i++){
newcategory = x[i].getAttributeNode('category');
newcategory.nodeValue = "admin-"+i;
document.write(i+');
document.write(x[i].getAttributeNode('category').nodeValue);
document.write('<br>');
}
</script>
</body>
</html>実行
このファイルを_set_node_attribute_example_としてサーバーパスに保存します（このファイルとlink：/dom/node.xml [node.xml]はサーバーの同じパスにある必要があります）。 結果は次のようになります-
0) admin-0
1) admin-1
2) admin-2XML DOM-ノードの作成
この章では、ドキュメントオブジェクトのいくつかのメソッドを使用して新しいノードを作成する方法について説明します。 これらのメソッドは、新しい_elementノード、テキストノード、コメントノード、CDATAセクションノード、および属性node_を作成するスコープを提供します。 新しく作成されたノードが要素オブジェクトにすでに存在する場合、新しいノードに置き換えられます。 次のセクションでは、これを例とともに示します。
新しい_Element_ノードを作成
メソッド_createElement（）_は、新しい要素ノードを作成します。 新しく作成された要素ノードが要素オブジェクトに存在する場合、新しいノードに置き換えられます。
構文
_createElement（）_メソッドを使用する構文は次のとおりです-
var_name = xmldoc.createElement("tagname");どこで、
- var_name-新しい要素の名前を保持するユーザー定義の変数名です。
- （ "tagname"）-は、作成される新しい要素ノードの名前です。
例
次の例（createnewelement_example）は、XMLドキュメント（link：/dom/node.xml [node.xml]）を解析してXML DOMオブジェクトに変換し、XMLドキュメントに新しい要素ノード_PhoneNo_を作成します。
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(filename) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else//code for IE5 and IE6 {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",filename,false);
xhttp.send();
return xhttp.responseXML;
}
</script>
</head>
<body>
<script>
xmlDoc = loadXMLDoc("/dom/node.xml");
new_element = xmlDoc.createElement("PhoneNo");
x = xmlDoc.getElementsByTagName("FirstName")[0];
x.appendChild(new_element);
document.write(x.getElementsByTagName("PhoneNo")[0].nodeName);
</script>
</body>
</html>- _new_element = xmlDoc.createElement（ "PhoneNo"）; _は、新しい要素ノード<PhoneNo>を作成します
- _x.appendChild（new_element）; x_は、新しい要素ノードが追加される指定された子ノード<FirstName>の名前を保持します。
実行
このファイルを_createnewelement_example_としてサーバーパスに保存します（このファイルとlink：/dom/node.xml [node.xml]はサーバーの同じパスにある必要があります）。 出力では、_PhoneNo_として属性値を取得します。
新しい_Text_ノードを作成
メソッド_createTextNode（）_は、新しいテキストノードを作成します。
構文
_createTextNode（）_を使用する構文は次のとおりです-
var_name = xmldoc.createTextNode("tagname");どこで、
- var_name-新しいテキストノードの名前を保持するのは、ユーザー定義の変数名です。
- （ "tagname"）-括弧内は、作成される新しいテキストノードの名前です。
例
次の例（createtextnode_example）は、XMLドキュメント（link：/dom/node.xml [node.xml]）を解析してXML DOMオブジェクトに変換し、XMLドキュメントに新しいテキストノード_Im new text node_を作成します。
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(filename) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else//code for IE5 and IE6 {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",filename,false);
xhttp.send();
return xhttp.responseXML;
}
</script>
</head>
<body>
<script>
xmlDoc = loadXMLDoc("/dom/node.xml");
create_e = xmlDoc.createElement("PhoneNo");
create_t = xmlDoc.createTextNode("Im new text node");
create_e.appendChild(create_t);
x = xmlDoc.getElementsByTagName("Employee")[0];
x.appendChild(create_e);
document.write(" PhoneNO: ");
document.write(x.getElementsByTagName("PhoneNo")[0].childNodes[0].nodeValue);
</script>
</body>
</html>上記のコードの詳細は以下のとおりです-
- _create_e = xmlDoc.createElement（ "PhoneNo"）; _は、新しい要素<PhoneNo>を作成します。
- create_t = xmlDoc.createTextNode（ "Im new text node"）; _は、新しいテキストノードを作成します "Im new text node" _。
- x.appendChild（create_e）; _テキストノード、「新しいテキストノード」_が要素<PhoneNo>に追加されます。
- _document.write（x.getElementsByTagName（ "PhoneNo"）[0] .childNodes [0] .nodeValue）; _は、新しいテキストノード値を要素<PhoneNo>に書き込みます。
実行
このファイルを_createtextnode_example_としてサーバーパスに保存します（このファイルとnode.xmlはサーバーの同じパスにある必要があります）。 出力では、属性値を取得します。 PhoneNO：Im new text node。
新しい_Comment_ノードを作成
メソッド_createComment（）_は、新しいコメントノードを作成します。 コードの機能を簡単に理解できるように、プログラムにはコメントノードが含まれています。
構文
_createComment（）_を使用する構文は次のとおりです-
var_name = xmldoc.createComment("tagname");どこで、
- var_name-新しいコメントノードの名前を保持するユーザー定義の変数名です。
- （ "tagname"）-は、作成される新しいコメントノードの名前です。
例
次の例（createcommentnode_example）は、XMLドキュメント（link：/dom/node.xml [node.xml]）を解析してXML DOMオブジェクトに変換し、新しいコメントノード_ "Company is the parent node" _をXMLドキュメントに作成します。
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(filename) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
}
else//code for IE5 and IE6 {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",filename,false);
xhttp.send();
return xhttp.responseXML;
}
</script>
</head>
<body>
<script>
xmlDoc = loadXMLDoc("/dom/node.xml");
create_comment = xmlDoc.createComment("Company is the parent node");
x = xmlDoc.getElementsByTagName("Company")[0];
x.appendChild(create_comment);
document.write(x.lastChild.nodeValue);
</script>
</body>
</html>上記の例では-
*_create_comment = xmlDoc.createComment（ "会社は親ノードです"）_* 指定されたコメント行を作成します*。
* _x.appendChild（create_comment）_この行では、_ 'x'_はコメント行が追加される要素<Company>の名前を保持します。実行
このファイルを_createcommentnode_example_としてサーバーパスに保存します（このファイルとlink：/dom/node.xml [node.xml]はサーバーの同じパスにある必要があります）。 出力では、_Companyが親ノード_であるため、属性値を取得します。
新しい_CDATAセクション_ノードの作成
メソッド_createCDATASection（）_は、新しいCDATAセクションノードを作成します。 新しく作成されたCDATAセクションノードが要素オブジェクトに存在する場合、新しいノードに置き換えられます。
構文
_createCDATASection（）_を使用する構文は次のとおりです-
var_name = xmldoc.createCDATASection("tagname");どこで、
- var_name-新しいCDATAセクションノードの名前を保持するユーザー定義の変数名です。
- （ "tagname"）-は、作成される新しいCDATAセクションノードの名前です。
例
次の例（createcdatanode_example）は、XMLドキュメント（link：/dom/node.xml [node.xml]）を解析してXML DOMオブジェクトに変換し、新しいCDATAセクションノード_ "Create CDATA Example" _をXMLドキュメントに作成します。
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(filename) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
}
else//code for IE5 and IE6 {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",filename,false);
xhttp.send();
return xhttp.responseXML;
}
</script>
</head>
<body>
<script>
xmlDoc = loadXMLDoc("/dom/node.xml");
create_CDATA = xmlDoc.createCDATASection("Create CDATA Example");
x = xmlDoc.getElementsByTagName("Employee")[0];
x.appendChild(create_CDATA);
document.write(x.lastChild.nodeValue);
</script>
</body>
</html>上記の例では-
- create_CDATA = xmlDoc.createCDATASection（ "CDATAサンプルの作成"）_は、新しいCDATAセクションノードを作成します。 "CDATAサンプルの作成" _
- _x.appendChild（create_CDATA）_ここで、_x_は、CDATAノード値が追加される0でインデックス付けされた指定の要素<Employee>を保持します。
実行
このファイルを_createcdatanode_example_としてサーバーパスに保存します（このファイルとnode.xmlはサーバーの同じパスにある必要があります）。 出力では、属性値を_Create CDATA Example_として取得します。
新しい_Attribute_ノードを作成
新しい属性ノードを作成するには、_setAttributeNode（）_メソッドを使用します。 新しく作成された属性ノードが要素オブジェクトに存在する場合、新しいノードに置き換えられます。
構文
_createElement（）_メソッドを使用する構文は次のとおりです-
var_name = xmldoc.createAttribute("tagname");どこで、
- var_name-新しい属性ノードの名前を保持するユーザー定義の変数名です。
- （ "tagname"）-は、作成される新しい属性ノードの名前です。
例
次の例（createattributenode_example）は、XMLドキュメント（link：/dom/node.xml [node.xml]）をXML DOMオブジェクトに解析し、XMLドキュメントに新しい属性ノード_section_を作成します。
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(filename) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else//code for IE5 and IE6 {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",filename,false);
xhttp.send();
return xhttp.responseXML;
}
</script>
</head>
<body>
<script>
xmlDoc = loadXMLDoc("/dom/node.xml");
create_a = xmlDoc.createAttribute("section");
create_a.nodeValue = "A";
x = xmlDoc.getElementsByTagName("Employee");
x[0].setAttributeNode(create_a);
document.write("New Attribute: ");
document.write(x[0].getAttribute("section"));
</script>
</body>
</html>上記の例では-
- _create_a = xmlDoc.createAttribute（ "Category"）_は、<section>という名前の属性を作成します。
- create_a.nodeValue = "Management" _は、属性<section>の値 "A" _を作成します。
- _x [0] .setAttributeNode（create_a）_この属性値は、0でインデックス付けされたノード要素<Employee>に設定されます。
XML DOM-ノードの追加
この章では、既存の要素のノードについて説明します。 それは手段を提供します-
- 既存の子ノードの前または後に新しい子ノードを追加します
- テキストノード内にデータを挿入する
- 属性ノードを追加
以下のメソッドを使用して、DOMの要素にノードを追加/追加できます-
- appendChild（）
- insertBefore（）
- insertData（）
appendChild（）
メソッドappendChild（）は、既存の子ノードの後に新しい子ノードを追加します。
構文
appendChild（）メソッドの構文は次のとおりです-
Node appendChild(Node newChild) throws DOMExceptionどこで、
- newChild-追加するノードです
- このメソッドは、追加された_Node_を返します。
例
次の例（appendchildnode_example）は、XMLドキュメント（link：/dom/node.xml [node.xml]）をXML DOMオブジェクトに解析し、新しい子_PhoneNo_を要素<FirstName>に追加します。
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(filename) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else//code for IE5 and IE6 {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",filename,false);
xhttp.send();
return xhttp.responseXML;
}
</script>
</head>
<body>
<script>
xmlDoc = loadXMLDoc("/dom/node.xml");
create_e = xmlDoc.createElement("PhoneNo");
x = xmlDoc.getElementsByTagName("FirstName")[0];
x.appendChild(create_e);
document.write(x.getElementsByTagName("PhoneNo")[0].nodeName);
</script>
</body>
</html>上記の例では-
- メソッドcreateElement（）を使用して、新しい要素_PhoneNo_が作成されます。
- メソッドappendChild（）を使用して、新しい要素_PhoneNo_が要素_FirstName_に追加されます。
実行
このファイルを_appendchildnode_example_という名前でサーバーパスに保存します（このファイルとnode.xmlはサーバーの同じパスにある必要があります）。 出力では、_PhoneNo_として属性値を取得します。
insertBefore（）
メソッド_insertBefore（）_は、指定された子ノードの前に新しい子ノードを挿入します。
構文
insertBefore（）メソッドの構文は次のとおりです-
Node insertBefore(Node newChild, Node refChild) throws DOMExceptionどこで、
- newChild-挿入するノードです
- refChild-参照ノード、つまり、新しいノードを挿入する前のノードです。
- このメソッドは、挿入されている_Node_を返します。
例
次の例（insertnodebefore_example）は、XMLドキュメント（link：/dom/node.xml [node.xml]）をXML DOMオブジェクトに解析し、指定された要素<Email>の前に新しい子_Email_を挿入します。
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(filename) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else//code for IE5 and IE6 {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",filename,false);
xhttp.send();
return xhttp.responseXML;
}
</script>
</head>
<body>
<script>
xmlDoc = loadXMLDoc("/dom/node.xml");
create_e = xmlDoc.createElement("Email");
x = xmlDoc.documentElement;
y = xmlDoc.getElementsByTagName("Email");
document.write("No of Email elements before inserting was: " + y.length);
document.write("<br>");
x.insertBefore(create_e,y[3]);
y=xmlDoc.getElementsByTagName("Email");
document.write("No of Email elements after inserting is: " + y.length);
</script>
</body>
</html>上記の例では-
- メソッドcreateElement（）を使用して、新しい要素_Email_が作成されます。
- メソッドinsertBefore（）を使用して、要素_Email_の前に新しい要素_Email_が追加されます。
- _y.length_は、新しい要素の前後に追加された要素の総数を示します。
実行
このファイルを_insertnodebefore_example_としてサーバーパスに保存します（このファイルとnode.xmlはサーバーの同じパスにある必要があります）。 私たちは次の出力を受け取ります-
No of Email elements before inserting was: 3
No of Email elements after inserting is: 4insertData（）
メソッドinsertData（）は、指定された16ビット単位のオフセットに文字列を挿入します。
構文
insertData（）の構文は次のとおりです-
void insertData(int offset, java.lang.String arg) throws DOMExceptionどこで、
- offset-は挿入する文字オフセットです。
- arg-は、データを挿入するキーワードです。 コンマで区切られた括弧内の2つのパラメーターオフセットと文字列を囲みます。
例
次の例（addtext_example）は、XMLドキュメント（ "link：/dom/node.xml [node.xml]"）をXML DOMオブジェクトに解析し、新しいデータ_MiddleName_を要素<FirstName>の指定された位置に挿入します。
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(filename) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else//code for IE5 and IE6 {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",filename,false);
xhttp.send();
return xhttp.responseXML;
}
</script>
</head>
<body>
<script>
xmlDoc = loadXMLDoc("/dom/node.xml");
x = xmlDoc.getElementsByTagName("FirstName")[0].childNodes[0];
document.write(x.nodeValue);
x.insertData(6,"MiddleName");
document.write("<br>");
document.write(x.nodeValue);
</script>
</body>
</html>- x.insertData（6、 "MiddleName"）; _ -ここで、_x_は指定された子名の名前、つまり<FirstName>を保持します。 次に、位置6から始まるデータ "MiddleName" _をこのテキストノードに挿入します。
実行
このファイルを_addtext_example_としてサーバーパスに保存します（このファイルとnode.xmlはサーバーの同じパスにある必要があります）。 私たちは出力で次を受け取ります-
Tanmay
TanmayMiddleNameXML DOM-ノードの置換
この章では、XML DOMオブジェクトのノードの置換操作について学習します。 知っているように、DOMのすべてはノードと呼ばれる階層的な情報単位で維持され、置換ノードはこれらの指定されたノードまたはテキストノードを更新する別の方法を提供します。
以下は、ノードを置き換える2つの方法です。
- replaceChild（）
- replaceData（）
replaceChild（）
メソッド_replaceChild（）_は、指定されたノードを新しいノードに置き換えます。
構文
insertData（）の構文は次のとおりです-
Node replaceChild(Node newChild, Node oldChild) throws DOMExceptionどこで、
- newChild-は、子リストに追加する新しいノードです。
- oldChild-は、リスト内で置換されるノードです。
- このメソッドは、置換されたノードを返します。
例
次の例（replacenode_example）は、XMLドキュメント（link：/dom/node.xml [node.xml]）を解析してXML DOMオブジェクトに変換し、指定されたノード<FirstName>を新しいノード<Name>に置き換えます。
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(filename) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else//code for IE5 and IE6 {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",filename,false);
xhttp.send();
return xhttp.responseXML;
}
</script>
</head>
<body>
<script>
xmlDoc = loadXMLDoc("/dom/node.xml");
x = xmlDoc.documentElement;
z = xmlDoc.getElementsByTagName("FirstName");
document.write("<b>Content of FirstName element before replace operation</b><br>");
for (i=0;i<z.length;i++) {
document.write(z[i].childNodes[0].nodeValue);
document.write("<br>");
}
//create a Employee element, FirstName element and a text node
newNode = xmlDoc.createElement("Employee");
newTitle = xmlDoc.createElement("Name");
newText = xmlDoc.createTextNode("MS Dhoni");
//add the text node to the title node,
newTitle.appendChild(newText);
//add the title node to the book node
newNode.appendChild(newTitle);
y = xmlDoc.getElementsByTagName("Employee")[0]
//replace the first book node with the new node
x.replaceChild(newNode,y);
z = xmlDoc.getElementsByTagName("FirstName");
document.write("<b>Content of FirstName element after replace operation</b><br>");
for (i = 0;i<z.length;i++) {
document.write(z[i].childNodes[0].nodeValue);
document.write("<br>");
}
</script>
</body>
</html>実行
このファイルをサーバーパスのreplacenode_exampleとして保存します（このファイルとnode.xmlはサーバーの同じパスにある必要があります）。 次のように出力を取得します-
Content of FirstName element before replace operation
Tanmay
Taniya
Tanisha
Content of FirstName element after replace operation
Taniya
TanishareplaceData（）
メソッドreplaceData（）は、指定された16ビット単位オフセットで始まる文字を指定された文字列に置き換えます。
構文
replaceData（）の構文は次のとおりです-
void replaceData(int offset, int count, java.lang.String arg) throws DOMExceptionどこで
- offset-は、置換を開始するオフセットです。
- count-置き換える16ビット単位の数です。 オフセットとカウントの合計が長さを超える場合、データの最後までのすべての16ビット単位が置き換えられます。
- arg-範囲を置き換える必要のある_DOMString_。
例
次の例（replacedata_example）は、XMLドキュメント（link：/dom/node.xml [node.xml]）を解析してXML DOMオブジェクトに変換し、それを置き換えます。
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(filename) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else//code for IE5 and IE6 {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",filename,false);
xhttp.send();
return xhttp.responseXML;
}
</script>
</head>
<body>
<script>
xmlDoc = loadXMLDoc("/dom/node.xml");
x = xmlDoc.getElementsByTagName("ContactNo")[0].childNodes[0];
document.write("<b>ContactNo before replace operation:</b> "+x.nodeValue);
x.replaceData(1,5,"9999999");
document.write("<br>");
document.write("<b>ContactNo after replace operation:</b> "+x.nodeValue);
</script>
</body>
</html>上記の例では-
- x.replaceData（2,3、 "999"）; _-ここで_x_は、指定された要素<ContactNo>のテキストを保持します。このテキストは、位置_1_から開始して、新しいテキスト "9999999" に置き換えられます。 _5。
実行
このファイルを_replacedata_example_としてサーバーパスに保存します（このファイルとnode.xmlはサーバーの同じパスにある必要があります）。 次のように出力を取得します-
ContactNo before replace operation: 1234567890
ContactNo after replace operation: 199999997890XML DOM-ノードの削除
この章では、XML DOM _ノード削除_操作について学習します。 ノードの削除操作は、指定されたノードをドキュメントから削除します。 この操作は、テキストノード、要素ノード、属性ノードなどのノードを削除するために実装できます。
以下は、ノードの削除操作に使用されるメソッドです-
- removeChild（）
- removeAttribute（）
removeChild（）
メソッド_removeChild（）_は、_oldChild_で示される子ノードを子のリストから削除し、それを返します。 子ノードを削除することは、テキストノードを削除することと同じです。 したがって、子ノードを削除すると、それに関連付けられているテキストノードも削除されます。
構文
removeChild（）を使用する構文は次のとおりです-
Node removeChild(Node oldChild) throws DOMExceptionどこで、
- oldChild-は削除されるノードです。
- このメソッドは、削除されたノードを返します。
例-現在のノードを削除
次の例（removecurrentnode_example）は、XMLドキュメント（link：/dom/node.xml [node.xml]）を解析してXML DOMオブジェクトにし、指定したノード<ContactNo>を親ノードから削除します。
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(filename) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else//code for IE5 and IE6 {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",filename,false);
xhttp.send();
return xhttp.responseXML;
}
</script>
</head>
<body>
<script>
xmlDoc = loadXMLDoc("/dom/node.xml");
document.write("<b>Before remove operation, total ContactNo elements: </b>");
document.write(xmlDoc.getElementsByTagName("ContactNo").length);
document.write("<br>");
x = xmlDoc.getElementsByTagName("ContactNo")[0];
x.parentNode.removeChild(x);
document.write("<b>After remove operation, total ContactNo elements: </b>");
document.write(xmlDoc.getElementsByTagName("ContactNo").length);
</script>
</body>
</html>上記の例では-
- _x = xmlDoc.getElementsByTagName（ "ContactNo"）[0] _は、0でインデックス付けされた要素<ContactNo>を取得します。
- _x.parentNode.removeChild（x）; _は、0でインデックス付けされた要素<ContactNo>を親ノードから削除します。
実行
このファイルを_removecurrentnode_example_としてサーバーパスに保存します（このファイルとnode.xmlはサーバーの同じパスにある必要があります）。 次の結果が得られます-
Before remove operation, total ContactNo elements: 3
After remove operation, total ContactNo elements: 2例-テキストノードの削除
次の例（removetextNode_example）は、XMLドキュメント（link：/dom/node.xml [node.xml]）をXML DOMオブジェクトに解析し、指定された子ノード<FirstName>を削除します。
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(filename) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else//code for IE5 and IE6 {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",filename,false);
xhttp.send();
return xhttp.responseXML;
}
</script>
</head>
<body>
<script>
xmlDoc = loadXMLDoc("/dom/node.xml");
x = xmlDoc.getElementsByTagName("FirstName")[0];
document.write("<b>Text node of child node before removal is:</b> ");
document.write(x.childNodes.length);
document.write("<br>");
y = x.childNodes[0];
x.removeChild(y);
document.write("<b>Text node of child node after removal is:</b> ");
document.write(x.childNodes.length);
</script>
</body>
</html>上記の例では-
- _x = xmlDoc.getElementsByTagName（ "FirstName"）[0]; _-0でインデックス付けされた_x_に最初の要素<FirstName>を取得します。
- _y = x.childNodes [0]; _-この行の_y_は、削除する子ノードを保持します。
- _x.removeChild（y）; _-指定された子ノードを削除します。
実行
このファイルを_removetextNode_example_としてサーバーパスに保存します（このファイルとnode.xmlはサーバーの同じパスにある必要があります）。 次の結果が得られます-
Text node of child node before removal is: 1
Text node of child node after removal is: 0removeAttribute（）
メソッドremoveAttribute（）は、要素の属性を名前で削除します。
構文
_removeAttribute（）_を使用する構文は次のとおりです-
void removeAttribute(java.lang.String name) throws DOMExceptionどこで、
- name-削除する属性の名前です。
例
次の例（removeelementattribute_example）は、XMLドキュメント（link：/dom/node.xml [node.xml]）を解析してXML DOMオブジェクトに変換し、指定された属性ノードを削除します。
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(filename) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else//code for IE5 and IE6 {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",filename,false);
xhttp.send();
return xhttp.responseXML;
}
</script>
</head>
<body>
<script>
xmlDoc = loadXMLDoc("/dom/node.xml");
x = xmlDoc.getElementsByTagName('Employee');
document.write(x[1].getAttribute('category'));
document.write("<br>");
x[1].removeAttribute('category');
document.write(x[1].getAttribute('category'));
</script>
</body>
</html>上記の例では-
- _document.write（x [1] .getAttribute（ 'category'））; _-1番目の位置にインデックス付けされた属性_category_の値が呼び出されます。
- _x [1] .removeAttribute（ 'category'）; _-属性値を削除します。
実行
このファイルを_removeelementattribute_example_としてサーバーパスに保存します（このファイルとnode.xmlはサーバーの同じパスにある必要があります）。 次の結果が得られます-
Non-Technical
nullXML DOM-クローンノード
この章では、XML DOMオブジェクトでの_Clone Node_操作について説明します。 ノードの複製操作を使用して、指定したノードの複製コピーを作成します。 _cloneNode（）_はこの操作に使用されます。
cloneNode（）
このメソッドは、このノードの複製を返します。つまり、ノードの汎用コピーコンストラクターとして機能します。 複製ノードには親がなく（parentNodeはnull）、ユーザーデータもありません。
構文
_cloneNode（）_メソッドの構文は次のとおりです-
Node cloneNode(boolean deep)- deep-trueの場合、指定されたノードの下のサブツリーを再帰的に複製します。 falseの場合、ノード自体（および要素の場合はその属性）のみを複製します。
- このメソッドは重複ノードを返します。
例
次の例（clonenode_example）は、XMLドキュメント（link：/dom/node.xml [node.xml]）を解析してXML DOMオブジェクトに変換し、最初の_Employee_要素のディープコピーを作成します。
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(filename) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else//code for IE5 and IE6 {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",filename,false);
xhttp.send();
return xhttp.responseXML;
}
</script>
</head>
<body>
<script>
xmlDoc = loadXMLDoc("/dom/node.xml");
x = xmlDoc.getElementsByTagName('Employee')[0];
clone_node = x.cloneNode(true);
xmlDoc.documentElement.appendChild(clone_node);
firstname = xmlDoc.getElementsByTagName("FirstName");
lastname = xmlDoc.getElementsByTagName("LastName");
contact = xmlDoc.getElementsByTagName("ContactNo");
email = xmlDoc.getElementsByTagName("Email");
for (i = 0;i < firstname.length;i++) {
document.write(firstname[i].childNodes[0].nodeValue+'
'+lastname[i].childNodes[0].nodeValue+',
'+contact[i].childNodes[0].nodeValue+', '+email[i].childNodes[0].nodeValue);
document.write("<br>");
}
</script>
</body>
</html>上記の例でわかるように、cloneNode（） paramを_true_に設定しました。 したがって、_Employee_要素の下の各子要素がコピーまたは複製されます。
実行
このファイルを_clonenode_example_としてサーバーパスに保存します（このファイルとnode.xmlはサーバーの同じパスにある必要があります）。 次のように出力を取得します-
Tanmay Patil, 1234567890, [email protected]
Taniya Mishra, 1234667898, [email protected]
Tanisha Sharma, 1234562350, [email protected]
Tanmay Patil, 1234567890, [email protected]最初の_Employee_要素が完全に複製されていることがわかります。
DOM-ノードオブジェクト
_Node_インターフェイスは、ドキュメントオブジェクトモデル全体の主要なデータ型です。 このノードは、ドキュメントツリー全体で単一のXML要素を表すために使用されます。
ノードは、属性ノード、テキストノード、またはその他のノードである任意のタイプにすることができます。 属性_nodeName、nodeValue_および_attributes_は、特定の派生インターフェースにキャストすることなくノード情報を取得するメカニズムとして含まれています。
属性
次の表は、_Node_オブジェクトの属性を示しています-
| Attribute | Type | Description |
|---|---|---|
| attributes | NamedNodeMap | This is of type NamedNodeMap containing the attributes of this node (if it is an Element) or null otherwise. This has been removed. Refer specs |
| baseURI | DOMString | It is used to specify absolute base URI of the node. |
| childNodes | NodeList | It is a NodeList that contains all children of this node. If there are no children, this is a NodeList containing no nodes. |
| firstChild | Node | It specifies the first child of a node. |
| lastChild | Node | It specifies the last child of a node. |
| localName | DOMString | It is used to specify the name of the local part of a node. This has been removed. Refer specs. |
| namespaceURI | DOMString | It specifies the namespace URI of a node. This has been removed. Refer specs |
| nextSibling | Node | It returns the node immediately following this node. If there is no such node, this returns null. |
| nodeName | DOMString | The name of this node, depending on its type. |
| nodeType | unsigned short | It is a code representing the type of the underlying object. |
| nodeValue | DOMString | It is used to specify the value of a node depending on their types. |
| ownerDocument | Document | It specifies the Document object associated with the node. |
| parentNode | Node | This property specifies the parent node of a node. |
| prefix | DOMString | This property returns the namespace prefix of a node. This has been removed. Refer specs |
| previousSibling | Node | This specifies the node immediately preceding the current node. |
| textContent | DOMString | This specifies the textual content of a node. |
ノードタイプ
以下のようにノードタイプをリストしました-
- ELEMENT_NODE
- ATTRIBUTE_NODE
- ENTITY_NODE
- ENTITY_REFERENCE_NODE
- DOCUMENT_FRAGMENT_NODE
- TEXT_NODE
- CDATA_SECTION_NODE
- COMMENT_NODE
- PROCESSING_INSTRUCTION_NODE
- DOCUMENT_NODE
- DOCUMENT_TYPE_NODE *NOTATION_NODE
方法
以下の表は、さまざまなNode Objectメソッドを示しています-
| S.No. | Method & Description |
|---|---|
| 1 |
このメソッドは、指定された要素ノードの最後の子ノードの後にノードを追加します。 追加されたノードを返します。 |
| 2 |
このメソッドは、派生クラスでオーバーライドされると、複製ノードを作成するために使用されます。 複製されたノードを返します。 |
| 3 |
compareDocumentPosition(Node other) このメソッドは、ドキュメントの順序に従って、指定されたノードに対して現在のノードの位置を比較するために使用されます。 unsigned short、ノードが参照ノードに対して相対的にどのように配置されているかを返します。 |
| 4 |
指定された機能とバージョンの特殊なAPIを実装するDOMオブジェクトを返します（存在する場合）。オブジェクトがない場合はnullを返します。 _これは削除されました。 specs_を参照してください。 |
| 5 |
getUserData(DOMString key) このノードのキーに関連付けられたオブジェクトを取得します。 オブジェクトは、最初に同じキーでsetUserDataを呼び出して、このノードに設定されている必要があります。 このノード上の指定されたキーに関連付けられたDOMUserDataを返します。ない場合はnullを返します。 _これは削除されました。 specs_を参照してください。 |
| 6 |
hasAttributes() このノード（要素の場合）に属性があるかどうかを返します。 指定されたノードに何らかの属性が存在する場合は_true_を返し、そうでない場合は_false_を返します。 _これは削除されました。 specs_を参照してください。 |
| 7 |
このノードに子があるかどうかを返します。 このメソッドは、現在のノードに子ノードがある場合は_true_を返し、そうでない場合は_false_を返します。 |
| 8 |
insertBefore(Node newChild, Node refChild) このメソッドは、このノードの既存の子の直前に、このノードの子として新しいノードを挿入するために使用されます。 挿入されるノードを返します。 |
| 9 |
isDefaultNamespace(DOMString namespaceURI) このメソッドは、名前空間URIを引数として受け入れ、名前空間が指定されたノードのデフォルトの名前空間である場合は_true_の値を持つ_Boolean_を返し、そうでない場合は_false_を返します。 |
| 10 |
このメソッドは、2つのノードが等しいかどうかをテストします。 ノードが等しい場合は_true_を返し、そうでない場合は_false_を返します。 |
| 11 |
isSameNode(Node other) このメソッドは、現在のノードが指定されたノードと同じノードであるかどうかを返します。 ノードが同じ場合は_true_を返し、そうでない場合は_false_を返します。 _これは削除されました。 specs_を参照してください。 |
| 12 |
isSupported(DOMString feature, DOMString version) このメソッドは、指定されたDOMモジュールが現在のノードでサポートされているかどうかを返します。 指定した機能がこのノードでサポートされている場合は_true_、そうでない場合は_false_を返します。 _これは削除されました。 specs_を参照してください。 |
| 13 |
lookupNamespaceURI(DOMString prefix) このメソッドは、名前空間プレフィックスに関連付けられた名前空間のURIを取得します。 |
| 14 |
lookupPrefix(DOMString namespaceURI) このメソッドは、ネームスペースURIの現在のネームスペースで定義されている最も近いプレフィックスを返します。 見つかった場合は関連する名前空間プレフィックスを返し、見つからない場合はnullを返します。 |
| 15 |
正規化は、要素、コメント、処理命令、CDATAセクション、およびエンティティ参照を含むノードの構造がテキストノードを分離する通常のフォームを定義する属性ノードを含むすべてのテキストノードを追加します。つまり、隣接するテキストノードも空のテキストノードも追加しません。 |
| 16 |
このメソッドは、指定された子ノードを現在のノードから削除するために使用されます。 これにより、削除されたノードが返されます。 |
| 17 |
replaceChild(Node newChild, Node oldChild) このメソッドは、古い子ノードを新しいノードに置き換えるために使用されます。 これにより、置換されたノードが返されます。 |
| 18 |
setUserData(DOMString key, DOMUserData data, UserDataHandler handler) このメソッドは、オブジェクトをこのノードのキーに関連付けます。 オブジェクトは、同じキーで_getUserData_を呼び出すことにより、このノードから後で取得できます。 これは、このノードの特定のキーに以前に関連付けられた_DOMUserData_を返します。 _これは削除されました。 specs_を参照してください。 |
DOM-NodeListオブジェクト
NodeListオブジェクトは、ノードの順序付けられたコレクションの抽象化を指定します。 NodeListのアイテムは、0から始まる整数インデックスを介してアクセスできます。
属性
次の表は、NodeListオブジェクトの属性を示しています-
| Attribute | Type | Description |
|---|---|---|
| length | unsigned long | It gives the number of nodes in the node list. |
方法
NodeListオブジェクトの唯一のメソッドは次のとおりです。
| S.No. | Method & Description |
|---|---|
| 1 |
コレクション内のindexthアイテムを返します。 インデックスがリスト内のノードの数以上の場合、nullを返します。 |
DOM-NamedNodeMapオブジェクト
_NamedNodeMap_オブジェクトは、名前でアクセスできるノードのコレクションを表すために使用されます。
属性
次の表に、NamedNodeMapオブジェクトのプロパティを示します。
| Attribute | Type | Description |
|---|---|---|
| length | unsigned long | It gives the number of nodes in this map. The range of valid child node indices is 0 to length-1 inclusive. |
方法
次の表に、_NamedNodeMap_オブジェクトのメソッドをリストします。
| S.No. | Methods & Description |
|---|---|
| 1 |
名前で指定されたノードを取得します。 |
| 2 |
ローカル名と名前空間URIで指定されたノードを取得します。 |
| 3 |
マップ内のindexthアイテムを返します。 インデックスがこのマップ内のノードの数以上の場合、これはnullを返します。 |
| 4 |
名前で指定されたノードを削除します。 |
| 5 |
ローカル名と名前空間URIで指定されたノードを削除します。 |
| 6 |
nodeName _attributeを使用してノードを追加します。 その名前のノードがこのマップに既に存在する場合、新しいノードに置き換えられます。_ |
| 7 |
_namespaceURI_および_localName_を使用してノードを追加します。 その名前空間URIとそのローカル名を持つノードがこのマップに既に存在する場合、新しいノードに置き換えられます。 ノードを単独で交換しても効果はありません。 |
DOM-DOMImplementationオブジェクト
_DOMImplementation_オブジェクトは、ドキュメントオブジェクトモデルの特定のインスタンスに依存しない操作を実行するための多くのメソッドを提供します。
方法
次の表は、_DOMImplementation_オブジェクトのメソッドの一覧です-
| S.No. | Method & Description |
|---|---|
| 1 |
createDocument(namespaceURI, qualifiedName, doctype) ドキュメント要素を使用して、指定したタイプのDOM Documentオブジェクトを作成します。 |
| 2 |
createDocumentType(qualifiedName, publicId, systemId) 空の_DocumentType_ノードを作成します。 |
| 3 |
getFeature(feature, version) このメソッドは、指定された機能とバージョンの特殊なAPIを実装する特殊なオブジェクトを返します。 _これは削除されました。 specs_を参照してください。 |
| 4 |
このメソッドは、DOM実装が特定の機能とバージョンを実装しているかどうかをテストします。 |
DOM-DocumentTypeオブジェクト
_DocumentType_オブジェクトは、ドキュメントのデータにアクセスするためのキーであり、ドキュメント内では、doctype属性にnull値またはDocumentTypeオブジェクト値を設定できます。 これらのDocumentTypeオブジェクトは、XMLドキュメント用に記述されたエンティティへのインターフェイスとして機能します。
属性
次の表は、_DocumentType_オブジェクトの属性を示しています-
| Attribute | Type | Description |
|---|---|---|
| name | DOMString | It returns the name of the DTD which is written immediately next to the keyword !DOCTYPE. |
| entities | NamedNodeMap | It returns a NamedNodeMap object containing the general entities, both external and internal, declared in the DTD. |
| notations | NamedNodeMap | It returns a NamedNodeMap containing the notations declared in the DTD. |
| internalSubset | DOMString | It returns an internal subset as a string, or null if there is none. This has been removed. Refer specs. |
| publicId | DOMString | It returns the public identifier of the external subset. |
| systemId | DOMString | It returns the system identifier of the external subset. This may be an absolute URI or not. |
方法
_DocumentType_は、その親である_Node_からメソッドを継承し、_ChildNode_インターフェイスを実装します。
DOM-ProcessingInstructionオブジェクト
_ProcessingInstruction_は、XMLドキュメントのプロローグセクションに通常含まれているアプリケーション固有の情報を提供します。
処理命令（PI）を使用して、情報をアプリケーションに渡すことができます。 PIは、ドキュメント内のマークアップ外のどこにでも表示できます。 それらは、文書タイプ定義（DTD）を含むプロローグ、テキストコンテンツ、または文書の後に表示できます。
PIは特別なタグ* <？で始まり、？> で終わります。 コンテンツの処理は、文字列？> *が検出された直後に終了します。
属性
次の表は、_ProcessingInstruction_オブジェクトの属性を示しています-
| Attribute | Type | Description |
|---|---|---|
| data | DOMString | It is a character that describes the information for the application to process immediately preceding the ?>. |
| target | DOMString | This identifies the application to which the instruction or the data is directed. |
DOM-エンティティオブジェクト
エンティティインターフェイスは、XMLドキュメント内の解析済みまたは未解析の既知のエンティティを表します。 _Node_から継承される_nodeName_属性には、エンティティの名前が含まれます。
Entityオブジェクトには親ノードはなく、その後続ノードはすべて読み取り専用です。
属性
次の表は、_Entity_オブジェクトの属性を示しています-
| Attribute | Type | Description |
|---|---|---|
| inputEncoding | DOMString | This specifies the encoding used by the external parsed entity. Its value is null if it is an entity from the internal subset or if it is not known. |
| notationName | DOMString | For an unparsed entities, it gives the name of the notation and its value is null for the parsed entities. |
| publicId | DOMString | It gives the name of the public identifier associated with the entity. |
| systemId | DOMString | It gives the name of the system identifier associated with the entity. |
| xmlEncoding | DOMString | It gives the xml encoding included as a part of the text declaration for the external parsed entity, null otherwise. |
| xmlVersion | DOMString | It gives the xml version included as a part of the text declaration for the external parsed entity, null otherwise. |
DOM-エンティティ参照オブジェクト
_EntityReference_オブジェクトは、テキストを置換するスコープを提供するXMLドキュメントに挿入される一般的なエンティティ参照です。 EntityReferenceオブジェクトは、HTMLまたはXMLプロセッサによって展開されると見なされるため、事前定義されたエンティティに対して機能しません。
このインターフェイスには、独自のプロパティやメソッドはありませんが、_Node_から継承します。
DOM-表記オブジェクト
この章では、XML DOM _Notationオブジェクト_について学習します。 表記法オブジェクトプロパティは、表記法属性、特定の処理命令、または非XMLデータを持つ要素の形式を認識するスコープを提供します。 NodeオブジェクトのプロパティとメソッドはNotationオブジェクトでも実行できます。これはNodeとも見なされるためです。
このオブジェクトは、_Node_からメソッドとプロパティを継承します。 _nodeName_は表記名です。 親がありません。
属性
次の表は、_Notation_オブジェクトの属性を示しています-
| Attribute | Type | Description |
|---|---|---|
| publicID | DOMString | It gives the name of the public identifier associated with the notation. |
| systemID | DOMString | It gives the name of the system identifier associated with the notation. |
DOM-要素オブジェクト
XML要素は、XMLのビルディングブロックとして定義できます。 要素は、テキスト、要素、属性、メディアオブジェクト、またはこれらすべてを保持するコンテナとして動作できます。 パーサーが整形式に対してXMLドキュメントを解析するたびに、パーサーは要素ノードをナビゲートします。 要素ノードには、テキストノードと呼ばれるテキストが含まれています。
要素オブジェクトはノードと見なされるため、要素オブジェクトはNodeオブジェクトのプロパティとメソッドを継承します。 ノードオブジェクトのプロパティとメソッドの他に、次のプロパティとメソッドがあります。
プロパティ
次の表は、_Element_オブジェクトの属性を示しています-
| Attribute | Type | Description |
|---|---|---|
| tagName | DOMString | It gives the name of the tag for the specified element. |
| schemaTypeInfo | TypeInfo | It represents the type information associated with this element. This has been removed. Refer specs. |
方法
以下の表は、要素オブジェクトのメソッドを示しています-
| Methods | Type | Description |
|---|---|---|
| getAttribute() | DOMString | Retrieves the value of the attribute if exists for the specified element. |
| getAttributeNS() | DOMString | Retrieves an attribute value by local name and namespace URI. |
| getAttributeNode() | Attr | Retrieves the name of the attribute node from the current element. |
| getAttributeNodeNS() | Attr | Retrieves an Attr node by local name and namespace URI. |
| getElementsByTagName() | NodeList | Returns a NodeList of all descendant Elements with a given tag name, in document order. |
| getElementsByTagNameNS() | NodeList | Returns a NodeList of all the descendant Elements with a given local name and namespace URI in document order. |
| hasAttribute() | boolean | Returns true when an attribute with a given name is specified on this element or has a default value, false otherwise. |
| hasAttributeNS() | boolean | Returns true when an attribute with a given local name and namespace URI is specified on this element or has a default value, false otherwise. |
| removeAttribute() | No Return Value | Removes an attribute by name. |
| removeAttributeNS | No Return Value | Removes an attribute by local name and namespace URI. |
| removeAttributeNode() | Attr | Specified attribute node is removed from the element. |
| setAttribute() | No Return Value | Sets a new attribute value to the existing element. |
| setAttributeNS() | No Return Value | Adds a new attribute. If an attribute with the same local name and namespace URI is already present on the element, its prefix is changed to be the prefix part of the qualifiedName, and its value is changed to be the value parameter. |
| setAttributeNode() | Attr | Sets a new attribute node to the existing element. |
| setAttributeNodeNS | Attr | Adds a new attribute. If an attribute with that local name and that namespace URI is already present in the element, it is replaced by the new one. |
| setIdAttribute | No Return Value | If the parameter isId is true, this method declares the specified attribute to be a user-determined ID attribute. This has been removed. Refer specs. |
| setIdAttributeNS | No Return Value | If the parameter isId is true, this method declares the specified attribute to be a user-determined ID attribute. This has been removed. Refer specs. |
DOM-属性オブジェクト
Attr_インターフェイスは、Elementオブジェクトの属性を表します。 通常、属性の許容値は、ドキュメントに関連付けられたスキーマで定義されます。 _Attr_オブジェクトは、実際にはそれらが記述する要素の子ノードではないため、ドキュメントツリーの一部とは見なされません。 したがって、子ノード_parentNode _、 previousSibling_および_nextSibling_の属性値は_null_です。
属性
次の表は、_Attribute_オブジェクトの属性を示しています-
| Attribute | Type | Description |
|---|---|---|
| name | DOMString | This gives the name of the attribute. |
| specified | boolean | It is a boolean value which returns true if the attribute value exists in the document. |
| value | DOMString | Returns the value of the attribute. |
| ownerElement | Element | It gives the node to which attribute is associated or null if attribute is not in use. |
| isId | boolean | It returns whether the attribute is known to be of type ID (i.e. to contain an identifier for its owner element) or not. |
DOM-CDATASectionオブジェクト
この章では、XML DOM _CDATASection Object_について学習します。 XMLドキュメント内に存在するテキストは、宣言されている内容に応じて解析または解析されません。 テキストが文字データの解析（PCDATA）として宣言されている場合、パーサーによって解析され、XMLドキュメントがXML DOMオブジェクトに変換されます。 一方、テキストが未解析の文字データ（CDATA）として宣言されている場合、そのテキストはXMLパーサーによって解析されません。 これらはマークアップとは見なされず、エンティティを展開しません。
CDATASectionオブジェクトを使用する目的は、そうでなければマークアップと見なされる文字を含むテキストブロックをエスケープすることです。 "]]>" 、これは、CDATAセクションを終了するCDATAセクションで認識される唯一の区切り文字です。
CharacterData.data属性は、CDATAセクションに含まれるテキストを保持します。 このインターフェイスは、_Text_インターフェイスを介して_CharatcterData_インターフェイスを継承します。
'_CDATASectionオブジェクトに対して定義されたメソッドと属性はありません。 _Text_インターフェイスのみを直接実装します。_
DOM-コメントオブジェクト
この章では、_Commentオブジェクト_について学習します。 コメントは、XMLコードの目的を理解するためのメモまたは行として追加されます。 コメントを使用して、関連リンク、情報、および用語を含めることができます。 これらは、XMLコードのどこにでも現れる可能性があります。
コメントインターフェイスは、コメントのコンテンツを表す_CharacterData_インターフェイスを継承します。
構文
XMLコメントには次の構文があります-
<!-------Your comment----->コメントは<！-で始まり、→で終わります。 文字間のコメントとしてテキストのメモを追加できます。 1つのコメントを他のコメントにネストしないでください。
'_Commentオブジェクトにはメソッドと属性が定義されていません。 親である_CharacterData_を継承し、_Node_を間接的に継承します。_
DOM-XMLHttpRequestオブジェクト
XMLHttpRequestオブジェクトは、Webページのクライアント側とサーバー側の間の媒体を確立します。これは、JavaScript、JScript、VBScript、およびその他のWebブラウザーなどの多くのスクリプト言語がXMLデータを転送および操作するために使用できます。
XMLHttpRequestオブジェクトを使用すると、ページ全体をリロードせずにWebページの一部を更新し、ページのロード後にサーバーにデータを要求および受信し、データをサーバーに送信できます。
構文
XMLHttpRequestオブジェクトは次のようにインスタンス化することができます-
xmlhttp = new XMLHttpRequest();IE5およびIE6を含むすべてのブラウザを処理するには、ブラウザが以下のようにXMLHttpRequestオブジェクトをサポートしているかどうかを確認してください-
if(window.XMLHttpRequest)//for Firefox, IE7+, Opera, Safari, ... {
xmlHttp = new XMLHttpRequest();
} else if(window.ActiveXObject)//for Internet Explorer 5 or 6 {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}XMLHttpRequestオブジェクトを使用してXMLファイルをロードする例は、リンクを参照できます：/dom/xml_dom_loading [ここ]
方法
次の表は、XMLHttpRequestオブジェクトのメソッドを示しています-
| S.No. | Method & Description |
|---|---|
| 1 |
abort() 行われた現在の要求を終了します。 |
| 2 |
getAllResponseHeaders() すべての応答ヘッダーを文字列として返します。応答が受信されていない場合はnullを返します。 |
| 3 |
getResponseHeader() 指定されたヘッダーのテキストを含む文字列を返します。応答がまだ受信されていない場合、または応答にヘッダーが存在しない場合はnullを返します。 |
| 4 |
open(method,url,async,uname,pswd) サーバーに要求を送信するために、Sendメソッドと組み合わせて使用されます。 オープンメソッドは、次のパラメータを指定します-
|
| 5 |
send(string) Openメソッドと組み合わせて機能するリクエストを送信するために使用されます。 |
| 6 |
setRequestHeader() ヘッダーには、リクエストの送信先のラベル/値のペアが含まれます。 |
属性
次の表は、XMLHttpRequestオブジェクトの属性を示しています-
| S.No. | Attribute & Description |
|---|---|
| 1 |
onreadystatechange これは、状態が変化するたびに設定されるイベントベースのプロパティです。 |
| 2 |
readyState これは、XMLHttpRequestオブジェクトの現在の状態を説明しています。 readyStateプロパティの5つの可能な状態があります-
|
| 3 |
responseText このプロパティは、サーバーからの応答がテキストファイルである場合に使用されます。 |
| 4 |
responseXML このプロパティは、サーバーからの応答がXMLファイルである場合に使用されます。 |
| 5 |
status Httpリクエストオブジェクトのステータスを数値で示します。 たとえば、「404」または「200」。 |
| 6 |
statusText Http要求オブジェクトのステータスを文字列として提供します。 たとえば、「見つかりません」または「OK」。 |
例
_node.xml_の内容は以下のとおりです-
<?xml version = "1.0"?>
<Company>
<Employee category = "Technical">
<FirstName>Tanmay</FirstName>
<LastName>Patil</LastName>
<ContactNo>1234567890</ContactNo>
<Email>[email protected]</Email>
</Employee>
<Employee category = "Non-Technical">
<FirstName>Taniya</FirstName>
<LastName>Mishra</LastName>
<ContactNo>1234667898</ContactNo>
<Email>[email protected]</Email>
</Employee>
<Employee category = "Management">
<FirstName>Tanisha</FirstName>
<LastName>Sharma</LastName>
<ContactNo>1234562350</ContactNo>
<Email>[email protected]</Email>
</Employee>
</Company>リソースファイルの特定の情報を取得する
次の例は、メソッド_getResponseHeader（）_およびプロパティ_readState_を使用して、リソースファイルの特定の情報を取得する方法を示しています。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "content-type" content = "text/html; charset = iso-8859-2"/>
<script>
function loadXMLDoc() {
var xmlHttp = null;
if(window.XMLHttpRequest)//for Firefox, IE7+, Opera, Safari, ... {
xmlHttp = new XMLHttpRequest();
}
else if(window.ActiveXObject)//for Internet Explorer 5 or 6 {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlHttp;
}
function makerequest(serverPage, myDiv) {
var request = loadXMLDoc();
request.open("GET", serverPage);
request.send(null);
request.onreadystatechange = function() {
if (request.readyState == 4) {
document.getElementById(myDiv).innerHTML = request.getResponseHeader("Content-length");
}
}
}
</script>
</head>
<body>
<button type = "button" onclick="makerequest('/dom/node.xml', 'ID')">Click me to get the specific ResponseHeader</button>
<div id = "ID">Specific header information is returned.</div>
</body>
</html>実行
このファイルを_elementattribute_removeAttributeNS_としてサーバーパスに保存します（このファイルとnode_ns.xmlはサーバーの同じパスにある必要があります）。 次のように出力を取得します-
Before removing the attributeNS: en
After removing the attributeNS: nullリソースファイルのヘッダー情報を取得する
次の例は、プロパティ readyState を使用するメソッド getAllResponseHeaders（） を使用して、リソースファイルのヘッダー情報を取得する方法を示しています。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2"/>
<script>
function loadXMLDoc() {
var xmlHttp = null;
if(window.XMLHttpRequest)//for Firefox, IE7+, Opera, Safari, ... {
xmlHttp = new XMLHttpRequest();
} else if(window.ActiveXObject)// for Internet Explorer 5 or 6 {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlHttp;
}
function makerequest(serverPage, myDiv) {
var request = loadXMLDoc();
request.open("GET", serverPage);
request.send(null);
request.onreadystatechange = function() {
if (request.readyState == 4) {
document.getElementById(myDiv).innerHTML = request.getAllResponseHeaders();
}
}
}
</script>
</head>
<body>
<button type = "button" onclick = "makerequest('/dom/node.xml', 'ID')">
Click me to load the AllResponseHeaders</button>
<div id = "ID"></div>
</body>
</html>実行
このファイルを_http_allheaderl_としてサーバーパスに保存します（このファイルとnode.xmlはサーバーの同じパスにある必要があります）。 次のように出力を取得します（ブラウザによって異なります）-
Date: Sat, 27 Sep 2014 07:48:07 GMT Server: Apache Last-Modified:
Wed, 03 Sep 2014 06:35:30 GMT Etag: "464bf9-2af-50223713b8a60" Accept-Ranges: bytes Vary: Accept-Encoding,User-Agent
Content-Encoding: gzip Content-Length: 256 Content-Type: text/xmlDOM-DOMExceptionオブジェクト
_DOMException_は、メソッドまたはプロパティが使用されるときに発生する異常なイベントを表します。
プロパティ
以下の表に、DOMExceptionオブジェクトのプロパティを示します
| S.No. | Property & Description |
|---|---|
| 1 |
name エラー定数に関連付けられた文字列の1つを含むDOMStringを返します（下の表を参照）。 |
エラーの種類
| S.No. | Type & Description |
|---|---|
| 1 |
IndexSizeError インデックスが許容範囲内にありません。 たとえば、これはRangeオブジェクトによってスローされます。 （レガシーコード値：1およびレガシー定数名：INDEX_SIZE_ERR） |
| 2 |
HierarchyRequestError ノードツリー階層が正しくありません。 （レガシーコード値：3およびレガシー定数名：HIERARCHY_REQUEST_ERR） |
| 3 |
WrongDocumentError オブジェクトが間違ったドキュメントにあります。 （レガシーコード値：4およびレガシー定数名：WRONG_DOCUMENT_ERR） |
| 4 |
InvalidCharacterError 文字列に無効な文字が含まれています。 （レガシーコード値：5およびレガシー定数名：INVALID_CHARACTER_ERR） |
| 5 |
NoModificationAllowedError オブジェクトは変更できません。 （レガシーコード値：7およびレガシー定数名：NO_MODIFICATION_ALLOWED_ERR） |
| 6 |
NotFoundError ここにオブジェクトが見つかりません。 （レガシーコード値：8およびレガシー定数名：NOT_FOUND_ERR） |
| 7 |
NotSupportedError 操作はサポートされていません。 （レガシーコード値：9およびレガシー定数名：NOT_SUPPORTED_ERR） |
| 8 |
InvalidStateError オブジェクトは無効な状態です。 （レガシーコード値：11およびレガシー定数名：INVALID_STATE_ERR） |
| 9 |
SyntaxError 文字列が予期されたパターンと一致しませんでした。 （レガシーコード値：12およびレガシー定数名：SYNTAX_ERR） |
| 10 |
InvalidModificationError この方法ではオブジェクトを変更できません。 （レガシーコード値：13およびレガシー定数名：INVALID_MODIFICATION_ERR） |
| 11 |
NamespaceError この操作は、XMLのネームスペースでは許可されていません。 （レガシーコード値：14およびレガシー定数名：NAMESPACE_ERR） |
| 12 |
InvalidAccessError オブジェクトは、操作または引数をサポートしていません。 （レガシーコード値：15およびレガシー定数名：INVALID_ACCESS_ERR） |
| 13 |
TypeMismatchError オブジェクトのタイプが予期されたタイプと一致しません。 （レガシーコード値：17およびレガシー定数名：TYPE_MISMATCH_ERR）この値は廃止され、この値を持つDOMExceptionの代わりにJavaScript TypeError例外が発生するようになりました。 |
| 14 |
SecurityError 操作は安全ではありません。 （レガシーコード値：18およびレガシー定数名：SECURITY_ERR） |
| 15 |
NetworkError ネットワークエラーが発生しました。 （レガシーコード値：19およびレガシー定数名：NETWORK_ERR） |
| 16 |
AbortError 操作は中止されました。 （レガシーコード値：20およびレガシー定数名：ABORT_ERR） |
| 17 |
URLMismatchError 指定されたURLは別のURLと一致しません。 （レガシーコード値：21およびレガシー定数名：URL_MISMATCH_ERR） |
| 18 |
QuotaExceededError クォータを超えました。 （レガシーコード値：22およびレガシー定数名：QUOTA_EXCEEDED_ERR） |
| 19 |
TimeoutError 操作がタイムアウトしました。 （レガシーコード値：23およびレガシー定数名：TIMEOUT_ERR） |
| 20 |
InvalidNodeTypeError ノードが正しくないか、この操作の祖先が正しくありません。 （レガシーコード値：24およびレガシー定数名：INVALID_NODE_TYPE_ERR） |
| 21 |
DataCloneError オブジェクトを複製できません。 （レガシーコード値：25およびレガシー定数名：DATA_CLONE_ERR） |
| 22 |
EncodingError エンコードまたはデコードであるエンコード操作が失敗しました（レガシーコード値および定数名なし）。 |
| 23 |
NotReadableError 入出力読み取り操作が失敗しました（レガシーコード値と定数名はありません）。 |
例
次の例は、整形式でないXMLドキュメントを使用するとDOMExceptionが発生する方法を示しています。
_error.xml_の内容は以下の通りです-
<?xml version = "1.0" encoding = "UTF-8" standalone = "no" ?>
<Company id = "companyid">
<Employee category = "Technical" id = "firstelement" type = "text/html">
<FirstName>Tanmay</first>
<LastName>Patil</LastName>
<ContactNo>1234567890</ContactNo>
<Email>[email protected]</Email>
</Employee>
</Company>次の例は、_name_属性の使用方法を示しています-
<html>
<head>
<script>
function loadXMLDoc(filename) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else//code for IE5 and IE6 {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",filename,false);
xhttp.send();
return xhttp.responseXML;
}
</script>
</head>
<body>
<script>
try {
xmlDoc = loadXMLDoc("/dom/error.xml");
var node = xmlDoc.getElementsByTagName("to").item(0);
var refnode = node.nextSibling;
var newnode = xmlDoc.createTextNode('That is why you fail.');
node.insertBefore(newnode, refnode);
} catch(err) {
document.write(err.name);
}
</script>
</body>
</html>実行
このファイルを_domexcption_namel_としてサーバーパスに保存します（このファイルとerror.xmlはサーバーの同じパスにある必要があります）。 次のように出力を取得します-
TypeError
