XML関係。
- 空DOM生成・パース
- あとでいいです
- Java
- PHP
- javascript
子要素、子孫要素取得・生成・追加・削除
Java
NodeList es = e.getChildNodes();
for (int i=0; i<es.getLength(); i++) {
Element child = (Element)es.item(i);
printDIV(out, child);
}
要素の生成createElementメソッド
Element htmlE = dstDoc.createElement("html");
要素の追加appendChildメソッド
dstDoc.appendChild(htmlE);
要素の削除removeChildメソッド
dstDoc.removeChild(linkE); //linkタグが除去される
public static void printDIV(PrintStream out, Element e) {
out.print("<div>");
if (e.getTagName().equals("FILE")) {
out.print(e.getAttribute("fileName"));
out.print(" <span>(");
out.print(e.getAttribute("lastModifiedDate"));
out.print(")</span>");
} else {
out.print(e.getAttribute("directoryName"));
out.print(" <span>(");
out.print(e.getAttribute("lastModifiedDate"));
out.print(")</span>");
NodeList es = e.getChildNodes();
for (int i=0; i<es.getLength(); i++) {
Element child = (Element)es.item(i);
printDIV(out, child); //自分自身のメソッドに子ノードのエレメントを取り出して渡している
}
}
out.println("</div>");
}
指定したタグ名以下の全ての子孫要素をNodeListで返します。
「枝分かれ」があった場合は名前順に当たるのが早い順(文章順)に葉ノードまで参照して次へ向かう様です。
実行したサンプル
DataStructureSampleMain,javaの(DOM課題)appendDirectorysChildメソッド内部
NodeList sysoutList = document.getElementsByTagName("DIR");
for(int i=0; i<sysoutList.getLength(); i++){
System.out.print(i);
System.out.println((Element)sysoutList.item(i));
}
実行結果
2013年07月11日
0[DIR: null]
0[DIR: null]
1[DIR: null]
0[DIR: null]
1[DIR: null]
2[DIR: null]
0[DIR: null]
1[DIR: null]
2[DIR: null]
PHP
createElementメソッドによりxmlタグのような形で要素の作成が可能。
このメソッドに二つ目の要素を書くとテキストノードの様に処理される。
appendChildメソッドで要素の追加を行うことが出来る。
その他のメソッドの細かい説明はほかの項目で。
実行サンプル
<?php
$dom = new DOMDocument('1.0','UTF-8'); //ドキュメントを新しく作成
$element = $dom->createElement('test','This is the root element'); //新要素に属性を付与してテキストも追加
$dom->appendChild($element); //ドキュメントに子ノードを追加
echo $dom->saveXML(); //DOM表現からXMLドキュメントを作成
?>
javascript
※javascriptでのXMLのDOM化にはDHTMLが非常によく使われ、そのためほぼIEでしか起動できない状況です。
子要素を取るときはJavaやphp同様にすることが出来ます。
XML部分
<?xml version="1.0" encoding="shift_jis"?>
<会員データ>
<氏名>伸縮 次郎</氏名>
<住所>大阪</住所>
</会員データ>
HTML部分
<script language="JavaScript">
function Test(){
Docm = new ActiveXObject('microsoft.XMLDOM'); //この関数はIEにのみ対応しています。
Docm.async = false; //XMLの読み込み終了まで処理を待ちます。
Docm.load('samp01.xml');
var string ="";
string = "samp01.xmlルートノード名:"+Docm.documentElement.nodeName+"<br>"; //ルートノードを取る。
if(Docm.documentElement.hasChildNodes()) //子ノードを持っていたら
{
var i = 0;
var n_num = Docm.documentElement.childNodes.length; //ルートについている子ノードの数
while(i < n_num){
string += Docm.documentElement.childNodes.item(i).text += " "; //子ノードのテキストを取る。
i++;
}
}
document.write(string);
}
</script>
function LoopChilds(target){
var childs=target.childNodes;
if(childs.length != 0){
for(var i=0;i<childs.length;i++){
result += childs(i).nodeName + "::" + childs(i).nodeValue+"<br>";
var nextChilds = childs(i).childNodes;
if(nextChilds.length != 0)LoopChilds(childs(i));
}
}
return result;
}
JavascriptでXMLファイルを指定しなかった場合、htmlファイル自信を参照しようとします。
<script type="text/javascript">
function addElement() {
var element = document.createElement('div'); //要素を作成
element.id = "id"; //idを使うことでエレメントをノードの様に扱うことが可能です。
element.innerHTML = "hogehoge"; //コメント部分を記入
element.style.backgroundColor = 'red'; //背景を指定
var objBody = document.getElementsByTagName("body").item(0); //「body」と付いた最初のタグを指します
objBody.appendChild(element); //指定したノードに要素を追加します。
// body要素にdivエレメントを追加
}
</script>
<button onclick="addElement()">要素を追加</button> <!-- <div id="id">hogehoge</div> がhtml上出力 -->
element.removeChildメソッドを使用します。
※getElementsByTagNameからの指定はできないようです…
function removeElement(){
var element = document.getElementById("id");
element.removeChild(element.childNodes.item(0));
}
//<button onclick="removeElement()">要素を削除</button>などつけて実行
親要素追加
ドキュメントの作成についてここに記述しておきます。
Java
ドキュメント作成
DocumentBuilderFactory dbfFactory = DocumentBuilderFactory.newInstance();
DocumentBuilder docbuilder = dbfFactory.newDocumentBuilder();
Document document = docbuilder.newDocument();
- これらのクラスはスレッド一つあたり一つのインスタンスになることが推奨されています。
属性取得・更新・削除
Java
属性の追加を行うにはsetAttributeメソッド
Element link = document.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("type", "text/css");
link.setAttribute("href", "divTestCss.css");
head.appendChild(link);
属性の削除を行うにはremoveAttributeメソッド
another.setAttribute("lastModifiedDate", sdf1.format(new Date(files1[j].lastModified())));
//another.removeAttribute("lastModifiedDate");
属性の取得を行うにはgetAttributeメソッド
out.print(e.getAttribute("fileName"));
PHP
createAttributeメソッドとvalue指定を行える。
しかしsetAttributeも使えるのでこちらを使ったほうが早い。
$domElement = $domDocument->createElement('div','dirName');
$domAttribute = $domDocument->createAttribute('day'); //属性名のみ作成
$domAttribute->value = 'daypass'; //属性値を設定
$domElement->setAttribute("align","left"); //属性値と属性名を設定。
$domElement->appendChild($domAttribute);
$domDocument->appendChild($domElement);
removeAttributeメソッド
更新は一旦削除して追加
$domElement->setAttribute("align","left");
$domElement->removeAttribute("align");
javascript
<a id="sample" rel="test">sampleLink</a><br>
<script type="text/javascript">
function findElement(){
var element = document.getElementById("sample");
element.removeAttribute("rel"); //属性を削除する
alert("a タグの rel 属性:"+element.getAttribute("rel"));
}
function findElement2(){
var element = document.getElementById("sample");
element.setAttribute("rel","hoge"); //属性の値を設定する
alert("a タグの rel 属性:"+element.getAttribute("rel"));
}
</script>
<button onclick="findElement()">aタグの属性を削除</button>
<button onclick="findElement2()">aタグの属性をhogeに</button>
文字列データ取得・生成・追加・削除
Java
文字列をxmlタグ内に出力を行うにはcreateTextNodeメソッド
divE.appendChild(dstDoc.createTextNode(e.getAttribute("fileName") + " "));
その他
Java
- 要素の削除、追加についてTextノード以外にも応用できる方法
removeChildメソッドとreplaceChildメソッド
Element body = document.createElement("body");
root.appendChild(body);
body.appendChild(document.createTextNode("本文"));
Element bulk = document.createElement("使わない");
body.appendChild(bulk);
//body.removeChild(bulk); //bulk要素を削除するスレッド
Element dir = document.createElement("div");
dir.appendChild(document.createTextNode("dirxxx"));
body.replaceChild(dir, bulk); //bulk要素とdir要素を交換
PHP
メモの様な
PHPで実行できたサンプル
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>Sample</title>
<script type="text/javascript"><!--
function create() {
var divObj = document.getElementById("pBox");
var tNode = document.createTextNode("Sample "); //テキストノードの作成
divObj.appendChild(tNode); //(テキスト)ノードの追加
}
// --></script>
</head>
<body bgcolor="#fffff0">
<h1>createTextNode</h1>
<form>
<input type="button" id="myButton" value="Click" onClick="create()">
</form>
<div id="pBox"></div>
</body>
</html>
最終更新:2013年12月17日 14:36