223

querySelectorとquerySelectorAllと getElementsByClassNameとの違いは何getElementByIdですか？

このリンクから、 classで要素を取得し、 ID で要素を取得するようにquerySelector記述できることを収集できました。しかし、私はすでにそれを行うことができます. どちらを優先する必要がありますか?document.querySelector(".myclass")myclassdocument.querySelector("#myid")myidgetElementsByClassNamegetElementById

また、ID がコロンで動的に生成され、このように見えるXPagesで作業していますview:_id1:inputText1。だから私が書いたとき、document.querySelector("#view:_id1:inputText1")それはうまくいきません。しかし、書くことdocument.getElementById("view:_id1:inputText1")は機能します。理由はありますか？

4

11 に答える 11

135

getElementsByClassNameおよびgetElementByIdに対するquerySelectorおよびquerySelectorAllの違いは正確に何ですか？

構文とブラウザのサポート。

querySelectorより複雑なセレクターを使用する場合に便利です。

たとえば、すべてのリストアイテムは、fooクラスのメンバーである要素の子孫です。.foo li

document.querySelector（ "＃view：_id1：inputText1"）は機能しません。ただし、document.getElementById（ "view：_id1：inputText1"）の記述は機能します。なぜ何かアイデアはありますか？

:文字はセレクター内で特別な意味を持っています。あなたはそれを脱出する必要があります。（セレクターエスケープ文字はJS文字列でも特別な意味を持っているため、それもエスケープする必要があります）。

document.querySelector("#view\\:_id1\\:inputText1")
于 2013-01-17T11:01:43.593 に答える
119

Mozilla ドキュメントからの収集:

NodeSelector インターフェイス この仕様は、Document、DocumentFragment、または Element インターフェイスを実装するすべてのオブジェクトに 2 つの新しいメソッドを追加します。

クエリセレクター

ノードのサブツリー内で最初に一致する Element ノードを返します。一致するノードが見つからない場合は、null が返されます。

querySelectorAll

ノードのサブツリー内の一致するすべての Element ノードを含む NodeList を返すか、一致するものが見つからない場合は空の NodeList を返します。

と

注: によって返される NodeList はquerySelectorAll()ライブではありません。つまり、DOM の変更はコレクションに反映されません。これは、ライブ ノード リストを返す他の DOM クエリ メソッドとは異なります。

于 2014-11-05T12:49:49.523 に答える
96

違いについては、 と の結果に重要な違いがありquerySelectorAllますgetElementsByClassName。戻り値が異なります。querySelectorAll静的コレクションをgetElementsByClassName返しますが、ライブ コレクションを返します。後で使用するために結果を変数に保存すると、混乱が生じる可能性があります。

  • で生成された変数には、メソッドが呼び出された時点でquerySelectorAllセレクターを満たした要素が含まれます。
  • で生成された変数には、使用時にgetElementsByClassNameセレクターを満たす要素が含まれます(メソッドが呼び出された時点とは異なる場合があります)。

たとえば、変数aux1と を再割り当てしていない場合でもaux2、クラスを更新すると異なる値が含まれていることに注意してください。

// storing all the elements with class "blue" using the two methods
var aux1 = document.querySelectorAll(".blue");
var aux2 = document.getElementsByClassName("blue");

// write the number of elements in each array (values match)
console.log("Number of elements with querySelectorAll = " + aux1.length);
console.log("Number of elements with getElementsByClassName = " + aux2.length);

// change one element's class to "blue"
document.getElementById("div1").className = "blue";

// write the number of elements in each array (values differ)
console.log("Number of elements with querySelectorAll = " + aux1.length);
console.log("Number of elements with getElementsByClassName = " + aux2.length);
.red { color:red; }
.green { color:green; }
.blue { color:blue; }
<div id="div0" class="blue">Blue</div>
<div id="div1" class="red">Red</div>
<div id="div2" class="green">Green</div>

于 2016-08-29T18:58:57.487 に答える
18

querySelector次のように、ID とクラスと疑似クラスを組み合わせた完全な CSS(3) セレクターにすることができます。

'#id.class:pseudo'

// or

'tag #id .class .class.class'

クラスをgetElementsByClassName定義するだけです

'class'

IDをgetElementById定義するだけです

'id'
于 2013-01-17T11:03:34.297 に答える
7

querySelectorとquerySelectorAllは比較的新しいAPIですが、getElementByIdと getElementsByClassNameはずっと長い間使用されてきました。つまり、使用するものは、サポートする必要のあるブラウザによって大きく異なります。

は:特別な意味があるので、ID/クラス名の一部として使用する場合はエスケープする必要があります。

于 2013-01-17T11:03:06.563 に答える