WEBプログラミングを学習したいと考える人は、まずは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」としてみたので、便利に使ってみてください。
elementSelector
;var elementSelector = (function(){
// 上位階層からみたカレントエレメントの順番を取得
var getChildNumber = function(element){
if(!element){return}
var parent = element.parentElement;
var children = parent.children;
var number = 1;
for(var i=0; i<children.length; i++){
if(children[i] === element){
break;
}
number++;
}
return number;
};
var $$ = function(element){
if(!element){return;}
// 上位ID値を持っているエレメントを検索
var selectors = [];
for (var cur=element; cur; cur=cur.parentElement) {
if (cur.id) {
selectors.unshift("#"+cur.id);
break;
}
else if(cur.tagName === "BODY"){
selectors.unshift("body");
break;
}
var tag = cur.tagName.toLowerCase();
var nthChild = getChildNumber(cur);
nthChild = (nthChild === 1) ? "" : ":nth-child("+nthChild+")";
var className = (cur.className && cur.className.indexOf(" ") !== -1) ? "."+cur.className : "";
selectors.unshift(tag + className +nthChild);
}
return selectors.join(" > ");
};
return $$;
})();
使い方
javascriptで任意のエレメントのセレクタを取得したい時に、以下のように記述すると、セレクタが得られます。
ちなみに、「elementSelector.js」は、事前にヘッダタグ内などで読み込みをしておいてください。
var selector_String = elementSelector(%element);
取得したselectorが正常に動作するかどうかを確かめるには、querySelectorに突っ込んでみましょう。
document.querySelector("%Responce-selector-string");
ブラウザのデバッグコンソールなどで実行してみてもいいでしょう。
