JavaScript IDの複数読み込みについて

質問

JavaScript（プログラミング）はほとんど知識のないもので、
自分なりに調べたのですが、分からないので質問させていただきます。

下記のようなJavaScriptがあります。

window.onload = function() {
var target = document.getElementById("●●");
target.addEventListener("touchstart",
function(){this.className="touchstyle";}, false);
target.addEventListener("touchend",
function(){this.className="notouchstyle";}, false);
}

"●●"のほかに"▲▲" "■■"というIDを読み込ませたいのですが、
それは可能でしょうか。
（"xxx"はclass指定に変更でも構いません）

色々と試してみたのですが、うまくいかず困っております。
何卒ご教授のほど宜しくお願い致します。

回答No.3

神崎 渉瑠（@taloo） · ベストアンサー

var target_1 = document.getElementById("●●");
var target_2 = document.getElementById("▲▲");
var target_3 = document.getElementById("■■");

これでいいのでは？

>色々と試してみたのですが、うまくいかず困っております。
そのいろいろと試してみたという、実際のコード（うまくいかないコード）を提示してください。

お礼

ご回答ありがとうございます。
実際のコードは色々試しては消してと繰り返したので、残しておりません。。
でも教えて頂いたコードで対応できました。
ありがとうございました。

回答No.2

lupin-333333

No1ですが、ついでにおまけです。

http://msdn.microsoft.com/en-us/library/windows/apps/hh465755.aspx

は、ＩＥ用のマイクロソフト公式リファレンスサイトです。

ＤＯＭについてのリファレンスです。これは以外に役に立ちます。

http://msdn.microsoft.com/en-us/library/windows/apps/hh465823.aspx

が　getElementById メソッドのリファレンスです。ＤＯＭ　バージョン３　で記述されている事がわかります。そこのボタンを押すと、標準化されているＷ３Ｃサイトに飛びます。

http://www.w3.org/TR/DOM-Level-3-Core/

ここが、全ての原点です。

http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html

上記から、Ｃｏｒｅのリンクをたどると

http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-getElBId

とすぐに見つかるはずです。

そこから、リンクをすべてみてください。そうすると、Element として規定されているＩＤとは、なんと規定されているかにたどり着きます。そう、そのメソッドの引数に指定できる値の型（どんな文字列か）が記載されています。

当然、HTMLの規定からはずれる事は、ほぼありません。

http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#DOMString

つまずいたら、まずリファレンスサイトを探し、書式を勉強しましょう。それから原本となる、標準書をみましょう。

そうすると、理解が深まります。そうすると、いかにブラウザ側でローカライズされているか分かります。

お礼

ご回答ありがとうございます。
教えて頂いたリンク先を見ましたが、
根本的に勉強しないとダメだと分かりました。

回答No.1

lupin-333333

この辺は、いつもこのカテゴリーで、まっさきに答える方が、回答するかと思いきや、全然反応しないんですね。やっぱり、自己顕示欲を満たす質問でないとだめみたいですね。

本題です。

まず、ＨＴＭＬとしてどうか？　と言う問題があります。その辺を確認しましたでしょうか。

ＨＴＭＬとしてどうかとは、ＨＴＭＬ4.01 などと、規格され、標準化されている決まりごとです。

http://www.w3.org/TR/html401/

これになんと規定されていますか？

http://www.w3.org/TR/html401/struct/global.html#h-7.5.2

http://www.w3.org/TR/html401/types.html#type-name

そう、name属性と、同一に規定されています。

http://www.microsofttranslator.com/BV.aspx?ref=IE8Activity&a=http%3A%2F%2Fwww.w3.org%2FTR%2Fhtml401%2Fstruct%2Fglobal.html%23h-7.5.2

機械翻訳です。翻訳サイトもあるのでそちらも参考にしてください（機械翻訳と違い、ちゃんと意味通じるように約されています）

抜粋：
ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

英語１の私でも、なんとなくわかるような・・・　最初はA～Z　及び a～zまでのアルファベットで始めないといけないみたいですね。最初のところで引っかかってしまったようですね。残念でした。

getElementById　が　あいまい検索だったらよかったのにね。

上記と同じようにJavaScript1.0 ～　１．５　までのバージョンの標準書を見ましょう。

また、DOM 1 ～　3　までの標準書を見ましょう。

それらになんと規定さてれいるかです。

ちなみにJavaScript はECMA ですので。それを、それぞれのブラウザ（エンジン）でローカライズしています。ＤＯＭも同じです。

http://www.ecma-international.org/publications/standards/Ecma-262.htm