JavaScriptのdocumentオブジェクト 初学者向け

Takkiii 94views 更新:2015年3月11日

JavaScriptのdocumentオブジェクトについて、特にAipoで使用されているメソッドやプロパティについて調べたので初学者向けに共有する。JavaScriptにおいて、ブラウザにロードされたHTML文書はdocumentオブジェクトとして表される。documentオブジェクトは文書に含まれるすべてのHTML要素へのアクセスを提供する。また、documentオブジェクトはWindowオブジェクトの一部であり、window.documentプロパティを通じてアクセスできる。

以下、Aipoで使用されているメソッドについて。
< documentオブジェクトのgetElementByIdメソッド >
・id属性の値から要素を取得し、返す
・html要素にidをつけるとidを指定してjavascriptから参照や更新を行うことができる。

< documentオブジェクトのgetElement ByClassNameメソッド >
・getElementByIdメソッドと同様、getElementByClassNameメソッドを使用することでClass名から要素を取得することができる。
なお、Aipoでは実際に下記のように使用していた。

document.getElementById('printBody').style.width=document.getElementById('print_width').value;

document.getElementById(‘printBody’)でprintBodyというIDがふってある要素にアクセスし、.style.width でスタイルのwidthにアクセス。右辺は同じくdocument.getElementById(‘print_width’).value; でprint_widthというIDがふってある要素にアクセスし、その値を取得し = で先ほどのprintBodyというIDがふってある要素のwidth(左辺で最終的にアクセスしている要素)に代入している。

参考URL: documentオブジェクトとメソッドなど

その他、自分の知らなかったメソッドやプロパティについてもまとめたので興味がある人は目を通すと良いだろう。
< schedule-detail-print.vmファイル内における条件分岐処理 >
・document.all でドキュメント内のすべてのオブジェクトにアクセス
・!= →比較演算子。式が等しくない場合。
・>= → 比較演算子。左辺が等しい又は大きい場合。
参考URL: 演算子とか

・undefined = 未定義を意味する値。グローバルオブジェクトのプロパティであり、グローバルスコープの変数。初期値はプリミティブ型のundefined。まだ値が代入されていない変数は undefined型となる。また、評価されようとしている辺陬が代入された値を持たない場合、メソッドや文はundefinedを返す。 値をreturnしなかった関数もundefinedを返す。
参考URL: undefined型について

・プリミティブ型 = ググったけどよく分からない。JavaScriptには大きく分けてオブジェクト型とプリミティブ型の2つのデータ型があるらしい。オブジェクト型は値の他にプロパティやメソッドを持つことができて一方プリミティブ型は値のみを持ちプロパティやメソッドを持つことができないらしい。実際はアクセスできるけど、それはプリミティブ型にプロパティの参照やメソッドの呼び出しがあった場合には、一時的・そして暗黙的にオブジェクト型に変換されているから参照や呼び出しができるらしい。ならばぶっちゃけ「どちらを使用しても問題ないじゃん」と思ったけどプリミティブ型のプロパティにアクセスして値を代入するとエラーは出ないけどアクセスするたびに新しいオブジェクトを生成するため値を保持することができないらしい。ならば基本的にはオブジェクト型を使用した方が都合が良いのではと思った。使い分けができるようにちゃんと身につけたいテーマではある。このテーマに関しては沢山の記事があったので時間があるときに記事を読みまくってしっかりと知識をものにしたい。
参考URL: プリミティブ型とオブジェクト型について

・.checkedプロパティ → メニュー項目の選択状態を参照するプロパティ。選択されている場合、trueを返し、そうでない場合はfalseを返す。
参考URL: checkedプロパティについて

・for文 → 繰り返しを指定するときはfor文を使用する。
参考URL:for文について

・lengthプロパティ → 文字列の長さを取得する。ちなみにプロパティへのアクセスはドット記法によるアクセスとブラケット記法によるアクセスの2パターンが存在するが基本的にはドット記法を用いるべきらしい。しかし、変数を使用してアクセスした場合、変数の値を変更すればアクセスするプロパティを変更することができるのでブラケット記法によるアクセスが有効な場合もある。
参考URL:lengthプロパティについて,プロパティへのアクセスについて

・indexOfメソッド → 対象の文字列の中に指定した文字列が含まれるかどうか検索し、含まれていた場合は最初に見つかった位置を返す。
参考URL: indexOfメソッドについて

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません