質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

91.37%

  • JavaScript

    11195questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

javascriptのdocumentセレクタについて

解決済

回答 4

投稿 2017/11/26 11:34

  • 評価
  • クリップ 3
  • VIEW 472

yamagata_user

score 26

console.log(document.getElementById("myid"));
という記述を見かけたのですが、上記のdocumentってセレクタですよね?
documentはつまりDOMなのでhtml内のすべての要素がセレクタという意味なのでしょうか

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

+5

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 11:48

編集 2017/11/26 11:51

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/11/26 11:54

    ご回答ありがとうございます。
    javascriptではjqueryでいうセレクタという概念はないのでしょうか。
    一番最初に書くもの(今回の例でのdocumentなど)がjquery上のセレクタに該当し、javascriptのメソッドが操作する部分になるのでしょうか。

    キャンセル

  • 2017/11/26 12:03

    JavaScript言語仕様そのものにはないと思います。それ故にjQueryのようなライブラリが必要かと。
    「一番最初に書くもの」が正確に何を意味しているのかにもよりますが、オブジェクト指向プログラミングの一般的な記述方法では「オブジェクト.メソッド()」となります。ここで「オブジェクト」は操作対象(主体)、そしてメソッドが「操作そのもの(処理)」となります。
    「document.getElementById("myid")」というJavaScriptのコードであれば、オブジェクトdocumentにおけるgetElementByIdというメソッドを呼び出して、「myid」というIDが設定された要素を取得せよ、という命令です。
    このコードをjQueryでは「$('#myid')」と簡略化して書けますが、あくまでもこれは上記コードを隠ぺいして簡単に書けるようにしているだけです。
    用語としてのjQueryのセレクタとは、あくまでも「要素(DOMオブジェクト)を選択するためのもの」という意味に過ぎません。
    document.getElementById("myid")

    キャンセル

  • 2017/11/26 12:08

    【補足】
    ちなみにdocumentオブジェクトにはgetElementById以外にもDOM要素を取得するためのメソッドがいくつか提供されています。広い意味ではそれらも概念的には「セレクタ」と呼ぶことができるでしょう。
    querySelectorと言うメソッドもあることですし。

    キャンセル

  • 2017/11/26 16:37

    ありがとうございます。
    セレクタとオブジェクトの違いがよくわからないです。。
    jqueryなら

    セレクタ.メソッド(引数)

    と書くと思うので最初に書かれているものがセレクタだと思いますが、そのセレクタはメソッドによって直接操作されるためオブジェクトとも呼べるのではないかと思いましたがそうなのでしょうか。

    javascriptでも

    オブジェクト.メソッド()

    のように書くと書かれてありましたので、上記の「オブジェクト」はメソッドで直接操作されるのでjqueryでいうところのセレクタに相当するものと考えても大丈夫でしょうか。

    キャンセル

  • 2017/11/26 17:03

    別回答の「defghi1977」さんの回答に詳述されていますが、用語と対応するコードに少し勘違いがあるのかもしれませんね。「セレクタ」はあくまでも「要素を選択するためのもの」という概念です。

    キャンセル

  • 2017/11/28 22:31

    セレクタ自体はメソッドが直接操作できず、$()などでオブジェクト化しないといけないということでしょうか。
    もう一度よく学習してみたいと思います。
    ありがとうございました。

    キャンセル

+5

用語に混乱が見られます. 

一般にセレクタとはCSSに記述されたスタイル設定をDOMに適用する際, 対象となるノードを抽出するための条件を指します.

NOTE:
元々CSSでの仕様の一部だったのが余りに便利なため, 別途selector仕様として独立したものとなり, 今日では(HTML)DOMからも利用可能となっています.

セレクタ
https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Getting_started/Selectors

一方documentwindow等はJavaScriptからアクセス可能な(DOMオブジェクトが格納されている)変数・プロパティ名です. セレクタという概念が直にJavaScriptに存在するのではありません. これはjQueryを用いていても同じで, セレクタ文字列を使ってDOM内を検索出来るだけです.

セレクタ.メソッド(引数)

これはおそらく$("セレクタ").メソッド(引数)の意味と思われますが,$("セレクタ")はJQueryオブジェクトであり, 「メソッド$に引数としてセレクタ文字列を与えるとJQueryオブジェクトが得られる」のです.

投稿 2017/11/26 16:49

編集 2017/11/26 17:34

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/11/26 17:01

    ご回答・ご訂正ありがとうございます。
    jqueryであれば
    $("div").fadeOut();
    のように書けば「div」がセレクタだと簡単に特定できると思います。
    しかしjavascriptの場合はセレクタ自体がコードのなかに現れることはない、ということでしょうか?
    その場合なのですが、例えば
    console.log(document.getElementById("myid"));
    の場合は、「document」がjqueryでいうところの「$("セレクタ")=jqueryオブジェクト」に相当するものと思っておけば大丈夫でしょうか。

    キャンセル

  • 2017/11/26 17:14 編集

    To: defghi1977 さん
    > セレクタという概念が直接JavaScriptコードに現れることはありません. これはJQueryを用いていても同じです.
    JavaScript上でも「セレクタ」という用語は存在しえます。
    querySelectorAll は IE8 以上を要求しますが、今では珍しいものではなく、一般的に使われるコードだと思います。
    jQuery('#foo') も今では Selectors API を模倣したものであり、公式ドキュメントでも "selector" の用語を確認できます。
    http://api.jquery.com/jquery/

    キャンセル

  • 2017/11/26 17:15

    documentは「今開いているHTML文書」に相当するDOMオブジェクトです. で, document.getElementById([id])は「今開いている文書の中からid値が[id]のノードを取得する」メソッドです. 同様にdocument.querySelector([セレクタ])というメソッドもあり, これは「今開いている文書の中から[セレクタ]条件に合致する先頭のノードを取得する」機能をもっています.
    このように基本的な検索処理はjQueryを用いずとも可能なのですが, 結構記述が面倒なのでjQueryで各種オブジェクトをくるんだ「jQueryオブジェクト」を使うのです.
    逆にjQueryオブジェクトから生のDOMオブジェクトを取得する($("セレクタ").get(0))ことも可能です.

    キャンセル

  • 2017/11/26 17:18

    皆さんの説明の補足になりますが、
    $("div").fadeOut() における「div」も document.getElementById("myid") における「myid」も同様にセレクタですよ。記述方法が異なっているだけです。
    jQueryの「$()」は実際には「jQuery()」関数のエイリアス(別名)であり、getElementById("myid") も $("#myid") も共に「メソッド(セレクタ)」あるいは「関数(セレクタ)」です。
    ※ メソッドはオブジェクトに属する関数
    ただ、生のJavaScriptではgetElementByIdメソッドはdocumentオブジェクトで提供されているため、オブジェクト.メソッド() の形式で呼び出されなければいけない代わりに、jQueryでは$() 関数はグローバルな関数としてオブジェクトを介さずに呼び出すことができるという違いがあるだけです。

    キャンセル

  • 2017/11/26 17:48

    To: amadablam さん
    > document.getElementById("myid") における「myid」も同様にセレクタですよ。
    それは、さすがに「セレクタ」とは呼ばないと思います…。
    仕様では elementId とあるように「要素が持つID」ですね。
    https://triple-underscore.github.io/DOM4-ja.html#interface-nonelementparentnode
    私としてはSelectors Level 4定義の "Selector" がセレクタだと思います(回答欄で触れました)。

    キャンセル

  • 2017/11/26 21:24

    そうですね。コード的に等価な部分をちょっと拡大解釈し過ぎましたね。

    キャンセル

  • 2017/11/28 22:31

    なかなか今の私では完全に理解するのは難しいみたいです。
    でも少しずつですがわからなかったところがわかるようになってます。
    ありがとうございます。

    キャンセル

  • 2017/11/28 22:56

    多分今がHTMLDOMを学ぶ好機かと. 基本が判ってくるとjQueryとの関係も理解できて一石二鳥ですよ

    キャンセル

  • 2017/12/03 20:43

    HTMLDOMとはhtmlのdocument(html全体?)という意味でしょうか。
    調べたのですがよくわかりませんでした。
    javascriptにおけるDOMの扱い方ということでしょうか。
    いずれにしてもjs覚えたいので頑張ります。
    ありがとうございます。

    キャンセル

  • 2017/12/03 21:17

    「HTMLDOM」というHTML文書をJavaScriptから操作する為の統一的な仕様があるのですよ.
    https://developer.mozilla.org/ja/docs/Web/JavaScript/JavaScript_technologies_overview
    jQueryを始めとした便利ライブラリは全てこのHTMLDOMを使っているので, 「より良くjQuery」を理解するには避けて通ることは出来ませんし, 他の方とコミュニケーションする際もこの文脈で用語を用いませんと意思の疎通ができないのです.

    キャンセル

+4

 セレクタ (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でも querySelectorquerySelectorAll で利用することが出来ます。

セレクタとは「DOM上から対象の要素ノード」または「NodeList(ノードのリスト)」を検索する為の文字列であり、セレクタで条件を指定すれば目的のノードを得ることが出来ます。

 コード

JavaScriptでは次のコードでセレクタを指定できます。

document.querySelector('#foo');
document.querySelectorAll('#bar>.piyo>p');

jQuery() は querySelectorAll() と同等の機能を持つので、次のように書きます。

jQuery('#foo')
jQuery('#bar>.piyo>p');

JavaScriptコード上に存在するセレクタは、ただの文字列(String値)であり、専用に用意された関数を通さなければ目的のノードを得ることは出来ません。

"#foo";                         // セレクタ (ただの文字列)
document.querySelector('#foo'); // 要素ノードを返す
jQuery('#foo');                 // jQueryオブジェクトを返す

 関数の「引数」と「返り値」

セレクタ.メソッド(引数)

「セレクタそのもの」にメソッドが生えているわけではありません。

jQuery('#foo').addClass('bar'); // 実行できる
'#foo'.addClass('bar');         // TypeError: "#foo".addClass is not a function

関数の「引数値」と「返り値」の違いから意識して、学習してみると良いと思います。

Re: yamagata_user さん

投稿 2017/11/26 17:05

編集 2017/11/26 17:43

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/11/28 22:32

    基本からもう一度勉強してみます。
    ありがとうございます。

    キャンセル

checkベストアンサー

+3

混同している理由がわかった。
こういうことだね?

// この内、第一引数の"div.class_name"はまごうことなくセレクタ
$("div.class_name");

// じゃあこいつらも同様に第一引数に入るからセレクタじゃねえの?
$(document);
$(window);
$(function(){
  // 処理
})

セレクタとそれ以外の違いってなんだろう?

そもそもHTMLの世界ではセレクタってのは「CSSセレクタ」が一般的だろうね。
CSSでは下記のように書けば、レンダリングエンジンが「pタグの子孫にあるstrongタグ」を探してくれて、
ヒットした箇所のフォントサイズを書き換えてくれる。

p strong {
  font-size: 14px;
}

jQueryでは「CSSと同じような書き方で要素を選択したい!」という要望があった。
そこで、jQuery関数($変数)にCSSセレクタのような文字列を第一引数として投げ込んでやると、
DOMツリーを片っ端から漁って合致するDOMツリーを返してくれる。

セレクタというのはDOMツリーの引換券として機能する文字列であり、
jQueryでは見事にCSSセレクタと同等の機能を作って用意してくれてるわけだ。
あくまで引換券なので、DOMそのものはセレクタとは呼ばない。

例えば通販で頼んだ品を当日受け取れず、ゆうパックの不在通知ハガキがポストに入っていたとしよう。
この時、不在通知ハガキは通販の品物の引換券だ。
これを郵便局に持っていくと通販の品物と交換してくれるが、通販の品物を指指して「不在通知ハガキだ」とは呼ばないのと同じことだね。

セレクター -> DOMも同様で一方通行の概念なんだ。
CSS解析機やjQueryの関数に投げ込んだら対象のDOMは得られるけど、DOMはセレクターではない。


でにjQuery($)の第一引数にCSSセレクタ的な文字列を渡すから、
第一引数に入ってきた引数は全てセレクタではないのか?
実を言うと、jQueryは渡された引数を元に動作をコロコロ変えるので適切ではない。

$(function(){
  // 処理
})

例えばこう書くと、DOMツリー構造が全てレンダリングされた後まで動作を遅延して実行しますよという命令になる。
これはセレクタとは呼ばない。

他にもdocumentやwindowも独自の処理を行うので、セレクタとは呼ばない。
質問者さんの指しているセレクタというのは単なる文字列の「要素引換券」を指しているからだ。


セレクタはCSSとjQueryでしか使えないのか?

JavaScriptにも輸入してくれという声は結構前から出ていた。
それに応える形で登場したのが、
モダンブラウザやIE9以降のブラウザで利用可能のdocument.querySelectordocument.querySelectorAll
(IE8以下も用意はされていましたが、一部セレクタが動作しなかった)

document.querySelector("p strong")などのように書くと、
jQueryと同じようにDOMツリーを探索してDOMを返してくれる。

投稿 2017/11/27 10:43

編集 2017/11/27 15:49

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/11/27 11:25

    document.querySelector自体はIE8から対応してますね。

    キャンセル

  • 2017/11/27 11:31

    混同してました!
    document.querySelectorAllの一部セレクタがちゃんと使えるようになったのがIE9からなので錯覚してたようです
    https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll

    IE8に修正しておきます。

    キャンセル

  • 2017/11/27 14:55 編集

    > IE9以降のブラウザで完全対応したdocument.querySelectorAll
    querySelectorAll 「だけ」IE9から完全対応したように読めてしまうのですが、使用しているセレクタエンジンは変わらないので、querySelector, querySelectorAll でセレクタエンジン上の機能に違いはないのではないでしょうか。
    「また、「完全対応」というのも眉唾物で、例えば、IE9は「CSS Flexible Box Layout Module」に対応していません。」←間違えました。Selectors API基準なので、Flexは関係ないですね。再考します。
    Selectors APIは随時更新されるものなので、「いつの時点」で完全対応なのか、という課題もありますね…。

    キャンセル

  • 2017/11/27 15:01

    Selectors Level 3基準ではIE9は確かに完全対応しているようです。失礼しました。
    https://caniuse.com/#feat=css-sel3

    キャンセル

  • 2017/11/27 16:03

    MDNの記述をベタッと貼り付けただけでした(/ω\)
    そりゃ確かにセレクタの解釈は同じロジックになって当然ですよね。
    補完ありがとうございます、反映しました!

    キャンセル

  • 2017/11/28 22:36

    今の私にはレベルが高い話でしたが、セレクタはDOMに対して検索するための検索文字列的なものかなと思いました。(合っているかわかりませんが)
    もっと基本からjsとjqueryを学習したいと思います。
    このたびはありがとうございます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

ただいまの回答率

91.37%

関連した質問

同じタグがついた質問を見る

  • JavaScript

    11195questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。