RondoRondoリズム良く回していきましょう!メニューコンテンツへ移動ホームAboutSiteMapHOME>プログラミング>[JavaScript]取得した要素を参照&変更する[JavaScript]取得した要素を参照&変更する投稿日:2012年10月24日どうも。JavaScriptも駆け出しの@yasumohaです。前回の記事でHTMLドキュメントの各要素を取得できるようになりました。今回は、取得した要素に含まれる文字や属性を参照したり変更してみたいと思います。LINKまずは対象となるHTMLドキュメント。title="testTitle">テストですよ</div>そしてここから属性がid1の要素を取得します。document.getElementByID("id1");このelementをあれこれいじってみたいと思います。まとめ要素が含む文字を参照するには以下のメソッドがあります。element.firstChild.nodeValue;これらのメソッドを実行すると、strには「テストですよ」が設定されます。DOM仕様にはない、といった大人の事情があるみたいです。使う側としてはまとめてほしいところですよ。要素の属性を参照する要素には属性というものあります。ここではID属性を参照しています。element.attributes.getNamedItem("ID").nodeValue;先頭のメソッド以外で引数として指定した”ID”という文字列は、小文字で”id”としても問題ないようです。いうことは、ID属性の値(ここではid1)ではなく、あくまでID属性を指定していることになりますね。紛らわしいな...要素の属性値を設定する属性値は以下のように設定可能です。data;element.setAttributeNode(atr);setAttribute()の引数atrはcreateAttribute()で作成した属性ノードのことです。属性ノードは名前(nodeName)と値(nodeValue)で構成されています。上記のメソッドで設定しているものですね。setAttribute()は設定する要素の属性が既にある場合は上書きし、ない場合は属性が新たに追加されます。要素を作る、追加する要素を作る、追加するには以下のメソッドが使えます。element.appendChild(newElement);12document.createElement(tagName);element.appendChild(newElement);createしてappendという流れとなりますわ。まとめ今回の記事で要素やそれに含まれる属性のJavaScriptによる制御方法について学ぶことができました。入り口の入り口といったところです。これからも継続して学習を進めていきたいと思います。百年麦芽」が新ジャンルとはいえ、侮れない美味しさでした。ショートコードプラグインを使えば、投稿画面やウィジェットでPHPが動きましたよ。iPhoneのGmailアプリがパワーアップ!複数アカウント対応。一つ注文がありますから。『第22回東京ブロガーミートアップ』でブログをマネタイズするヒントをもらってきました。LINKこのブログについてブログ名はRondo(ろんど)といいます。いったガジェットから、Evernoteやアニメ、読書までジャンルを絞らず様々なことを書いている”やすも(@yasumoha)”の個人ブログです。ホワイトを買ってみた。PD充電器をポチった。Proはワイヤレスもノイキャンも優秀でした。