こんにちは！サキナオコです^o^
すっかり肌寒くなってきました。
JavaScript学習、本日エレメントです。
DOM
「Document Object Model」の略称。HTML または XMLドキュメントをプログラミング言語から操作するための関数やオブジェクトのセット（API：Application Programming Interface）です。
JavaScript だけでなく、主要なプログラミング言語には DOM を扱うための API が用意されている。
DOM では、HTML ドキュメントは木構造（階層構造）で表現されており、DOM ツリー といわれる。
え～っと。はい…
要素・属性・テキストは木構造の接点（ノード／node）として表現される。
meta 要素の子ノードになっている「空白」というのは meta 要素が空要素であることを表す。
はあ…
document.querySelector メソッドなどで JavaScript 側に呼び出していた「エレメント」は、この DOM ツリーでいう 要素ノード のこと。要素ノードは、JavaScript では Element オブジェクト として実装されている。
プスッ、プスプスプス…(ショートしかかる)
DOM ツリーや要素ノードというのは特定のプログラミング言語に依存しない概念（モデル）で、それらを JavaScript から扱えるように具現化されたものが Element オブジェクト。(Element オブジェクト以外にもある)
あ、はあなるほど…なんとなくわかりました。
JavaScript で HTML ドキュメントを操作するというのは、DOM ツリーをオブジェクトを介して操作する行為。
DOM ツリーの要素ノード（≒Element オブジェクト）を querySelector メソッドで取得したり、createElement メソッドで生成したり、appendChild メソッドで DOM ツリーにつなげたりすることで HTML ドキュメントを変化させている。
複数のエレメントを同時に呼び出す
各 id 属性の値は HTML ドキュメント毎に固有であるため、同じ要素が 複数あっても、getElementById メソッドを使えば必ずいずれか一つの要素を呼び出せる。
id 属性さえ付いていれば getElementById メソッドで狙ったエレメントを呼び出せる。
querySelector メソッドの場合は CSS セレクタ表現を使って呼び出すので、複数の要素にマッチしてしまい、一つ目の p 要素を呼び出す
p 要素を取得するには document.querySelector('p:nth-of-type(2)') などと引数（CSS セレクタ）を工夫すれば可能だがHTML 側に id 属性を付けたほうがいい
querySelectorAll メソッド
複数の要素を一度に呼び出して一括処理をしたい場合CSS セレクタにマッチした要素をすべて取ってきて、「エレメントの配列」として扱えたほうが便利。それを実現するもの
querySelectorAll メソッドの戻り値を受け取った定数そのままコンソールに出力されるNodeList オブジェクト。
NodeList オブジェクトはその名前のとおり、ノードのリスト（配列のようなもの）。
NodeList オブジェクトは配列ではないが、配列と同じように NodeList[インデックス] による値の取得ができる。
また、for-of 文や forEach メソッドなどの繰り返し構文が使える。
NodeList オブジェクトでは push／pop／shift／unshift や filter／map といった配列用のメソッドは使用できない（forEach のみ使える）。
Array.from メソッド を使うことで普通の配列に変換することができます。そうすれば、配列のすべてのメソッドが使用できる。
ふむふむ、とりあえずHTMLを操作するいろいろってことですね(端折りすぎ)。
HTMLとのあれこれはちょっと置いておくとして、JavaScriptの基本は終わったみたいなのでワールド制作のスクリプトに戻ろうと思います！
コメントを残す