[解決済み】querySelectorとquerySelectorAll vs getElementsByClassNameとgetElementById in JavaScript

質問

とは具体的にどのような違いがあるのか知りたいです。 querySelector と querySelectorAll に対して getElementsByClassName と getElementById ?

から このリンク で集めることができました。 querySelector を書くことができます。 document.querySelector(".myclass") というクラスを持つ要素を取得するために myclass と document.querySelector("#myid") というIDを持つ要素を取得するために myid . しかし、私はすでにそれを行うことができます getElementsByClassName と getElementById . どちらが優先されるのでしょうか？

また、私は XPages IDはコロンで動的に生成され、以下のようになります。 view:_id1:inputText1 . ということは、私が document.querySelector("#view:_id1:inputText1") は動作しません。しかし document.getElementById("view:_id1:inputText1") が動作します。何か理由があるのでしょうか？

解決方法は？

getElementsByClassNameとgetElementByIdに対するquerySelectorとquerySelectorAllの違いを知りたいのですが、具体的にはどのような違いがあるのでしょうか？

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

querySelector は、より複雑なセレクタを使用したい場合に便利です。

例：fooクラスのメンバーである要素の子孫のリストアイテム全て。 .foo li

document.querySelector("#view:_id1:inputText1") これは動作しません。しかし、document.getElementById("view:_id1:inputText1")を書くとうまくいく。何か理由があるのでしょうか？

は : 文字はセレクタの中で特別な意味を持ちます。エスケープする必要があります。(セレクタのエスケープ文字はJSの文字列の中でも特別な意味を持ちます。 その も)。

document.querySelector("#view\\:_id1\\:inputText1")