JavaScript: XML の処理
概略
XML も HTML 要素の操作とほぼ同じ感覚で処理できます。
querySelector() や createElement() などの関数を使います。
JavaScript: HTML 要素 (タグ) の処理
SVG も XML なので同じように処理できます。
svg タグ: JavaScriptサンプル
XML に CSS のスタイルをつける
- HTML5 ユーザー定義の要素を使う
- TestCSS_content_display_attribute01.html
要素の属性値を表示する。
CSS content - TestCSS_attr_svg01.html
XML の属性値を表示する。 - TestCSS_element_XML_TORCS01.html
XML に CSS でスタイルを付けるサンプル。TORCS の XML の例。
JavaScript の処理
XML の読み取り
- TestJS_XML_DOMParser1.html
DOMParser のサンプル。XML の値の読み取り。querySelector() サンプル。 - TestJS_XML_querySelector01.html
XML から querySelector() で指定した要素の textContent を取り出す。
JavaScript: document.querySelector() を使う - TestJS_XML_read_recourse1.html
XML ドキュメントのノード (要素、テキストなど) を再帰探索する。
XML の作成
- TestJS_XML_createDocument01.html
XMLDocument 作成のサンプル。 - TestJS_XML_createDocument02.html
Object を XML に出力するサンプル。Object のプロパティを属性名と属性値に出力する例。 - TestJS_XML_createDocument03.html
Object を XML に出力するサンプル。Object のプロパティを別の要素と textContent に出力する例。
XMLHttpRequest
- TestJS_XMLHttpRequest03.html
XMLHttpRequest, onload イベントのサンプル。
(追記)こちらは async, await に置き換えた方が良い。
(昔話) IE は動作対象に含めない方が良いです
(追記) 2022年頃はすでに気にせず。
IE11 の JavaScript では querySelector()
の一部の機能など動作しません。
JavaScript の処理も IE11 では重い場合があります。
自動車レースゲーム TORCS の XML データの処理の例
自動車レースゲーム TORCS- TestCSS_element_XML_TORCS01.html
XML テキストに CSS でスタイルを付ける。
HTML: ユーザー定義の要素を使う - TestJS_XML_TORCS1.html
XML の要素の値を読む。
TORCS の XML データを HTML table で編集する。
HTML: 編集可能な table の作成