JavaScript勉強会:"undefined in" 3回目、getElement(s)

1. undefinedin.net
2015/6/11 wrote by ironiqu

2. undefined in
今回は、Elementの取得を覚えます

3. 今日のアジェンダ
1. 前回の復習
2. 結局のとこElementってなに？
3. Elementの種類
4. Elementの取得方法
5. getElement(s)ってみる
60分ほどおつきあいください

4. 前回の復習
前回について何か覚えてる方！

5. 前回の復習
JavaScriptを使ってDOM操作の手法を紹介

6. 前回の復習
やり方やコピー＆ペーストでの
実行をしてもらいました

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

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

9. 結局のとこElementてなに？
ElementについてはDOMと
おててをつなぐ言葉として前回紹介しました。

10. 結局のとこElementてなに？
Elementについて
何か知っている方いますか？

11. 結局のとこElementてなに？
Elementとは日本語で要素といいます
または、タグといいます。

12. 結局のとこElementてなに？
ElementはHTMLで記述する
決まりに沿って書いた塊のことです
知ってるElement(タグ)を教えて下さい！

13. 結局のとこElementてなに？
htmlタグ、headタグ、bodyタグ・・・

14. 結局のとこElementてなに？
とりあえず、タグはいっぱいありますよね
これがElementです
しかし、このままではHTMLの勉強です

15. 結局のとこElementてなに？
したいのはJavaScriptの勉強ですよね
わかってます

16. 結局のとこElementてなに？
なにが好きでHTMLを解説しているのか

17. 結局のとこElementてなに？
理由は、JavaScriptを最大限に活用するには
HTMLは切り離せない関係だからです

18. Elementの種類
Elementの種類
先ほどのタグ名ではないですよ？

19. Elementの種類
ルートエレメント
親エレメント
子エレメント
どれか聞いたことある？

20. Elementの種類
ルート要素
すべての要素を内包する唯一無二の存在
開始タグは文書の最初
終了タグは文章の最後
htmlタグのこと

21. Elementの種類
親エレメント
ある要素を内包する上位の要素
bodyダグより上にあるhtmlタグ

22. Elementの種類
子エレメント
ある要素が内包している下位の要素
htmlタグの中にあるbodyタグ

23. Elementの種類
つまり・・・

24. Elementの種類
ルートエレメント
親エレメント
子エレメント

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

26. Elementの取得方法
Elementが理解できた前提で
Elementの取得する手段を紹介します
分からない人は今のうちに疑問をぶつけてね

27. Elementの取得方法
内容としては、前回とかぶる部分がありますが
より詳細に紹介していきます

28. Elementの取得方法
では、Elementを取得したい
そんな時になにが必要ですか？

29. Elementの取得方法
とてもイメージしやすいのは
CSSのセレクターでしょうか

30. Elementの取得方法
CSSのセレクターを御存知ですか？

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

32. Elementの取得方法
#id {
background: #ffffff;
}
.class {
background: #000000;
}
body {
background: #888888;
}
これですね

33. Elementの取得方法
ようは、Elementを見分ける方法
それさえ理解できればElementの取得は容易で
す

34. Elementの取得方法
Element(要素)の属性としてかく
idやclassについて

35. Elementの取得方法
idやclassの使い分けをご存知？

36. Elementの取得方法
id
個体識別、利用者識別、
およびそのための符号（Identification）
Wikipediaより引用

37. Elementの取得方法
class
科目、分類などを表す
Wikipediaより引用

38. Elementの取得方法
idとclassを使い分けることで、
ひとつだけを識別したり
いくつかまとめて識別したりできる

39. Elementの取得方法
つまり、
単体で取得できる
複数で取得できる
という事ができるわけですね

40. Elementの取得方法
あとは、英語についてすこし学ぶことで
Elementを取得ができます

41. Elementの取得方法
idによって、Elementを取得

42. Elementの取得方法
get Element by id

43. Elementの取得方法
getElementById
キャメルケースという方法をつかい
最初以外の単語の先頭を大文字にして
一つ呪文にします

44. Elementの取得方法
getElementById(“id”);
あとは、idをこのように括弧で与えてあげると
取得ができます
おめでとうございます

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

46. Elementの取得方法
では、複数を一度に取得する場合は？

47. Elementの取得方法
classやタグ名
html5では一部非推奨となったnameなどで
取得することができますね

48. Elementの取得方法
では、複数取得する場合の呪文は？

49. Elementの取得方法
複数取得
これが大切な言葉ですね
学生時代にならった複数形のルールは？

50. Elementの取得方法
get Elements by class

51. Elementの取得方法
getElementsByClassName
同じように呪文にしますがNameという
言葉が足されるルールがあります
これは今後で解説

52. Elementの取得方法
getElementsByTagName
タグ名はこんなかんじです

53. Elementの取得方法
あとは、id同じように
classやタグ名を括弧に入れて指定します
簡単ですね、おめでとうございます

54. getElement(s)ってみる
取得のルールが理解できたところで
実際にコードを書いてみます
areYouReady?

55. getElement(s)ってみる
JavaScriptのルール

56. getElement(s)ってみる
Elementを取得するJavaScriptを
実行する場所より以前に
取得する対象が記述される必要があります

57. getElement(s)ってみる
意味不明？
はい、すいません

58. getElement(s)ってみる
HTML
取得したいElement
取得するJavaScript

59. getElement(s)ってみる
では、実際の動作をみてください
getElement_error.html
getElement_success.html
getElement_id.html
getElement_class.html

60. getElement(s)ってみる
ここまで理解できたのであれば
あとはElementを
自由に扱えるようになれば最高です

61. getElement(s)ってみる
次回は、イベント(Event)
ユーザー操作の根幹を理解します

62. undefined in getElement(s)
参加いただきありがとうございました