undefined in getElement(s)

undefinedin.net2015/6/11 wrote by ironiqu

undefined in

今回は、 Elementの取得を覚えます

今日のアジェンダ

1.前回の復習2.結局のとこ Elementってなに？3. Elementの種類4. Elementの取得方法5. getElement(s)ってみる

60分ほどおつきあいください

前回の復習

前回について何か覚えてる方！

前回の復習

JavaScriptを使って DOM操作の手法を紹介

前回の復習

やり方やコピー＆ペーストでの実行をしてもらいました

前回の復習

実際に動作する環境を目の当たりしてその内容を更に分岐させ掘り下げる！

前回の復習

今回は、その準備としての段階Elementの取得を覚えていきます

結局のとこ Elementてなに？

Elementについては DOMとおててをつなぐ言葉として前回紹介しまし

た。


Elementについて何か知っている方いますか？


Elementとは日本語で要素といいますまたは、タグといいます。


Elementは HTMLで記述する決まりに沿って書いた塊のことです

知ってる Element(タグ )を教えて下さい！


htmlタグ、 headタグ、 bodyタグ・・・


とりあえず、タグはいっぱいありますよねこれが Elementです

しかし、このままでは HTMLの勉強です


したいのは JavaScriptの勉強ですよね

わかってます


なにが好きで HTMLを解説しているのか


理由は、 JavaScriptを最大限に活用するにはHTMLは切り離せない関係だからです

Elementの種類

Elementの種類

先ほどのタグ名ではないですよ？

Elementの種類

ルートエレメント

親エレメント

子エレメント

どれか聞いたことある？

Elementの種類

ルート要素

すべての要素を内包する唯一無二の存在開始タグは文書の最初終了タグは文章の最後

htmlタグのこと

Elementの種類

親エレメント

ある要素を内包する上位の要素bodyダグより上にある htmlタグ

Elementの種類

子エレメント

ある要素が内包している下位の要素htmlタグの中にある bodyタグ

Elementの種類

つまり・・・

Elementの種類

ルートエレメント

親エレメント

子エレメント

Elementの種類

これで、ひと通りの Elementについて理解できたでしょうか？

Elementの取得方法

Elementが理解できた前提でElementの取得する手段を紹介します

分からない人は今のうちに疑問をぶつけてね


内容としては、前回とかぶる部分がありますが

より詳細に紹介していきます


では、 Elementを取得したい

そんな時になにが必要ですか？


とてもイメージしやすいのはCSSのセレクターでしょうか


CSSのセレクターを御存知ですか？

Elementの取得方法#id { background: #ffffff;}.class { background: #000000;}body { background: #888888;}

Elementの取得方法#id { background: #ffffff;}.class { background: #000000;}body { background: #888888;}

これですね


ようは、 Elementを見分ける方法

それさえ理解できれば Elementの取得は容易です


Element(要素 )の属性としてかく

idや classについて


idや classの使い分けをご存知？


id

個体識別、利用者識別、およびそのための符号（ Identification）

Wikipediaより引用


class

科目、分類などを表すWikipediaより引用


idと classを使い分けることで、ひとつだけを識別したり

いくつかまとめて識別したりできる


つまり、単体で取得できる複数で取得できる

という事ができるわけですね


あとは、英語についてすこし学ぶことで

Elementを取得ができます


idによって、 Elementを取得


get Element by id


getElementById

キャメルケースという方法をつかい最初以外の単語の先頭を大文字にして

一つ呪文にします


getElementById(“id”);

あとは、 idをこのように括弧で与えてあげると

取得ができますおめでとうございます


idでの取得は解説した通り単体で取得するためにつかいます


では、複数を一度に取得する場合は？


classやタグ名html5では一部非推奨となった nameなどで

取得することができますね


では、複数取得する場合の呪文は？


複数取得

これが大切な言葉ですね学生時代にならった複数形のルールは？


get Elements by class


getElementsByClassName

同じように呪文にしますが Nameという言葉が足されるルールがあります

これは今後で解説


getElementsByTagName

タグ名はこんなかんじです


あとは、 id同じようにclassやタグ名を括弧に入れて指定します

簡単ですね、おめでとうございます

getElement(s)ってみる

取得のルールが理解できたところで実際にコードを書いてみます

areYouReady?


JavaScriptのルール


Elementを取得する JavaScriptを実行する場所より以前に

取得する対象が記述される必要があります


意味不明？

はい、すいません


HTML

取得したい Element

取得する JavaScript


では、実際の動作をみてください

getElement_error.htmlgetElement_success.html

getElement_id.htmlgetElement_class.html


ここまで理解できたのであれば

あとは Elementを自由に扱えるようになれば最高です


次回は、イベント (Event)

ユーザー操作の根幹を理解します

undefined in getElement(s)

参加いただきありがとうございました

undefined in getElement(s)

Technology