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てなに?
Elementとは日本語で要素といいますまたは、タグといいます。
結局のとこ Elementてなに?
Elementは HTMLで記述する決まりに沿って書いた塊のことです
知ってる Element(タグ )を教えて下さい!
結局のとこ Elementてなに?
htmlタグ、 headタグ、 bodyタグ・・・
結局のとこ Elementてなに?
とりあえず、タグはいっぱいありますよねこれが Elementです
しかし、このままでは HTMLの勉強です
結局のとこ Elementてなに?
したいのは JavaScriptの勉強ですよね
わかってます
結局のとこ Elementてなに?
なにが好きで HTMLを解説しているのか
結局のとこ Elementてなに?
理由は、 JavaScriptを最大限に活用するにはHTMLは切り離せない関係だからです
Elementの種類
Elementの種類
先ほどのタグ名ではないですよ?
Elementの種類
ルートエレメント
親エレメント
子エレメント
どれか聞いたことある?
Elementの種類
ルート要素
すべての要素を内包する唯一無二の存在開始タグは文書の最初終了タグは文章の最後
htmlタグのこと
Elementの種類
親エレメント
ある要素を内包する上位の要素bodyダグより上にある htmlタグ
Elementの種類
子エレメント
ある要素が内包している下位の要素htmlタグの中にある bodyタグ
Elementの種類
つまり・・・
Elementの種類
ルートエレメント
親エレメント
子エレメント
Elementの種類
これで、ひと通りの Elementについて理解できたでしょうか?
Elementの取得方法
Elementが理解できた前提でElementの取得する手段を紹介します
分からない人は今のうちに疑問をぶつけてね
Elementの取得方法
内容としては、前回とかぶる部分がありますが
より詳細に紹介していきます
Elementの取得方法
では、 Elementを取得したい
そんな時になにが必要ですか?
Elementの取得方法
とてもイメージしやすいのはCSSのセレクターでしょうか
Elementの取得方法
CSSのセレクターを御存知ですか?
Elementの取得方法#id { background: #ffffff;}.class { background: #000000;}body { background: #888888;}
Elementの取得方法#id { background: #ffffff;}.class { background: #000000;}body { background: #888888;}
これですね
Elementの取得方法
ようは、 Elementを見分ける方法
それさえ理解できれば Elementの取得は容易です
Elementの取得方法
Element(要素 )の属性としてかく
idや classについて
Elementの取得方法
idや classの使い分けをご存知?
Elementの取得方法
id
個体識別、利用者識別、およびそのための符号( Identification)
Wikipediaより引用
Elementの取得方法
class
科目、分類などを表すWikipediaより引用
Elementの取得方法
idと classを使い分けることで、ひとつだけを識別したり
いくつかまとめて識別したりできる
Elementの取得方法
つまり、単体で取得できる複数で取得できる
という事ができるわけですね
Elementの取得方法
あとは、英語についてすこし学ぶことで
Elementを取得ができます
Elementの取得方法
idによって、 Elementを取得
Elementの取得方法
get Element by id
Elementの取得方法
getElementById
キャメルケースという方法をつかい最初以外の単語の先頭を大文字にして
一つ呪文にします
Elementの取得方法
getElementById(“id”);
あとは、 idをこのように括弧で与えてあげると
取得ができますおめでとうございます
Elementの取得方法
idでの取得は解説した通り単体で取得するためにつかいます
Elementの取得方法
では、複数を一度に取得する場合は?
Elementの取得方法
classやタグ名html5では一部非推奨となった nameなどで
取得することができますね
Elementの取得方法
では、複数取得する場合の呪文は?
Elementの取得方法
複数取得
これが大切な言葉ですね学生時代にならった複数形のルールは?
Elementの取得方法
get Elements by class
Elementの取得方法
getElementsByClassName
同じように呪文にしますが Nameという言葉が足されるルールがあります
これは今後で解説
Elementの取得方法
getElementsByTagName
タグ名はこんなかんじです
Elementの取得方法
あとは、 id同じようにclassやタグ名を括弧に入れて指定します
簡単ですね、おめでとうございます
getElement(s)ってみる
取得のルールが理解できたところで実際にコードを書いてみます
areYouReady?
getElement(s)ってみる
JavaScriptのルール
getElement(s)ってみる
Elementを取得する JavaScriptを実行する場所より以前に
取得する対象が記述される必要があります
getElement(s)ってみる
意味不明?
はい、すいません
getElement(s)ってみる
HTML
取得したい Element
取得する JavaScript
getElement(s)ってみる
では、実際の動作をみてください
getElement_error.htmlgetElement_success.html
getElement_id.htmlgetElement_class.html
getElement(s)ってみる
ここまで理解できたのであれば
あとは Elementを自由に扱えるようになれば最高です
getElement(s)ってみる
次回は、イベント (Event)
ユーザー操作の根幹を理解します
undefined in getElement(s)
参加いただきありがとうございました