唯一無二のりんご
HTMLがブラウザに表示される、これをレンダリングというが、裏ではツリー構造になっていて、各要素は何と表現していいかわからないが、独立したリンゴと言える。りんごって…呆笑。
ここら辺は直感だと思う。説明しようとすると、リファレンスにあるような何を言っているかわからない意味不明状態になってしまう。いやリファレンスこそ大事で、あれがいちばん大事です。でも素人プログラマーはちょっと違う笑。
同じように見えるリンゴでも、ひとつとして同じリンゴはないっていう考え方です。木になっているリンゴでも、買ってきたリンゴでもプログラムで扱う時は別のリンゴです。買ってきたりんごを机に2つ並べる。2つ並んだリンゴはそれぞれ地球上に一つのリンゴです。あなたの家のテーブルが四角いとして、左上から右に3センチ、下に4センチに置ける1つのリンゴはこの世に1つで、そこに物理的に重複して置くことはできないってことです。ゴーストリンゴがあれば可能かもしれませんが。「ゴーストリンゴ」って何笑？
しかし、3秒後には違うりんごをそのテーブルの先ほどの座標に置くことができるかもしれませんが、プログラムではそのリンゴはそのリンゴであって、唯一無二のリンゴです。さっきから「あの、その、これ」とか多いですね笑。
いい忘れてましたが、このリンゴが「要素」をたとえています。
あなたが何を扱いたいかで、プログラム上の要素の取得方法が違います。
- この世で一つのりんごを取得したいのか？
- 買ってきたリンゴ全部をしたいのか？
- りんごを起点にして、りんごを置くテーブルを取得したいのか？
- りんごを対してのフォークを取得したいのか？
ここの出てきた、テーブルやフォークもを独立した要素です。ネットワークでいうとノードとリンクの関係とも言えます。突然出てきた「ノードとリンク！！」この要素をjavascriptのコードでメモリ上にあげるものが「documentなになに」ってやつです。
りんごには区別ができるように予めこちらで名前を付けておくこともできますし、勝手にブラウザがつけてくれてもいます。自分から名前を付ける場合のそれがHTMLの「id=””, class=””」です。
documentなになに
私は最近2つしか使ってないです。
「document.getElementById(“abc”);」と「document.querySelector(“#abc”);」です。
素人プログラマーにとってはいまのところ、これらで事が足りています。