dom 変更 XML JavaScript

DOM による XML の変更 (JavaScript)

DOM (Document Object Model) は JavaScript の中核であり、XML を操作する標準的な方法です。 XML (Extensible Markup Language) は、データの保存と交換に一般的に使用される形式であり、HTML の基礎です。フロントエンド開発の分野では、XML リクエストをサーバーに送信したり、AJAX 開発で XML 形式で応答を受信したりするなど、JavaScript を使用して XML を操作する必要があることがよくあります。この記事では、JavaScript の DOM を使用して XML を変更する方法に焦点を当てます。

XML 構造の概要

DOM を学習して XML を変更する前に、まず XML の基本構造を理解する必要があります。 XML は、基本的な文法単位としてタグが付いたテキストです。XML の基本構造は次のとおりです:

<?xml version="1.0" encoding="UTF-8"?>
<root>
  <element1 attribute1="value1">content1</element1>
  <element2>content2</element2>
  <element3>
    <subelement1>subcontent1</subelement1>
    <subelement2>subcontent2</subelement2>
  </element3>
</root>

このうち、XML 文書は <?xml ... ? という文で始まる必要があります。 > 、最上位要素 (ルート要素) は root と呼ばれ、他の要素は element と呼ばれます。各要素は 1 つ以上の属性 (attribute1 など) を持つことができ、属性は要素に関する説明情報を提供するために使用されます。要素には他の要素を含めることもでき、この要素の入れ子は要素階層と呼ばれます。

XML を変更する DOM の基本操作

JavaScript の DOM は XML を解析してノード ツリーに変換できるため、JavaScript を使用してこのノード ツリーを変更するコードを作成できます。

1. XML の解析

xmlstr を XML 文字列にすると、JavaScript の DOMParser を使用して解析できます:

const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlstr, "text/xml");

解析が完了しました。解析された xmlDoc を変更できます。

2. 要素値の取得

XML の要素コンテンツの場合、nodeValue 属性を通じてその値を取得できます:

const element1Value = xmlDoc.getElementsByTagName("element1")[0].childNodes[0].nodeValue;
console.log(element1Value); // "content1"

ここでusegetElementsByTagName element1 という名前の要素ノードを取得し、childNodes[0] でそのテキスト ノードを取得し、最後に nodeValue を使用してその値を取得します。

3. 属性の取得と設定

XML の要素属性の場合、getAttribute メソッドと setAttribute メソッドを使用して属性値を取得および設定できます。 . :

const attribute1Value = xmlDoc.getElementsByTagName("element1")[0].getAttribute("attribute1");
console.log(attribute1Value); // "value1"

xmlDoc.getElementsByTagName("element1")[0].setAttribute("attribute1", "newvalue");

ここでは、getAttribute を使用して、attribute1 という名前の element1 の属性値を取得し、その後、setAttribute## を使用します。 # 設定するには attribute1 の新しい値は newvalue です。属性を設定する場合は、その属性が属する要素ノードと属性名を指定する必要があることに注意してください。

4. 要素ノードの作成

createElement メソッドを使用して、XML ドキュメント内に新しい要素ノードを作成できます:

const newElement = xmlDoc.createElement("newelement");

ここで作成します。 a

newelement という名前の新しい要素ノード。

5. ノードの追加

appendChild メソッドを使用して、別のノードの子ノード リストにノードを追加できます。新しく作成した newelement

を

element1 の子ノードのリストに追加します。 6. ノードの削除

removeChild

メソッドを使用して、親ノードの子ノード リストからノードを削除できます:

const element1 = xmlDoc.getElementsByTagName("element1")[0];
element1.appendChild(newElement);

Here subelement2

は、その親ノード

element1 の子ノードのリストから削除されます。 完全なサンプル コード:

const element1 = xmlDoc.getElementsByTagName("element1")[0];
const subelement2 = xmlDoc.getElementsByTagName("subelement2")[0];
element1.removeChild(subelement2);

XML 内のノードを変更した後、完全な XML 文字列を出力するには

outerHTML

属性を使用する必要があることに注意してください。上記のコード例は、変更された XML コンテンツを出力します:

// 解析 XML
const parser = new DOMParser();
const xmlstr = `
<?xml version="1.0" encoding="UTF-8"?>
<root>
  <element1 attribute1="value1">content1</element1>
  <element2>content2</element2>
  <element3>
    <subelement1>subcontent1</subelement1>
    <subelement2>subcontent2</subelement2>
  </element3>
</root>`;
const xmlDoc = parser.parseFromString(xmlstr, "text/xml");

// 获取元素内容并修改
const element1Value = xmlDoc.getElementsByTagName("element1")[0].childNodes[0].nodeValue;
console.log(element1Value); // "content1"
xmlDoc.getElementsByTagName("element1")[0].childNodes[0].nodeValue = "newcontent1";

// 获取元素属性并修改
const attribute1Value = xmlDoc.getElementsByTagName("element1")[0].getAttribute("attribute1");
console.log(attribute1Value); // "value1"
xmlDoc.getElementsByTagName("element1")[0].setAttribute("attribute1", "newvalue");

// 创建新节点并添加
const newElement = xmlDoc.createElement("newelement");
const element2 = xmlDoc.getElementsByTagName("element2")[0];
element1.appendChild(newElement);

// 删除节点
const element1 = xmlDoc.getElementsByTagName("element1")[0];
const subelement2 = xmlDoc.getElementsByTagName("subelement2")[0];
element1.removeChild(subelement2);

console.log(xmlDoc.documentElement.outerHTML);

結論

JavaScript の DOM を使用して XML を変更すると、要素と属性を簡単に追加、削除、変更できます。 XML の構造は比較的柔軟で、複数のレベルでネストできるため、XML を変更する場合は、特定の状況に応じてノード操作を実行する必要があることに注意してください。本記事で紹介するXMLへのDOM変更の基本操作を学ぶことで、読者の皆様もJavaScriptを柔軟に活用してXMLを変更し、開発効率を向上させることができると思います。

以上がdom 変更 XML JavaScriptの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。