geta1972TweetPocketCheckWEBプログラミングを学習したいと考える人は、まずはHTMLから習得しなければいけません。どの言語を使ってもWEBプログラムはWEBブラウザで何かしらの表示を行なうことが目的になることがほとんどのため、HTMLをしらなければアウトなのです。HTMLとセットで覚えなければいけないのが「CSS」。どちらもルールさえ覚えてしまえば、あとはリファレンスページで命令を探しながら素人さんでも簡単なホームページぐらいなら作れてしまうでしょう。cssはselectorを覚えることでほぼ習得完了と言ってもいいぐらい覚えやすい言語なので今ではデザイナーさんなどは必須スキルになっているようです。そんなcssからjavascriptへと移植されてきたのが「querySelector機能」です。便利にelementを選択する命令として非常に重宝するし、プログラム構築がとても簡素化することができます。querySelectorがなかった頃の時代IE8から搭載され始めた「querySelector」という機能は、もともとjQueryの関数機能でした。これは便利ということでES側に採用されたとのことで、どのブラウザも準拠してきたのですが、アップデート方式を取っているブラウザと違い、過去バージョンがそのままブラウザとして残ってしまうIEの旧バージョンは、querySelectorの恩恵を受けないまま今現在でも使い続けている人がいるという事になります。querySelectorがまだ無かった時代には、「getQlementById」や「getEkementsByTagName」あたりで、大元要素を取得し、「childNodes」で個階層を検索していくプログラムをどのサービスも独自に書いていました。それが今ではquerySelectorでセレクタ値を書くだけで存在確認も含めて非常に簡単にエレメント取得が行えるようになりました。仮に旧版のIEを使わざるを得ない時には、querySelectorのハック関数をグローバルでセットして使うしか方法がないでしょう。※jQueryを使うという選択肢もありますね・・・querySelectorの逆ができない!?セレクタ値により、HTML内の要素を選択する事は非常に簡単にできるようになったのですが、エレメントからセレクタ値を取得する方法がありません。ブラウザのデバッグコンソールなどを使うと、「copy-selector」機能で、セレクタ値を取得することができるのに、javascriptで取得することができません。無いなら作ってしまえということで、エレメントからセレクタ値を取得するスニペットを作ってみました。機能名を「elementSelector」としてみたので、便利に使ってみてください。$$;})();使い方javascriptで任意のエレメントのセレクタを取得したい時に、以下のように記述すると、セレクタが得られます。ちなみに、「elementSelector.js」は、事前にヘッダタグ内などで読み込みをしておいてください。elementSelector(%element);取得したselectorが正常に動作するかどうかを確かめるには、querySelectorに突っ込んでみましょう。Defaultdocument.querySelector("%Responce-selector-string");1document.querySelector("%Responce-selector-string");ブラウザのデバッグコンソールなどで実行してみてもいいでしょう。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。