第 8 章 DOM 67
8.6 要素の追加と削除
8.6.1 要素オブジェクトの生成
この節では、SVG文書に要素を追加したり削除したりする方法について説明したいと思って いるわけですが、その説明を始める前に、まず、新しい要素オブジェクトを生成する方法につい て説明しておきたいと思います。
文書オブジェクトは、createElementNSというメソッドを持っています。これは、新しい要 素オブジェクトを生成するメソッドです。
createElementNSは、2個の引数を受け取ります。1個目は名前空間名で、2個目は要素型名
です。このメソッドは、1個目の引数で指定された名前空間の中で、2個目の引数で指定された要 素型の要素をあらわす要素オブジェクトを生成して、それを戻り値として返します。たとえば、
SVGという変数にSVGの名前空間名が設定されているとするとき、
document.createElementNS(SVG, "rect")
という式でcreateElementNSを呼び出すことによって、SVGのrect要素をあらわす要素オブ ジェクトを生成することができます。
createElementNSで新しく生成された直後の要素オブジェクトは、属性が何も設定されてい
ない状態になっています。要素オブジェクトに対して属性を設定したいときは、第8.2節で紹介
したsetAttributeNSを使います。たとえば、
ele.setAttributeNS(null, "width", "30")
という式を評価することによって、eleという変数に設定されている要素オブジェクトのwidth という属性に対して30という属性値を設定することができます。
8.6.2 要素の追加
要素オブジェクトは、appendChildというメソッドを持っています。これは、要素に対してそ の子供を追加するメソッドです。このメソッドは、要素オブジェクトを引数として受け取って、
それがあらわしている要素を最後の子供として要素に追加します。たとえば、aとbが要素オブ ジェクトだとするとき、
a.appendChild(b);
という式文を実行することによって、aに対して、その最後の子供としてbを追加することがで きます。
次のSVG文書は、長方形をクリックすると、ランダムな半径と色を持つ円をランダムな位置 に追加します。
SVG文書の例 append.svg
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="320pt" height="224pt" viewBox="0 0 100 70"
xmlns="http://www.w3.org/2000/svg">
8.6. 要素の追加と削除 75
<g fill="mediumslateblue" onclick="appendCircle()">
<rect x="10" y="55" width="40" height="10"/>
<text x="55" y="63" font-size="12">append</text>
</g>
<script type="text/ecmascript"><![CDATA[
var SVG = "http://www.w3.org/2000/svg";
var rootobj = document.documentElement;
function randomInt(range) {
return Math.floor(Math.random()*range);
}
function randomColor() {
return "rgb(" + randomInt(255) + ","
+ randomInt(255) + "," + randomInt(255) + ")";
}
function appendCircle() {
var circle = document.createElementNS(SVG, "circle");
circle.setAttributeNS(null, "cx", randomInt(100));
circle.setAttributeNS(null, "cy", randomInt(45));
circle.setAttributeNS(null, "r", randomInt(8)+2);
circle.setAttributeNS(null, "fill", randomColor());
rootobj.appendChild(circle);
]]></script>}
</svg>
このSVG文書のスクリプトの中で使われているMath.randomというのは、0から1までの範 囲で擬似乱数を発生させるメソッドで、発生させた乱数を戻り値として返します。
また、Math.floorというのは、引数として受け取った数値を超えない最大の整数を戻り値と
して返すメソッドです。
8.6.3 テキストオブジェクトの生成
文書オブジェクトは、createTextNodeというメソッドを持っています。これは、新しいテキ ストオブジェクトを生成するメソッドです。このメソッドは、テキストを引数として受け取って、
そのテキストが設定されたテキストオブジェクトを生成して、それを戻り値として返します。た とえば、
document.createTextNode("eris")
という式を評価することによって、erisというテキストが設定されたテキストオブジェクトを 生成することができます。
テキストオブジェクトを要素オブジェクトの子供として追加したいときは、要素オブジェクト を追加する場合と同じように、要素オブジェクトが持っているappendChildを呼び出して、引 数としてテキストオブジェクトを渡します。
次のSVG文書は、長方形をクリックすると、ランダムな大きさと色を持つランダムな文字を ランダムな位置に追加します。
SVG文書の例 cretext.svg
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="320pt" height="224pt" viewBox="0 0 100 70"
xmlns="http://www.w3.org/2000/svg">
<g fill="darkcyan" onclick="appendText()">
<rect x="10" y="55" width="40" height="10"/>
<text x="55" y="63" font-size="12">append</text>
</g>
<script type="text/ecmascript"><![CDATA[
var SVG = "http://www.w3.org/2000/svg";
var rootobj = document.documentElement;
function randomInt(range) {
76 第8章 DOM return Math.floor(Math.random()*range);
}
function randomChar() {
return String.fromCharCode(randomInt(93)+33);
}
function randomColor() {
return "rgb(" + randomInt(255) + ","
+ randomInt(255) + "," + randomInt(255) + ")";
}
function appendText() {
var textobj = document.createTextNode(randomChar());
var textele = document.createElementNS(SVG, "text");
textele.appendChild(textobj);
textele.setAttributeNS(null, "x", randomInt(100));
textele.setAttributeNS(null, "y", randomInt(50));
textele.setAttributeNS(null, "font-family", "serif");
textele.setAttributeNS(null, "font-size", randomInt(32)+8);
textele.setAttributeNS(null, "fill", randomColor());
rootobj.appendChild(textele);
]]></script>}
</svg>
このSVG文書のスクリプトの中で使われているString.fromCharCodeというのは、引数と して整数を受け取って、その整数を文字コードとする文字から構成される文字列を返すメソッド です。このSVG文書では引数を1個だけしか渡していませんが、引数は何個でも渡すことがで きます。たとえば、
String.fromCharCode(110, 97, 109, 97, 107, 111)
という式を評価すると、値としてnamakoという文字列が得られます。
8.6.4 要素の削除
要素オブジェクトは、removeChildというメソッドを持っています。これは、要素からその子 供を削除するメソッドです。このメソッドは、要素オブジェクトを引数として受け取って、それ があらわしている要素を削除します。たとえば、aとbが要素オブジェクトで、bがaの子供だ とするとき、
a.removeChild(b);
という式文を実行することによって、aからbを削除することができます。
次のSVG文書は、円をクリックすることによって、その円を削除することができます。
SVG文書の例 remove.svg
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="320pt" height="224pt" viewBox="0 0 100 70"
xmlns="http://www.w3.org/2000/svg">
<script type="text/ecmascript"><![CDATA[
var SVG = "http://www.w3.org/2000/svg";
var rootobj = document.documentElement;
initialize();
function removeCircle(evt) {
rootobj.removeChild(evt.target);
}
function appendCircle(cx, cy, r, fill, onclick) {
var circle = document.createElementNS(SVG, "circle");
circle.setAttributeNS(null, "cx", cx);
circle.setAttributeNS(null, "cy", cy);
8.7. DOMによるイベント処理 77