読了: 約 2 分
JavaScriptでつまづいた初歩的な事から書いておこうとおもいます。
随時更新していきます。
アイキャッチ画像をオライリーのサイを象にして、無駄に加工してみました。
Fireworksで簡単に出来ますので試してみてください。
要望があれば記事に書きます笑
それではJavaScriptの仕様でつまづいた箇所のメモを書いていきます。
innerTextとinnerHTML
innerTextはある文字列
innerHTMLはタグの中のエレメントを変える際に用いますが、
他のサイトはidで教えている場合が多く、idじゃないと取れないのか？と詰まっていたのでメモしておきます。
JavaScript（だけ？）かはわかりませんが、getElementsByTagNameだと同一ページ内の他の同一要素と混同してしまうようです。
例えばbody=”pageHome”というページがあったと、そのh1要素のテキストを変換したいとします。
h1要素はそのページにh1をひとつしか書きません（HTML5は異なりますが。）
しかし、
document.getElementsByTagName("h1").innerText = "文字列変更";
としても実行できません。
JavaScriptがHTMLソース内にh1が幾つあるのかを自動的に判別することができないからのようでです。
参考サイトはidを振って明示的に指定しているものが多かったのですが、
私はなるべくHTMLソースをシンプルにしておきたかったので、以下の書き方で解決しました。
document.getElementsByTagName('h1')[0].interText = "ほにゃらら";
のようにですね。
試してはないですが、innerHTMLなどもそうだと思います。
TagNameで取得している方がおりませんでしたので、
気づきませんでしたがこのような仕様になっているのですね。
document.getElementsByTagName(‘h1’)[0]なんて一般的に書かないとは思いますが、
一応メモしておきます。
調べてる間に便利そうなサイトを見つけたのでこちらに書いておきます。笑
MozillaのHTML5,JavaScriptなどの仕様がまとまっていてためになります。
Mozilla Developer Network
参考サイト
以上ですが、他のJavaScriptサンプルなどについても見つけ次第追記していきたいと思います。