どうも。JavaScriptも駆け出しの@yasumohaです。
前回の記事でHTMLドキュメントの各要素を取得できるようになりました。
今回は、取得した要素に含まれる文字や属性を参照したり変更してみたいと思います。
まずは対象となるHTMLドキュメント。
そしてここから属性がid1の要素を取得します。
[js] element = document.getElementByID(“id1”); [/js]
このelementをあれこれいじってみたいと思います。
要素内に含まれる文字を参照する
要素が含む文字を参照するには以下のメソッドがあります。
[js]
str = element.innerText;
str = element.innerHTML;
str = element.firstChild.nodeValue;
[/js]
これらのメソッドを実行すると、strには「テストですよ」が設定されます。
文字を取得するだけで3つもメソッドがあるのはIE独自、とかW3C DOM仕様にはない、といった大人の事情があるみたいです。
使う側としてはまとめてほしいところですよ。
要素の属性を参照する
要素には属性というものあります。参照方法はこちら。
ここではID属性を参照しています。
[js]val = element.id;
val = element.getAttribute(“ID”);
val = element.getAttributeNode(“ID”).value;
val = element.getAttributeNode(“ID”).nodeValue;
val = element.attributes.getNamedItem(“ID”).value;
val = element.attributes.getNamedItem(“ID”).nodeValue;
[/js]
先頭のメソッド以外で引数として指定した”ID”という文字列は、小文字で”id”としても問題ないようです。
ということは、ID属性の値（ここではid1）ではなく、あくまでID属性を指定していることになりますね。
紛らわしいな…
要素の属性値を設定する
属性値は以下のように設定可能です。
[js]
element.id = data;
element.setAttribute(“ID”, data);
element.getAttributeNode(“ID”).value = data;
element.attributes.getNamedItem(“ID”).value = data;
element.attributes.getNamedItem(“ID”).nodeValue = data;
element.setAttributeNode(atr);
[/js]
setAttribute()の引数atrはcreateAttribute()で作成した属性ノードのことです。
属性ノードは名前(nodeName)と値(nodeValue)で構成されています。
上記のメソッドで設定しているものですね。
なお、setAttribute()は設定する要素の属性が既にある場合は上書きし、ない場合は属性が新たに追加されます。
要素を作る、追加する
要素を作る、追加するには以下のメソッドが使えます。
[js]
document.createElement(tagName);
element.appendChild(newElement);
[/js]
createしてappendという流れとなりますわ。
まとめ
今回の記事で要素やそれに含まれる属性のJavaScriptによる制御方法について学ぶことができました。
まだまだ入り口の入り口といったところです。
これからも継続して学習を進めていきたいと思います。
それでは！
コメント