Q&A
ご回答ありがとうございます。
javascriptではjqueryでいうセレクタという概念はないのでしょうか。
一番最初に書くもの（今回の例でのdocumentなど）がjquery上のセレクタに該当し、javascriptのメソッドが操作する部分になるのでしょうか。
console.log(document.getElementById("myid"));
という記述を見かけたのですが、上記のdocumentってセレクタですよね？
documentはつまりDOMなのでhtml内のすべての要素がセレクタという意味なのでしょうか
回答4件
0
用語に混乱が見られます.
一般にセレクタとはCSSに記述されたスタイル設定をDOMに適用する際, 対象となるノードを抽出するための条件を指します.
NOTE:
元々CSSでの仕様の一部だったのが余りに便利なため, 別途selector仕様として独立したものとなり, 今日では(HTML)DOMからも利用可能となっています.
セレクタ
https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Getting_started/Selectors
一方documentやwindow等はJavaScriptからアクセス可能な(DOMオブジェクトが格納されている)変数・プロパティ名です. セレクタという概念が直にJavaScriptに存在するのではありません. これはjQueryを用いていても同じで, セレクタ文字列を使ってDOM内を検索出来るだけです.
セレクタ.メソッド（引数）
これはおそらく$("セレクタ").メソッド(引数)の意味と思われますが,$("セレクタ")はJQueryオブジェクトであり, 「メソッド$に引数としてセレクタ文字列を与えるとJQueryオブジェクトが得られる」のです.
投稿2017/11/26 07:49
編集2017/11/26 08:34
総合スコア4756
0
documentはセレクタではなくDOMオブジェクトです。
https://www.w3.org/TR/1998/REC-DOM-Level-1-19981001/level-one-core.html#i-Document
documentはつまりDOMなのでhtml内のすべての要素がセレクタという意味なのでしょうか
DOMは階層構造であり、documentは文字通りそのドキュメントのルート(階層構造の頂点)です。
別の見方で言えば、入れ子構造において、すべての要素を包含する一番外側の要素です。
投稿2017/11/26 02:48
編集2017/11/26 02:51
総合スコア402
JavaScript言語仕様そのものにはないと思います。それ故にjQueryのようなライブラリが必要かと。
「一番最初に書くもの」が正確に何を意味しているのかにもよりますが、オブジェクト指向プログラミングの一般的な記述方法では「オブジェクト.メソッド()」となります。ここで「オブジェクト」は操作対象(主体)、そしてメソッドが「操作そのもの(処理)」となります。
「document.getElementById("myid")」というJavaScriptのコードであれば、オブジェクトdocumentにおけるgetElementByIdというメソッドを呼び出して、「myid」というIDが設定された要素を取得せよ、という命令です。
このコードをjQueryでは「$('#myid')」と簡略化して書けますが、あくまでもこれは上記コードを隠ぺいして簡単に書けるようにしているだけです。
用語としてのjQueryのセレクタとは、あくまでも「要素(DOMオブジェクト)を選択するためのもの」という意味に過ぎません。
document.getElementById("myid")
【補足】
ちなみにdocumentオブジェクトにはgetElementById以外にもDOM要素を取得するためのメソッドがいくつか提供されています。広い意味ではそれらも概念的には「セレクタ」と呼ぶことができるでしょう。
querySelectorと言うメソッドもあることですし。
ありがとうございます。
セレクタとオブジェクトの違いがよくわからないです。。
jqueryなら
セレクタ.メソッド（引数）
と書くと思うので最初に書かれているものがセレクタだと思いますが、そのセレクタはメソッドによって直接操作されるためオブジェクトとも呼べるのではないかと思いましたがそうなのでしょうか。
javascriptでも
オブジェクト.メソッド()
のように書くと書かれてありましたので、上記の「オブジェクト」はメソッドで直接操作されるのでjqueryでいうところのセレクタに相当するものと考えても大丈夫でしょうか。
別回答の「defghi1977」さんの回答に詳述されていますが、用語と対応するコードに少し勘違いがあるのかもしれませんね。「セレクタ」はあくまでも「要素を選択するためのもの」という概念です。
セレクタ自体はメソッドが直接操作できず、$()などでオブジェクト化しないといけないということでしょうか。
もう一度よく学習してみたいと思います。
ありがとうございました。
0
セレクタ (Selectors)
JavaScriptでセレクタと呼ばれるのは、Selectors Level 4で定義されているものです。
A Selector represents a structure. This structure can be used as a condition (e.g. in a CSS rule) that determines which elements a selector matches in the document tree, or as a flat description of the HTML or XML fragment corresponding to that structure.
日本語訳「選択子(Selector)は、構造を表現する。 この構造は、文書木の中でどの要素が選択子に合致するかを決定するための条件として（例えば CSS 規則における）, あるいは その構造に対応する HTML や XML の素片の flat な記述として，利用し得る。」
CSSでの利用用途が有名ですが、JavaScriptでも querySelector, querySelectorAll で利用することが出来ます。
セレクタとは「DOM上から対象の要素ノード」または「NodeList(ノードのリスト)」を検索する為の文字列であり、セレクタで条件を指定すれば目的のノードを得ることが出来ます。
コード
JavaScriptでは次のコードでセレクタを指定できます。
JavaScript
1document.querySelector('#foo'); 2document.querySelectorAll('#bar>.piyo>p');
jQuery() は querySelectorAll() と同等の機能を持つので、次のように書きます。
JavaScript
1jQuery('#foo') 2jQuery('#bar>.piyo>p');
JavaScriptコード上に存在するセレクタは、**ただの文字列(String値)**であり、専用に用意された関数を通さなければ目的のノードを得ることは出来ません。
JavaScript
1"#foo"; // セレクタ (ただの文字列) 2document.querySelector('#foo'); // 要素ノードを返す 3jQuery('#foo'); // jQueryオブジェクトを返す
関数の「引数」と「返り値」
セレクタ.メソッド（引数）
「セレクタそのもの」にメソッドが生えているわけではありません。
JavaScript
1jQuery('#foo').addClass('bar'); // 実行できる 2'#foo'.addClass('bar'); // TypeError: "#foo".addClass is not a function
関数の「引数値」と「返り値」の違いから意識して、学習してみると良いと思います。
Re: yamagata_user さん
投稿2017/11/26 08:05
編集2017/11/26 08:43
総合スコア18162
0
ベストアンサー
混同している理由がわかった。
こういうことだね？
JavaScript
1// この内、第一引数の"div.class_name"はまごうことなくセレクタ 2$("div.class_name"); 3 4// じゃあこいつらも同様に第一引数に入るからセレクタじゃねえの？ 5$(document); 6$(window); 7$(function(){ 8 // 処理 9})
セレクタとそれ以外の違いってなんだろう？
そもそもHTMLの世界ではセレクタってのは「CSSセレクタ」が一般的だろうね。
CSSでは下記のように書けば、レンダリングエンジンが「pタグの子孫にあるstrongタグ」を探してくれて、
ヒットした箇所のフォントサイズを書き換えてくれる。
CSS
1p strong { 2 font-size: 14px; 3}
jQueryでは「CSSと同じような書き方で要素を選択したい！」という要望があった。
そこで、jQuery関数($変数)にCSSセレクタのような文字列を第一引数として投げ込んでやると、
DOMツリーを片っ端から漁って合致するDOMツリーを返してくれる。
セレクタというのはDOMツリーの引換券として機能する文字列であり、
jQueryでは見事にCSSセレクタと同等の機能を作って用意してくれてるわけだ。
あくまで引換券なので、DOMそのものはセレクタとは呼ばない。
例えば通販で頼んだ品を当日受け取れず、ゆうパックの不在通知ハガキがポストに入っていたとしよう。
この時、不在通知ハガキは通販の品物の引換券だ。
これを郵便局に持っていくと通販の品物と交換してくれるが、通販の品物を指指して「不在通知ハガキだ」とは呼ばないのと同じことだね。
セレクター -> DOMも同様で一方通行の概念なんだ。
CSS解析機やjQueryの関数に投げ込んだら対象のDOMは得られるけど、DOMはセレクターではない。
でにjQuery($)の第一引数にCSSセレクタ的な文字列を渡すから、
第一引数に入ってきた引数は全てセレクタではないのか？
実を言うと、jQueryは渡された引数を元に動作をコロコロ変えるので適切ではない。
JavaScript
1$(function(){ 2 // 処理 3})
例えばこう書くと、DOMツリー構造が全てレンダリングされた後まで動作を遅延して実行しますよという命令になる。
これはセレクタとは呼ばない。
他にもdocumentやwindowも独自の処理を行うので、セレクタとは呼ばない。
質問者さんの指しているセレクタというのは単なる文字列の「要素引換券」を指しているからだ。
セレクタはCSSとjQueryでしか使えないのか？
JavaScriptにも輸入してくれという声は結構前から出ていた。
それに応える形で登場したのが、
モダンブラウザやIE9以降のブラウザで利用可能のdocument.querySelectorやdocument.querySelectorAll
(IE8以下も用意はされていましたが、一部セレクタが動作しなかった)
document.querySelector("p strong")などのように書くと、
jQueryと同じようにDOMツリーを探索してDOMを返してくれる。
投稿2017/11/27 01:43
編集2017/11/27 06:49
総合スコア21158
document.querySelector自体はIE8から対応してますね。
混同してました！
document.querySelectorAllの一部セレクタがちゃんと使えるようになったのがIE9からなので錯覚してたようです
https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll
IE8に修正しておきます。
> IE9以降のブラウザで完全対応したdocument.querySelectorAll
querySelectorAll 「だけ」IE9から完全対応したように読めてしまうのですが、使用しているセレクタエンジンは変わらないので、querySelector, querySelectorAll でセレクタエンジン上の機能に違いはないのではないでしょうか。
「また、「完全対応」というのも眉唾物で、例えば、IE9は「CSS Flexible Box Layout Module」に対応していません。」←間違えました。Selectors API基準なので、Flexは関係ないですね。再考します。
Selectors APIは随時更新されるものなので、「いつの時点」で完全対応なのか、という課題もありますね…。
Selectors Level 3基準ではIE9は確かに完全対応しているようです。失礼しました。
https://caniuse.com/#feat=css-sel3
MDNの記述をベタッと貼り付けただけでした（/ω＼）
そりゃ確かにセレクタの解釈は同じロジックになって当然ですよね。
補完ありがとうございます、反映しました！
今の私にはレベルが高い話でしたが、セレクタはDOMに対して検索するための検索文字列的なものかなと思いました。（合っているかわかりませんが）
もっと基本からjsとjqueryを学習したいと思います。
このたびはありがとうございます。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/11/26 08:01
2017/11/26 08:14 編集
2017/11/26 08:15
2017/11/26 08:18
2017/11/26 08:48
2017/11/26 12:24
2017/11/28 13:31
2017/11/28 13:56
2017/12/03 11:43
2017/12/03 12:17