0

現在jQuery('a#encode-url-button, a#decode-url-button')、次のような要素を選択していますが、新しい関数を作成せずに、純粋な js で同じ要素を選択することは可能ですか? みたいなdocument.getElementById('encode-url-button, decode-url-button').onclick = function...？

4

1 に答える 1

7

はいdocument.querySelectorAll。CSS セレクターを受け入れます。最新のブラウザのほとんどがサポートしています。

本当に IE7 以前をサポートする必要がある場合は、もちろん、2 つのgetElementById呼び出しを実行し、要素がアンカーでない場合は要素を破棄できます。(これがセレクターのa#someid機能です。)

querySelectorAll要素を操作する場合は、DOM API には jQuery のような「セット セオリー」の方向性がないため、から得られたリストをループする必要があります。たとえば、次のようになります。

var list = document.querySelectorAll("#encode-url-button, #decode-url-button");
var index;
for (index = 0; index < list.length; ++index) {
   list[index].onclick = clickhandler;
}
function clickHandler() {
    // ....
}

(私はそのような DOM0 ハンドラーの使用を推奨しません。addEventListener代わりに使用を検討してください。ただしonclick、質問で引用したように...)

FWIW、99.99% の確率で、値は一意でidあるため、セレクターとタグ セレクター ( a#someid)を組み合わせても意味がありません。通常はidちょうど良いです。#someidタグを追加しても、何も速くなりません。実際、それは物事を遅くします。これを行う唯一の理由は、要素に 1 つのタグ (たとえば、a) があり、別のタグ (たとえば、divわからない) があり、一方があり、もう一方がない場合にのみ取得したい場合です。非常にエッジケース...

于 2013-05-06T18:28:39.547 に答える