DOMException: 「Document」で「querySelectorAll」の実行に失敗しました。これは有効なセレクターエラー処理ではありません

問題のプロセス

今日の開発プロセス中に、次のエラーメッセージが表示されました。

act-dom.production.min.js:5058 DOMException: 'Document' で 'querySelectorAll' の実行に失敗しました: '0bb64d67-b455-4130-9b73-55eda6a1975c8Buu-link-ellipsis' は有効なセレクターではありません。

スクリーンショット1

文字通り: querySelectorAll 関数がエラーを報告しました。これは有効なセレクターではありません。インターフェイスでコンソールを開くと、ID が「0bb64d67-b455-4130-9b73-55eda6a1975c8Buu-link-ellipsis」である DOM 要素が見つかりますが、エラーが報告されるのはなぜですか?

問題の原因

情報を確認したところ、MDN に明確な説明がありました: HTML の ID は数字で始めることはできません

スクリーンショット2

スクリーンショット3

**注意:** ASCII文字、数字、、、、_および以外の文字を使用する-と、.HTML 4 では使用できないため、互換性の問題が発生する可能性があります。この制限はHTML5で解除されましたが、互換性のために ID は文字で始める必要があります。

解決

当初は要素の ID としてバックエンドからの ID を使用していましたが、バックエンドスラグによって作成された ID は文字で始まる場合があるため、フロントエンド HTML ノードは一部のサードパーティライブラリに対応しており、間違っている可能性があります。通常は、文字で始まる ID を直接使用できます。