苦学楽学塾 ホームページ
最終更新日：2025年1月4日
HTML(タグに関してなど、詳細はこちらを参照、クラス・IDについては、CSSを参照)で記述されたウェブサイトをブラウザが画面に表示させるとき、ブラウザは、HTML記述を読み込んでDOM(Document Object Model)というツリー構造を作って、画面を構成していきます。表示は、CSS(Cascading Style Sheet)記述によって色、文字フォント、画面サイズ、レイアウトなどの装飾を行います。
JavaScriptはHTMLで記述されたウェブサイトの操作を、DOMにアクセスし、ウエブサイトの情報を読み書きすることによって実現します。JavaScript上では、このDOMを、documentというオブジェクトとして扱います。オブジェクトなので、メソッドとプロパティーを持っています。これらの中には、子の要素にも継承されて、子の要素のメソッドとして使えるものがあります。documentオブジェクトの代表的なメソッドには以下のようなものがあります。
createElement(tag)
documentに新要素を作成します。
element = createElement(tag);
tagには、タグを指定します。<div>要素を作成する場合は、createElement('div')とします。生成されたelementを返します。
getElementsByClassName
classを指定して、そのclass名をもつ要素全てを配列として返します。class="abc"とした場合には、
elmarray = document.getElementsByClassName("abc");
要素を取り出す場合は、elmarray[0]，elmarray[1]などとします。このメソッドでは、class名にピリオド'.'を付けません。
getElementById
IDを指定して、最初の要素を取得します。id="abc"とした場合は、
element = document.getElementById("abc");
このメソッドではidにシャープ'#'を付けません。
getElementsByTagName
タグ名を指定して、タグ要素全てを配列として返します。<input>タグを取得するのであれば、
elmarray = document.getElementsByTagName('input');
とします。要素を取り出す場合は、elmarray[0]，elmarray[1]などとします。
querySelector
セレクタを指定して最初の要素を取得します。class="abc"としたタグを取得する場合は、
element = document.querySelector(".abc");
とします。id="abc"としたタグを取得する場合は、
element = document.querySlector("#abc");
とします。
documentオブジェクトのプロパティには以下のようなものがあります。
document.referrer 現HTML文書を呼び出したHTML文書のURLが入っています。
document.title HTML文書のタイトルが入っています。
document.URL HTML文書のURLが入っています。
【広告】 ここから広告です。ご覧の皆さまのご支援ご理解を賜りたく、よろしくお願いいたします。
【広告】 広告はここまでです。