jQueryでDOMという概念がよくわかりません

Question

DOMというのはどういったときに使うものですか？

「オブジェクトを$()で囲む」ことについて「囲まれたオブジェクトをDOMにする」と表現するのだと理解しています。

質問ですが、以下のコードは囲んでも囲まなくてもcssの変更が効いているのに、なぜ囲まなくてはいけないのかがよくわかりません。

どういったときに囲まないといけない（DOMにしないといけない）のでしょうか？

<button type="button"
data-id="1"
data-name="a"
>button</button>

<script>
var id = '1';
var $button = $("button[data-id='"+id+"']"); 
$button.css('color','blue'); // 囲まなくても効く
$( $button ).css('background','red'); // 囲んでも効く
</script>

Answer 1

ドキュメントオブジェクトモデルの略です。

ふつうは JavaScript を使用しますが、 HTML、 SVG、 XML などの文書をオブジェクトとしてモデリングすることは JavaScript 言語の一部ではありません。

つまりjQuery自体のものでもありません。

$()の中で指定するのは「セレクタ」です。得られるのは既に回答にあるようにjQueryのオブジェクトです。

言い方は抽象的ですが、jQueryの中で結構いい感じに処理されて効くようになってます。(故に動作は高速とは言えませんし、用途がハッキリしてるならjQueryではなくPureJavaScriptで組んだ方が動作は速いです)

Comments

[massuguda]

どうもありがとうございます！ふんわりした理解でしたのでリンクも勉強になりました。

[m.ts10806]

リンクは公式にかなり近いドキュメントなので、調べるとすぐ出てくるものです。
仕様など知りたいときは活用しましょう。そして実際に動かして理解を深めましょう。

Answer 2

「オブジェクトを$()で囲む」ことについて「囲まれたオブジェクトをDOMにする」と表現するのだと理解しています。

この時点で違います。$()で得られるものはjQuery独自のオブジェクトです。

上のコード例では、最初の$button = $(セレクタ);で$buttonにjQueryオブジェクトが得られているので、その後は$button.css()の形で問題なく使えます。

Comments

[massuguda]

囲むとオブジェクトになるんですね。ありがとうございます。適用される理由も納得いきました。