console.log(document.getElementById("myid"));
という記述を見かけたのですが、上記のdocumentってセレクタですよね?
documentはつまりDOMなのでhtml内のすべての要素がセレクタという意味なのでしょうか
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答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
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/11/26 03:03
2017/11/26 03:08
2017/11/26 07:37
2017/11/26 08:03
2017/11/28 13:31
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総合スコア18164
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
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
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/11/27 02:25
2017/11/27 02:31
2017/11/27 05:55 編集
2017/11/27 06:01
2017/11/27 07:03
2017/11/28 13:36
あなたの回答
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